My personal start in order to try to simplify my workflow for creating color palettes by using the oklch() color function. Based on the Youtube GUI Challenge by Adam Argyleink (Youtube-Link) and recommendations for color palettes by Jordan Bowman (Youtube-Link). This demo contains some dummy areas like a navbar, a hero section and several cards which are influenced by the color choice represented by the hue-value. Use the dark/light-Button next to the Subscribe-Button in order to switch between the dark and light color mode. The implementation of the Dark Mode Switcher is based on the Envato Tuts+ published on Youtube and made by Adi Purdila (Youtube-Link), which uses localStorage for checking the preferences set by the user.
One of the new CSS color Level 4 functions is the oklch() function which uses the Oklch cylindrical coordinate model. It is specified by Oklab Lightness in percent, by an radius representing chroma and an hue angle. The opacity can be set additionally.
oklch(Lightness Chroma Hue / Opacity)
- W3 Specification
- OKLCH in CSS by Andrey Sitnik & Travis Turner
- OKLCH Color Picker & Converter by Andrey Sitnik & Roman Shamin
As recommended by Jordan Bowman, colors used in webprojects are distinguished in brand, accent and supporting colors.
- Brand Colors: should be used for buttons, links, navigation and icons.
- Accent Colors: recommended for headlines and design elements.
- Supporting Colors: which should be used for feedbacks to an user like success or error messages.
Not mentioned, but very useful, are neutral colors like white and black and different shades of grey, which should be used as supporting colors to the design of an application.
Opacity was not taken into account in this project at this point.
Icons downloaded as SVG from: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools