OKLCH colors

OKLCH colors are a new color space that is designed to be more perceptually uniform than LCH. This makes it easier to create color palettes that are more visually balanced and harmonious.

1. L is perceived lightness (0%-100%).
2. C is chroma, from gray to the most saturated color (0.00-0.37).
3. H is the hue angle (0-360).
4. a is opacity (0-1 or 0-100%).

Examples

• background: oklch(45% 0.26 264); /* blue */
• color: oklch(100% 0 0); /* white */
• color: oklch(0% 0 0 / 50%); /* black with 50% opacity */

Some links

• Palette Generator
• Color Picker

grey: grey100 grey200 grey300 grey400 grey500 grey600 grey700 grey800 grey900

primary: primary100 primary200 primary300 primary400 primary500 primary600 primary700 primary800 primary900

accent: accent100 accent200 accent300 accent400 accent500 accent600 accent700 accent800 accent900

danger: danger100 danger200 danger300 danger400 danger500 danger600 danger700 danger800 danger900

warning: warning100 warning200 warning300 warning400 warning500 warning600 warning700 warning800 warning900

success: success100 success200 success300 success400 success500 success600 success700 success800 success900