From one color to a working palette
Pick a base color — your brand color, a color you sampled from a photo, or a random starting point — choose a palette type, and the generator produces a full set of named shades with values in HEX, RGB, HSL, or OKLCH. Every shade can be copied individually, and whole palettes export as CSS custom properties, SCSS variables, or a Tailwind config block ready to paste into a project.
The default “Shades” mode builds the scale most design systems are organised around: eleven steps from near-white to near-black, named 50 through 950 exactly like Tailwind’s built-in palettes, with your base color anchoring the middle of the ramp.
Building a Tailwind color scale
Tailwind ships beautiful palettes, but the moment a project has a brand color you need a custom scale that behaves like the built-ins — a brand-500 with usable 50/100 tints for backgrounds and 800/900 shades for text and hover states. That is what the shade generator produces: enter the brand color, generate, and copy the Tailwind export into theme.extend.colors in your config. Utility classes like bg-brand-100 or text-brand-800 work immediately.
The conventional roles in a 50–950 scale: 50–100 for tinted backgrounds and hover washes, 200–300 for borders and dividers, 400–600 for the interactive core (buttons, links, focus rings — your base usually lands at 500), and 700–950 for text on light backgrounds and dark-mode surfaces. Keeping those roles consistent across every color in the system is what makes a UI feel coherent.
Color harmony modes, explained
Beyond shade ramps, the generator builds palettes from classical color-wheel relationships. Complementary picks the hue directly opposite yours — maximum contrast, good for a single bold accent against a dominant brand color. Split-complementary takes the two neighbours of the complement instead, keeping the contrast while softening the tension, which makes it one of the safest schemes for beginners.
Analogous palettes use adjacent hues for a harmonious, low-contrast feel common in editorial and nature-themed design. Triadic spaces three hues evenly around the wheel for balanced variety; tetradic yields two complementary pairs, which is rich but demands discipline — let one hue dominate and use the rest sparingly. Monochromatic stays on a single hue and varies saturation and lightness, effectively a looser cousin of the shade ramp.
Sequential and diverging palettes for data visualisation
Charts need different palettes than interfaces. A sequential palette varies lightness along a single hue so that “darker means more” reads instantly in heatmaps, choropleth maps, and density plots. A diverging palette runs two sequential ramps into a neutral midpoint — the right choice when the data has a meaningful centre, like profit versus loss, or deviation above and below a target.
Generating these from your product’s brand hue keeps dashboards on-brand without hand-tuning every stop.
Contrast and WCAG accessibility ratings
Every generated shade displays its contrast ratio and a WCAG rating, so you can see at a glance which steps of the scale are safe for text. The thresholds that matter: 4.5:1 for normal body text (AA), 3:1 for large text and UI components, and 7:1 for the stricter AAA level. In a typical 50–950 scale, shades 600 and darker pass AA on white, and 50–300 work as backgrounds under dark text — but it varies by hue, which is exactly why the ratings are computed per shade rather than assumed.
Checking contrast at palette-selection time is much cheaper than retrofitting it after components ship — a palette whose “text shade” fails AA forces either a redesign or an accessibility defect.
Export formats: CSS variables, SCSS, Tailwind, and OKLCH
Palettes export as CSS custom properties (--color-500: …) for framework-free projects and design tokens, SCSS variables for Sass codebases, and a Tailwind config fragment for utility-first projects. Values can be emitted in HEX, RGB(A), HSL(A), or OKLCH.
OKLCH deserves a note: it is a perceptually uniform color space now supported in every modern browser, meaning equal numeric steps look like equal visual steps — a lightness ramp in OKLCH stays even where an HSL ramp visibly lurches — and it can express wide-gamut colors beyond sRGB. New design systems increasingly define tokens in OKLCH; the generator will hand you those values directly.
Palettes can also be saved locally in your browser and shared by URL — the full palette state is encoded in the link, so a teammate opens exactly what you built.