ColorX turns a single brand color into everything a modern front end needs: an 11-step 50–950 scale, semantic tokens for light and dark mode, and contrast checks on realistic layouts. Copy the result straight into Tailwind CSS or shadcn/ui. Everything runs in your browser.
Choose from Tailwind, Material, Flat UI, CSS named or brand colors, or paste any HEX, RGB, HSL or OKLCH value.
Preview a landing page, dashboard and components in light and dark mode. Contrast ratios update live; step through shades with ← → until every check passes.
Copy a single value, or export the whole theme for shadcn/ui, Tailwind v4, Tailwind v3 or plain CSS variables.
Official palettes (Tailwind, Material, Flat UI) keep their original shades. Other colors are placed on the shade closest to their lightness, and the rest of the scale follows Tailwind’s lightness and chroma curves in OKLCH, clamped to sRGB.
WCAG 2.x contrast ratios: AAA ≥ 7, AA ≥ 4.5, and AA Large ≥ 3 (for text 24px+ or bold 19px+).
No. ColorX runs entirely in your browser. The current color lives in the URL, so you can bookmark or share a theme.