Parametric oklch Theme Demo
The premise of this theme approach is to drive an entire color theme from a few key parameters. The mechanism by which this operates is the CSS OkLCH color's ability to derive from another color.
Guiding principles:
- There should be high contrast between the text and background
- Use hue to denote different types of text
- Switching between a light and dark theme should be easy
A few observations:
- If lightness is very low, you probably need at least 0.25 chroma
- If lightness is high, you can get away with a lot less chroma
- You should use extreme values for the lightness so that there's sufficient contrast
| Primary Hue | |
| Primary Chroma | |
| Primary Lightness |
For this to work, I'm using the following CSS variables
:root {
--color-primary: oklch(0.9 0.20 290 / 1);
--color-accent: oklch(from var(--color-primary) calc(1.0 - l) 0.3 calc(240 + h) / 0.8);
--color-contrast: var(--color-accent);
--color-contrast-inverse: var(--color-primary);
--color-background: oklch(from var(--color-primary) l c h / 0.8);
--color-background-header: var(--color-background);
--color-background-main: var(--color-background);
--color-background-nav: var(--color-background);
--color-background-footer: var(--color-background);
--color-text: var(--color-accent);
--color-text-link: oklch(from var(--color-text) l c calc(120 + h) / 1);
--color-text-link-hover: oklch(from var(--color-text-link) calc(0.8 * l) c h / 1);
}