Click or drag on the wheel to pick a hue. Adjust lightness with the slider. All schemes, roles, and exports derive from this base color.
Generate a harmonic color scheme from your base color. Pick a scheme type or choose an evenly-spaced count.
Assign each color to a design role. These map directly into the style guide preview and exports.
Browse Google Fonts and system fonts. Click any card to assign it as heading or body font.
Live preview of your theme applied to real UI elements. Update colors or fonts above and watch this refresh.
Drop any image to auto-extract its dominant colors (5, 7, or 9 swatches). Click a swatch to make it your base color.
Tests each color pair in your scheme against WCAG 2.1 AA/AAA guidelines. Green badges pass, red fail.
Themes are saved to this browser's local storage. Click to load one, or use the buttons to export/import a JSON file.
Package the current theme (colors, roles, fonts, samples) as a portable style guide in your choice of format.
Self-contained HTML document with embedded CSS. Opens in any browser.
Printable style guide PDF with color swatches, font samples, and CSS tokens.
Word-compatible document you can edit, share, or drop into a brand book.
CSS custom properties (--var) you can paste into any project.
tailwind.config.js snippet extending theme colors & fonts.
Raw design tokens in JSON format โ portable across tools.