Color System
Turn a brand color into a usable scale, compare foreground and background contrast, and export a clean set of CSS tokens.
COLOR SYSTEM / TOKENS + CONTRAST17.84:1 CONTRAST
50#f8f7ff
100#ebe7ff
200#d7ceff
300#bcaeff
400#a18dff
500#785cff
600#624bd1
700#4d3ba3
800#372a75
900#241c4d
LIVE SURFACE
Color should explain hierarchy.
Foreground against background measures 17.84:1 — AAA for normal text.
CSS OUTPUT370 CHARS
:root {
--color-brand-50: #f8f7ff;
--color-brand-100: #ebe7ff;
--color-brand-200: #d7ceff;
--color-brand-300: #bcaeff;
--color-brand-400: #a18dff;
--color-brand-500: #785cff;
--color-brand-600: #624bd1;
--color-brand-700: #4d3ba3;
--color-brand-800: #372a75;
--color-brand-900: #241c4d;
--color-background: #080a0e;
--color-foreground: #f2f3f5;
}COLOR / TOKENS10-step scale
Generate a consistent tint and shade range around the selected brand color.
CONTRAST / WCAGMeasured ratio
Relative luminance produces the contrast ratio and common AA or AAA text guidance.
LOCAL / EXPORTReusable CSS
Inputs stay in the browser and the complete token set can be copied or downloaded.