Color System

Beautify color system built on OKLCH color space. Adjust controls to preview real-time color changes.

Notes

Color system uses OKLCH color space for perceptual uniformity.
--color-c-factor controls saturation; --light-threshold-* controls contrast text brightness.
Each theme color has 13 derived variants (hover, active, contrast, body, surface, fg, bg, bg-hover, bg-active, bd, bd-hover, bd-active).
Typically you only need to modify --color-primary-base, --color-secondary-base and --color-tertiary-base to change the theme style with just three colors.
Adjust color base values and light parameters below to see real-time updates on cards and buttons.

Configuration

Controls

--color-c-light

--color-c-dark

--light-threshold-contrast

--light-min

--light-max

--color-primary-base

--color-secondary-base

--color-tertiary-base

--color-success-base

--color-error-base

--color-info-base

--color-warning-base

--color-caution-base

--color-highlight-base

--color-title-base

--color-ink-base

Buttons rendered with current color variables. Adjust controls above to see real-time changes.

Primary

Secondary

Tertiary

Success

Error

Info

Warning

Caution

Highlight

Title

Ink