Drag the balls, release when you've found your mood color

EVA CSS Colors

The next generation of theming with OKLCH color system and automatic variations.

Colors System

Ultra-modern color system based on OKLCH with automatic variations

Main colors: brand, accent, extra, dark, light

Fade variations: _ (65%), __ (35%), ___ (5%)

Brightness variations: -d (darker), -b (brighter), -d_ (darker_), -b_ (brighter_)

Properties: _c- (color), _bg- (background), _bc- (border), _f- (fill), _s- (stroke)

Real-time CSS Variables

The entire EVA theme is based on these CSS variables and HUE values:

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

Magic EVA: These 3 values automatically generate all the variations of colors you see on this page!

Each color (brand, accent, extra) uses custom lightness and chroma values, with only the HUE changing to create variations.

Brand Colors

brand
brand_
brand__
brand___
brand-d
brand-b
brand-d_
brand-b_

Accent Colors

accent
accent_
accent__
accent___
accent-d
accent-b
accent-d_
accent-b_

Extra Colors

extra
extra_
extra__
extra___
extra-d
extra-b
extra-d_
extra-b_

Dark Colors

dark
dark_
dark__
dark___
dark-d
dark-b
dark-d_
dark-b_

Light Colors

light
light_
light__
light___
light-d
light-b
light-d_
light-b_