CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
Design & SEO
Color Palette Generator
Build harmonious palettes in OKLCH with accessible tint ramps.
What it does. A color palette generator builds a set of related colors from a base hue using harmony rules — complementary, triadic, analogous — and generates tint and shade ramps for each. This tool steps ramps in OKLCH so the lightness intervals look even, and reports WCAG contrast for every step.
Runs in your browserNothing uploadsNo signupWorks offline
How to use Color Palette Generator
- Pick a base color, or generate a random one.
- Choose a harmony rule and the number of steps in each ramp.
- Export as CSS custom properties, a Tailwind config block, or JSON design tokens.
Why palettes generated in HSL look wrong
Because HSL lightness is arithmetic, not perceptual. Hold lightness at 50% and rotate the hue, and you get swatches of wildly different apparent brightness — yellow blazes, blue disappears. The numbers say they match; the eye says they do not.
The consequence shows up in every generated design system: a ramp that steps evenly by the numbers has an obvious jump in the middle and two steps at the light end that are indistinguishable.
OKLCH fixes this. Its L channel tracks perceived lightness, so oklch(70% 0.15 60) and oklch(70% 0.15 250) genuinely read as equally bright, and a ramp stepped by equal L intervals looks equally spaced. This generator computes in OKLCH and outputs both OKLCH and hex, so you get correct spacing with a fallback for older browsers.
Which harmony rule should you use?
| Rule | How it picks | Feels | Good for |
|---|---|---|---|
| Monochromatic | One hue, varied L and C | Calm, cohesive | Minimal interfaces, content sites |
| Analogous | Neighbouring hues, ±30° | Harmonious, low tension | Nature, wellness, editorial |
| Complementary | Opposite hue, +180° | High contrast, energetic | Calls to action, sport, alerts |
| Split complementary | +150° and +210° | Bold but less harsh | General-purpose brand palettes |
| Triadic | Three hues, 120° apart | Vibrant, playful | Consumer apps, education, kids |
| Tetradic | Four hues, two pairs | Rich, hard to balance | Illustration, data visualization |
For an interface, the practical answer is usually a single brand hue plus a neutral ramp plus three semantic colors (success, warning, danger). Harmony rules are more useful for illustration and brand work than for UI, where restraint beats variety.
How many steps does a ramp need?
Eleven is the working standard — 50, 100, 200 … 900, 950 — which is what Tailwind, Material and most design systems settled on independently.
The reason is that a UI needs distinct roles at both ends: 50 and 100 for surfaces and subtle fills, 200 to 400 for borders and disabled states, 500 to 700 for the primary color and its hover state, 800 to 950 for text on light backgrounds and surfaces in dark mode.
Fewer than nine steps and you find yourself without a value for a real need. More than thirteen and adjacent steps stop being distinguishable, so nobody uses them consistently.
Contrast is a constraint, not a check at the end
Every swatch in this generator reports its contrast against white and black, and flags which text color it can carry at WCAG AA.
The useful pattern is a fixed relationship rather than a per-case decision: in an eleven-step ramp, steps 50–400 reliably take dark text and steps 600–950 reliably take white, with 500 the awkward one that depends on hue. Fixing that rule at design time means a component can pick its text color from its background step without a runtime calculation.
AA — 4.5:1 for body text, 3:1 for large text and UI components — is the level referenced by the ADA in the US, the Equality Act in the UK, and EN 301 549 across the EU. It is a legal floor in practice, not a nice-to-have.
Frequently asked questions
What is OKLCH and why use it?
A perceptually uniform color space where equal numeric changes produce equal visual changes. It landed in all major browsers during 2023–24 and is the right default for generating palettes, because HSL ramps look uneven.
Can I export to Tailwind?
Yes. The export produces a theme.extend.colors block with the full 50–950 ramp, ready to paste into your config.
How many colors does a brand need?
One primary, one accent, a neutral ramp and three semantic colors covers almost everything. Beyond about seven distinct hues a palette stops being memorable and gets applied inconsistently.
Do these colors work in dark mode?
The ramps are generated to be reversible — what serves as a light surface at step 50 works as dark text at 950. Define the palette as custom properties and swap the step assignments under a media query.
Will the colors print correctly?
No. Vivid screen colors sit outside the CMYK gamut and will print duller. Get CMYK values from your printer or convert through an ICC profile for print work.
Is there a fallback for older browsers?
Yes. The CSS export declares a hex value first and the OKLCH second, so browsers that do not understand OKLCH take the hex.
Is anything sent to a server?
No. All color math runs in this page.
Guides for Color Palette Generator
- HEX vs RGB vs HSL: Which to Use When7 min read
- WCAG Contrast Requirements, Explained Properly8 min read
- CSS Gradients, Shadows and Palettes7 min read