🎨 Colors

Color System

Build your palette, generate shades, check contrast ratios and export everything as CSS variables.

Palette Builder

Add, name and manage your brand colors. Click a swatch to copy the hex value.

Pick a base color and get a full 50–900 scale instantly.

Base color

Color name

Verify WCAG AA and AAA compliance for text on background.

Text color

Background color

Ratio

—

WCAG AA

—

WCAG AAA

—

Preview

Large text sample

Small body text — the quick brown fox jumps over the lazy dog. Checking readability at normal size.

Badge example

Start from a curated preset and customise from there.