Free Color Palette Generator with Tailwind & A11y
Build harmonious palettes from any base color using complementary, analogous, triadic, split-complementary and tetradic rules. Get a perceptually-uniform 50-to-950 shade ramp for every color (Tailwind-style), a full WCAG contrast matrix for every pair, and one-click export as CSS variables, SCSS, tailwind.config.js, JSON tokens or Figma styles. Free, no login.
Color Palette Generator Tool
Why this palette generator beats Coolors and Paletton on the things that matter
Coolors and Paletton are the household names in palette generation, and they're great at the basics — pick five colors, hit space-bar to re-roll, lock the ones you like. The LazyTools generator does all of that, plus three things competitors either paywall or don't offer at all: perceptually-uniform Tailwind shade ramps for every color, a full WCAG contrast matrix for every pair, and a one-click tailwind.config.js export. Every option below is free with no signup.
How to generate a color palette
LazyTools vs Coolors, Paletton, Adobe Color & mycolor.space
We benchmarked the LazyTools palette generator against the four most popular free palette generators online — coolors.co, paletton.com, color.adobe.com and mycolor.space. Here's the feature breakdown.
| Feature | LazyTools | Coolors | Paletton | Adobe Color | mycolor.space |
|---|---|---|---|---|---|
| 5 harmony rules | ✓ | ✓ | ✓ | ✓ | basic |
| Lock + re-roll workflow | ✓ | ✓ | — | — | — |
| Tailwind 50-950 shade ramps | ✓ | paid | — | — | — |
| Perceptual (OKLab) ramp mixing | ✓ | — | — | — | — |
| Full WCAG contrast matrix (every pair) | ✓ | paid | — | single pair | — |
| tailwind.config.js export | ✓ | paid | — | — | — |
| CSS variables export | ✓ | ✓ | — | — | — |
| JSON design tokens | ✓ | paid | — | — | — |
| Share palette by URL | ✓ | ✓ | ✓ | login | — |
| Auto-save to browser | ✓ | login | — | login | — |
| No login required | ✓ | ✓ | ✓ | — | ✓ |
| No premium / paid tier | ✓ | — | ✓ | — | ✓ |
Where LazyTools wins: the only free palette generator with perceptually-uniform OKLab shade ramps for every color, the only one with a full pairwise WCAG contrast matrix on the free tier, and the only one with native tailwind.config.js export without a paywall. Where competitors win: Coolors has the largest community palette library and the smoothest mobile keyboard shortcuts, Paletton has the most elaborate color-wheel UI for hue rotation, and Adobe Color is unmatched for extracting palettes from photographs (we don't yet support image upload). For developers building a Tailwind-based design system from scratch, LazyTools is the fastest path from base color to production-ready code.
The 5 color harmonies — when to use which
Each harmony rule produces a different "feel" because each one rotates the base hue by different angles. Here's a one-line summary of when to reach for each.
| Harmony | Hue rotation | Feel | Best for |
|---|---|---|---|
| Complementary | +180° | High contrast, dramatic | CTA buttons, sports brands, alert states |
| Analogous | ±15° to ±60° | Calm, gradient-like, harmonious | Nature themes, hero gradients, photo overlays |
| Triadic | +120°, +240° | Balanced and vibrant | Playful brands, illustrations, kids' products |
| Split-complementary | +150°, +210° | Almost as much contrast as complementary, easier on the eye | Most general-purpose UI design |
| Tetradic (square) | +90°, +180°, +270° | Maximum variety, hardest to balance | Editorial design, multi-section dashboards, festivals |
From Base Color to Production-Ready Design System
The hardest part of starting a design system is the same problem every time: you have one color you love (a brand color, a hero illustration accent, the dominant tone in a logo) and you need to turn it into a complete palette that supports every UI state your product will ever have. Body text. Subdued labels. Hover states. Disabled states. Error states. Success states. Backgrounds at five different elevations. The answer is not "pick a few colors that look nice next to it" — that's how you end up with a design system that looks great in mockups and falls apart the moment a real engineer tries to use it. The answer is a structured palette built from harmony rules, paired with perceptually-uniform shade ramps and verified contrast across every combination. This guide walks through the process and explains why each step matters.
Step 1 — Pick the right base color
Almost everything in this guide depends on the base color, so it's worth pausing to make sure you've picked a good one. Three properties matter. First, the base color should be in the middle of its lightness range — not too pale, not too dark — so that you have headroom to generate both lighter tints (for backgrounds) and darker shades (for text on light backgrounds) without running out of contrast at either end. A good rule of thumb: if your base color converts to HSL with a lightness between about 45% and 65%, you're in the safe zone. Second, the base color should be moderately saturated. Fully-saturated colors (100% S) tend to look harsh on screens and produce shade ramps that go muddy in the middle weights. A saturation between 55% and 90% gives you vibrant but workable colors. Third, the base color should be distinctive but not novel — recognisable enough to anchor a brand, but not so obscure that the supporting harmonies look strange. The LazyTools generator's "Random" mode follows exactly these constraints.
Step 2 — Choose a harmony that matches your goal
The five harmony rules each correspond to a different design situation, and choosing the right one matters more than people think. Complementary (base + 180°) produces maximum contrast and is the right choice when you have one dominant brand color and need a single accent for call-to-action buttons or alerts. The downside is that two complementary colors competing for attention often feel jarring — use them when one is clearly dominant in size, not when they're balanced. Analogous (base ± 30° on either side) produces a calm, gradient-like palette that feels harmonious because the colors share neighbouring wavelengths. Analogous palettes are the right choice for hero gradients, nature-themed brands, photo backgrounds and any design where you want all the colors to "belong together" rather than clash. Triadic (three colors 120° apart) is a balanced compromise — vibrant and varied, but still mathematically harmonious because the three colors are equidistant. Triadic palettes work well for playful brands, illustrations, children's products and anywhere you need three equally-weighted colors.
Split-complementary (base + the two colors 150° and 210° from base) is the secret weapon of professional designers. It gives you almost as much contrast as a true complementary palette but the contrast is split across two colors instead of one, which is much easier on the eye. Most general-purpose UI design — dashboards, marketing sites, productivity tools — is better served by split-complementary than by either pure complementary or triadic. Tetradic (four colors forming a rectangle on the wheel: base, +90°, +180°, +270°) gives you the most variety but is the hardest to balance because you have four competing hues. Tetradic palettes work for editorial design, multi-section dashboards where each section needs its own color, festival branding and anywhere you need maximum variety — but they require more design taste to use well than the other harmonies.
Step 3 — Generate shade ramps the perceptually-correct way
Once you have your harmony, every color in the palette needs a complete shade ramp to be useful in real UI work. A shade ramp is a series of progressively lighter and darker versions of the same base, conventionally numbered from 50 (lightest) to 950 (darkest) following the convention Tailwind CSS popularised. The "500" weight is usually the original color, "50" through "400" are progressively lighter tints (toward white), and "600" through "950" are progressively darker shades (toward black).
Here's the part most palette generators get wrong: the way you mix toward white and black matters enormously. The naive approach is to lerp the HSL lightness — change L from the original to 100% for tints and to 0% for shades — but HSL lightness is not perceptually uniform. A linear progression in HSL lightness produces a shade ramp where the dark end goes muddy and the light end goes washed out unevenly across hues, with abrupt jumps in the middle. The Tailwind CSS team manually hand-tuned their default palette to avoid this exact problem, which is why the official Tailwind colors feel smoother than any auto-generated palette you'll see from typical free generators.
The LazyTools generator solves this by mixing in OKLab space, the perceptually-uniform color space designed by Björn Ottosson in 2020. OKLab's lightness axis (L) is genuinely perceptual — equal numerical changes in L correspond to equal perceived changes in brightness, regardless of hue. So when the generator mixes your base color toward white in OKLab space and converts back to RGB, the resulting tint progression looks smooth and even across every hue. The same applies to dark shades. The result is a shade ramp that feels much closer to Tailwind's hand-tuned defaults than a naive HSL lerp ever could.
Step 4 — Verify contrast across every pair
Now comes the part most palette generators skip entirely: actually checking that the colors in your palette can be used together. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text against its background — 4.5:1 for normal body text at AA, 3:1 for large text or UI components, 7:1 for AAA normal text. These ratios are computed using a specific formula based on relative luminance. The math is straightforward, and most palette generators show you the contrast of each color against pure white and pure black. But that's not enough.
In a real product, your palette colors don't just sit on white or black backgrounds — they sit on each other. Your accent color sits on your background color. Your secondary color sits on your accent color. Your text color sits on your tertiary color. Every pair of palette colors is a potential foreground/background combination, and you need to know the contrast for every pair, not just for each color individually. With a five-color palette there are 5 × 5 = 25 pairs (counting both directions and self-pairs), or 10 unique unordered pairs, and the only sensible way to display them is a contrast matrix — a grid where row R and column C show the contrast ratio between color R and color C. The diagonal is always 1:1 (a color has no contrast with itself), and the matrix is symmetric (R-on-C and C-on-R produce the same ratio). The LazyTools generator shows the full matrix with green cells for AA pass, yellow for large-text-only, and red for fail. This is the unique feature competitors don't have on their free tiers, and it's the difference between a palette that looks good in mockups and a palette that survives an accessibility audit.
Step 5 — Export to your framework
Now you have a palette with five harmonious colors, each with a full 50-to-950 ramp, with verified contrast across every pair. The last step is getting it into your codebase, and this is where free generators have historically forced you to do tedious copy-paste work — copy each hex, paste it into your config, name it manually, repeat 55 times for a five-color palette with 11 shades each. The LazyTools generator instead exports five formats with a single click.
The most useful for modern web work is the tailwind.config.js snippet, which produces a ready-to-paste theme.extend.colors block with each palette color automatically named (brand, accent-1, accent-2 by default — you can rename them) and its full ramp expanded. Drop the snippet into your Tailwind config and you can immediately use classes like bg-brand-500, text-accent-1-700, ring-accent-2-300 throughout your project. For non-Tailwind projects, the CSS variables export gives you a :root block with every shade as a custom property (--brand-50 through --brand-950 for each color), the SCSS export gives you the same thing as Sass variables, the JSON tokens export follows the W3C Design Tokens Community Group spec for use with style dictionary and design system tooling, and the Figma list gives you a flat list of named colors ready to paste into Figma's color styles panel.
Why the workflow matters more than the tool
The five-step workflow above — pick base, choose harmony, generate ramps, verify contrast, export to framework — is the same regardless of which palette generator you use. The thing that varies between tools is how much manual work each step requires. With most free generators, "generate ramps" means manually adjusting lightness in five separate places, "verify contrast" means copying colors into a separate accessibility checker tool, and "export to framework" means typing out class names by hand. The LazyTools generator collapses all five steps into a single page with no copy-paste between tools, which means you can iterate on a palette in seconds instead of minutes. The compounding effect over a real project — where you might tweak the palette twenty times before settling on a final version — is the difference between palette generation taking a morning or taking five minutes.
From a single color to a full palette — the Color Lab loop
If your starting point is a single color you want to inspect in depth before turning it into a palette, use the LazyTools Color Lab first. The Color Lab converts any color across HEX, RGB, HSL, HSV, CMYK, CIE LAB and OKLCH formats, looks up its CSS color name, finds the nearest Tailwind palette color, checks its WCAG contrast against white and black, and copies it in 12+ developer formats. Once you've decided on a base color, the Color Lab's "Build a palette" button takes you straight to this generator with the color pre-loaded — the two tools share the same color math so the handoff is seamless.