Addon · Colors

One hue. Sixteen shades.

OKLCH-powered colors with automatic opacity, brightness, and darkness variants. Drag the logo balls to remix the brand hue.

Live HUE

Three numbers — three hues — generate the full system below.

Brand HUE 169° --brand-hue
Accent HUE 10° --accent-hue
Extra HUE 200° --extra-hue

All swatches

5 base colors × 8 variants. Same naming pattern, every time.

Brand
brand
brand_
brand__
brand___
brand-d
brand-b
brand-d_
brand-b_
Accent
accent
accent_
accent__
accent___
accent-d
accent-b
accent-d_
accent-b_
Extra
extra
extra_
extra__
extra___
extra-d
extra-b
extra-d_
extra-b_
Dark / Light
dark
dark_
dark__
dark___
light
light_
light__
light___
Naming convention 
_c-brand     /* color */
_bg-brand    /* background */
_bc-brand    /* border-color */
Opacity modifiers 
brand     /* full */
brand_    /* 65% */
brand__   /* 35% */
brand___  /* 5% */
Brightness modifiers 
brand-d   /* darker */
brand-b   /* brighter */
brand-d_  /* deeper dark */
brand-b_  /* lighter bright */

Dark / Light

One pivot, two variables. The same --dark and --light tokens flip their lightness automatically — components stay mode-agnostic. OKLCH keeps chroma and hue intact; only the L channel swaps.

The pivot

Two CSS variables drive the entire mode swap. Everything else reads from them.

/* Light mode (default) */
--current-lightness: 96.4%;
--current-darkness:   6.4%;

/* Dark mode — when .toggle-theme is on */
--current-lightness:   5%;
--current-darkness:  95%;
How --dark and --light wire in

--dark and --light reference the pivot. Swap the pivot, every consumer flips at once — same OKLCH chroma and hue, swapped lightness.

--dark-lightness:  var(--current-darkness);
--dark-chroma:     0.05;
--dark-hue:        var(--brand-hue);

--light-lightness: var(--current-lightness);
--light-chroma:    0.01;
--light-hue:       var(--brand-hue);

Same markup, same tokens. Only --current-lightness and --current-darkness change between cards.

Light mode (forced)
light
dark
brand
Dark mode (forced)
light
dark
brand
Manual toggle

Add the toggle-theme class on the body. EVA also flips the brightness offsets so the -d modifier still darkens and -b still brightens visually.

<body class="current-theme theme-eva toggle-theme">
Auto (prefers-color-scheme)

Pass $auto-theme-switch: true to the SCSS config. EVA generates a prefers-color-scheme: dark media query that swaps the pivot for you — no JS, no class.

@use 'eva-css-fluid' with (
  $auto-theme-switch: true
);
The rule

Write _c-dark _bg-light and forget about modes. The pivot does the work — your component code stays identical in both states.

Try it — hit the sun icon at the top-right of this page. Every swatch above flips at once.

Full reference

All variants, all formulas — in /llms.txt.

OKLCH foundations, theme switching, contrast formulas. Plus the auto-theme tool to extract palettes from images.

Open /llms.txt → Auto theme →