Two interactive tools

Playground

Pull a theme from any image. Calculate any scale live. Both tools are standalone — open them in their own page.

Auto Theme

Upload an image, EVA extracts the dominant OKLCH colors and assigns them to brand, accent, extra. Copy the generated theme straight into your config.

· Drag-and-drop image upload
· Live OKLCH extraction
· Click to assign each color
· Copy-paste-ready theme block

Open Auto Theme →

JS Calculator

Define your $sizes and $font-sizes, see every generated variable and utility class instantly. No build step, just paste the result into your SCSS.

· Live config editor
· All generated --* variables
· All generated utility classes
· Live demo applied to elements

Open JS Calculator →

The full reference

Theme formats and colour maths, documented.

How theme JSON is read, how the OKLCH colour system recomposes every variant, and the formulas behind the fluid scale.

Read the documentation →