Demo for CSS Color Palettes

oklch() Color Function Level 4

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 and recommendations for color palettes by Jordan Bowman . This template 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+ made by Adi Purdila , which uses localStorage for checking the preferences set by the user.

What is oklch()?

Lightness - Chroma - Hue / Opacity

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.

CSS 
                                
                                    p {
                                            /* oklch(Lightness Chroma Hue / Opacity) */
                                            color: oklch(33% 0.1 0 / .5);
                                    }
Specification OKLCH in CSS OKLCH Picker

Create Your Color-Palettes

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 is not taken into account in this project. For now. :)

Change a Hue Value For:

Hue-Values for Brand- and Accent-color have a range of 0-360. All others have a limited range: Success (111-175), Failure (0-36), Warning (37-91) und Info (190-282).

Brand Colors

000
100
200
300
400
500
600
700
800
900

Accent Colors

000
100
200
300
400
500
600
700
800
900

Neutral Colors

000
100
200
300
400
500
600
700
800
900

Support Color: Success

000
100
200
300
400
500
600
700
800
900

Support Color: Failure

000
100
200
300
400
500
600
700
800
900

Support Color: Warning

000
100
200
300
400
500
600
700
800
900

Support Color: Information

000
100
200
300
400
500
600
700
800
900

Success: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, libero laboriosam veniam molestias, repellat eligendi assumenda porro labore ab repudiandae ratione quibusdam pariatur, quo temporibus. Link

Link

Failure: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut pariatur, reprehenderit autem officiis fugiat dicta officia consequuntur, nulla similique et explicabo at! Architecto, nesciunt minus! Link

Link

Warning: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab velit quam sit harum obcaecati totam eveniet nesciunt laudantium delectus, amet minima ipsa? Consequuntur, quod odio. Link

Link

Information: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex laudantium ea quia enim aut minus eligendi totam quisquam incidunt, excepturi nemo nisi saepe facilis at? Link

Link