CSS Color Palette Generator
'/%3E%3Crect width='400' height='240' fill='url(%23r2)'/%3E%3Crect width='400' height='240' fill='url(%23r3)'/%3E%3C/svg%3E)
About this generator
Four workflows in one tool — extract a palette from any image, generate a color-theory harmony from a single hex, build a Tailwind 50–950 perceptually-uniform scale, or audit any palette with pair-contrast + colorblind simulation + live UI mockup. 100% client-side, no upload, no signup, MIT-licensed.
5 export formats — CSS custom properties, Tailwind config block, W3C design tokens (Figma / Style Dictionary / Tokens Studio compatible), SCSS variables, JS array. Custom palette name prefix.
Tailwind Color Scale Generator (50 → 950)
Switch to the Tailwind scale workflow, paste any hex (your brand colour, logo accent, or just a hue you like), and the generator emits the standard 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950 shade scale — the same 11-step shape that Tailwind’s own gray scale, shadcn/ui, Radix Colors, and Material 3 all use.
Why OKLCH-based scales outperform HSL
Most Tailwind palette generators interpolate in HSL — which is fast but perceptually broken. HSL lightness 30% red is visually MUCH darker than HSL lightness 30% yellow, so naive HSL scales jump in apparent brightness from step to step. OKLCH (the modern perceptually-uniform colour space) fixes this: equal numeric changes in OKLCH Lightness look like equal visual changes to the human eye. Your 50/100/200…950 scale actually feels like a smooth gradient instead of jumping. This tool computes the scale in OKLCH and outputs as hex so the resulting palette works in 100% of browsers — even ones too old for native oklch() CSS support.
How to copy this into tailwind.config.js or @theme
For Tailwind v3, the generator’s Tailwind export wraps your scale as a theme.extend.colors block ready to drop into tailwind.config.js. For Tailwind v4, paste the same shape inside the new @theme block in your CSS. Reference the scale as bg-brand-500, text-brand-700, etc. Same shape works as a drop-in for shadcn/ui’s –primary token, Radix Colors’ step naming, or Material 3 tonal palette imports.
OKLCH Color Palette Generator (Perceptually Uniform Scales)
Every palette in this tool is internally represented in OKLCH (L = lightness, C = chroma, H = hue) — the modern perceptually-uniform colour space designed by Björn Ottosson in 2020 and now shipping natively in Chrome 111+, Safari 15.4+, Firefox 113+. Toggle the swatch label format to OKLCH on any workflow to see your palette in oklch(L% C H) notation — paste it directly into modern CSS, or fall back to the hex export for browsers without native OKLCH support.
OKLCH’s three real wins over HSL: (1) equal lightness steps look equal to the human eye; (2) chroma is decoupled from hue, so you can desaturate a colour without it shifting hue; (3) hue rotation is colour-perception-aware, so complementary / triadic / analogous palettes generated by hue offset actually look balanced. The tool’s color-theory workflow uses HSL for compatibility with how designers think about the colour wheel; the Tailwind scale workflow uses OKLCH for the perceptual uniformity advantage.
Colorblind-Safe Palette Checker (Protanopia, Deuteranopia, Tritanopia)
Roughly 8% of men and 0.5% of women have some form of colour blindness. The most common types are Deuteranopia (green-blind, ~6% of men), Protanopia (red-blind, ~1% of men), and Tritanopia (blue-yellow, rare in both sexes). Switch to the Check workflow and toggle the colorblind simulation to see exactly how your palette appears to someone with that form of vision.
The simulation uses the Brettel matrix transform — the same algorithm used by Sim Daltonism, the W3C accessibility tooling, and Apple’s Accessibility Inspector. If two palette colours that carry different meanings in your UI (e.g., red error vs green success) render as identical grays under Deuteranopia, you have an accessibility bug. The pair-contrast matrix on the same workflow shows the WCAG contrast ratio for every palette colour against every other (not just against pure white and black like most contrast checkers), so you can find which colour pairs work as text-on-background combinations in seconds.
No competitor in the top 10 Google results for “color palette generator” ships colorblind simulation built-in. Coolors offers a Pro contrast checker; Colorffy has theme accessibility but not colorblind sim; Tints.dev focuses on Tailwind scales without accessibility tooling; UIColors.app has a Chrome extension but not in-page sim. The colorblind sim here is what makes this an accessibility-first palette tool, not just a colour picker.
Color Palette From Image (K-means Extraction, 100% Local)
Drop any image — a photo, a screenshot, a logo, a moodboard — and the generator extracts a 3–12 colour palette via k-means clustering, the same algorithm used by Sketch, Figma, and Apple’s Color Palette tool. The entire extraction runs in your browser via the HTML5 canvas API. Your image is read with FileReader, drawn to an offscreen canvas, sampled for pixel data, and clustered locally. Nothing is sent to any server. No analytics on the image, no third-party calls, no upload progress bar because there’s no upload.
This is materially different from most online palette tools (including Coolors, Colorffy, and several Tailwind palette generators) which upload your image to extract colours server-side. For brand assets, unreleased designs, or proprietary screenshots, that matters — your image source never leaves your machine.
The output sorts swatches by frequency (most-common colour first), shows WCAG contrast against white and black per swatch, and can be combined with the Tailwind Scale workflow: use any extracted colour as the base for a full 50–950 brand scale.
Complementary, Triadic, Analogous & More — Color Harmony Generator
Pick a base hex and choose a harmony scheme — the generator computes the standard colour-theory relationships using HSL hue rotation, the same math Adobe Color, Paletton, and Material Theme Builder use internally.
- Complementary — base + opposite hue (180°). High-contrast accent + base pairing, ideal for CTA buttons or warning states.
- Triadic — three hues evenly spaced 120° apart. Vibrant brand palettes — most “fun” brand identities (Slack, Spotify in early days) use a triadic foundation.
- Analogous — three adjacent hues (±30°). Calm, harmonious palettes for gradients, dashboards, editorial sites.
- Split-Complementary — base + the two hues adjacent to its complement. High-impact but less aggressive than pure complementary.
- Tetradic / Square — four hues 90° apart. Maximally diverse palette for component libraries or category-tagging systems.
- Monochromatic — five lightness shades of the same hue. Subtle, elegant — works for dashboards or minimal brand systems.
For each scheme the generator shows WCAG contrast scores against white and black on every swatch, so you can pick text colours from the harmony palette without a separate accessibility tool.
Compared to Coolors, Colorffy, Tints.dev, mycolor.space, UIColors & Shadecolr
The colour palette tooling space has good options for individual workflows — Coolors for random palette discovery, Tints.dev for Tailwind scales, Colorffy for harmonies — but no single tool combines all four workflows with accessibility-first checks. Here’s the honest matrix:
| Feature | Coolors | Colorffy | Tints.dev | mycolor.space | UIColors | CodeFronts |
|---|---|---|---|---|---|---|
| Image extraction (client-side) | server | — | — | — | — | ✅ 100% local |
| Tailwind 50–950 scale | — | — | ✅ | — | ✅ | ✅ OKLCH |
| Color theory harmonies | ✅ | ✅ | — | ✅ | — | ✅ |
| Colorblind simulation | — | — | — | — | — | ✅ Brettel |
| Pair-contrast matrix | vs B&W | vs B&W | — | — | page-level | ✅ full grid |
| W3C design tokens export | — | ✅ | — | — | — | ✅ |
| FAQ schema (JSON-LD) | — | — | — | — | — | ✅ |
| Per-shade fine-tuning | ✅ | ✅ | ✅ | — | ✅ | ✅ OKLCH sliders |
| Free, no signup | freemium | ✅ | ✅ | ✅ | ✅ | ✅ |
Where the others lead: Coolors has the largest community palette library (10M+ palettes for inspiration); Tints.dev offers a programmatic API endpoint; Colorffy ships native code export for Swift / Flutter / Android. Where this tool leads: accessibility tooling (colorblind sim + pair matrix) and privacy (image never leaves your browser).
Why use this Color Palette Extractor?
How to extract a color palette from an image
How extraction works
| Stage | Detail | Why |
|---|---|---|
| k-means clustering | 8 iterations | Standard unsupervised algorithm. Pixels are grouped by RGB distance; centroids re-average until stable. |
| pixel sampling | ~10,000 max | Images are downscaled and sub-sampled to keep extraction under 200ms even on phones. |
| transparency | alpha < 128 skipped | Transparent pixels are excluded so PNGs with transparency don't pollute the palette with background bleed. |
| WCAG contrast | against #fff & #000 | Each swatch shows AA target (4.5:1) feasibility for text use. Above 4.5 = safe text color. |
| sort order | by population | Most-common colors appear first. The first swatch is your dominant tone — usually the right primary. |
Output patterns by stack
:root {
--color-brand-1: #fbbf24;
--color-brand-2: #f97316;
--color-brand-3: #db2777;
}
.button {
background: var(--color-brand-1);
color: var(--color-brand-3);
}colors: {
brand: {
100: '#fbbf24',
200: '#f97316',
300: '#db2777',
/* ... */
}
}
/* In your component: */
<div className="bg-brand-100 text-brand-300">…</div>{
"color": {
"brand-1": { "value": "#fbbf24", "type": "color" },
"brand-2": { "value": "#f97316", "type": "color" }
}
}
/* Compatible with Style Dictionary, Theo, Tokens Studio */Pro tips
Frequently asked questions
Is my image uploaded to a server?
No. The entire palette extraction runs in your browser using the HTML5 canvas API and JavaScript. Your image is read with FileReader, drawn to an offscreen canvas, sampled for pixel data, and clustered with k-means — all locally. Nothing is sent to any server. No analytics on the image. No third-party calls. Refresh the page and the image is gone from memory. This is materially different from most online palette tools which upload your image to extract colors server-side.
How is this different from Coolors, Adobe Color, or Paletton?
Most palette tools do ONE thing — Coolors generates random palettes you cycle through, Adobe Color does color-theory wheels, Paletton does harmony combinations, and most image-palette tools upload your image. This tool combines all four workflows in one page (image extraction, color-theory harmonies, Tailwind-style 50→950 scale, and palette audit) with zero uploads. The image extraction stays 100% in your browser via the canvas API; the color-theory and scale workflows are pure math; the audit tab adds a pair-contrast matrix + colorblind simulation + a live UI mockup so you see your palette in real interface context. Free, MIT-licensed, no signup.
How do I generate a Tailwind color scale (50, 100, 200, ..., 900, 950) from a single hex?
Switch to the Tailwind scale workflow, paste your brand hex (or pick from the color input), and the generator emits the 11-step scale 50 / 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900 / 950. The interpolation runs in OKLCH color space (not HSL) so each step LOOKS like a uniform lightness change to your eye — not a vivid neon at 100 then a muddy gray at 400 like naive HSL interpolation produces. The Tailwind export wraps the output as a theme.extend.colors block ready to drop into tailwind.config.js (v3) or @theme block (v4). This is the same approach Tailwind's own gray scale uses internally and what shadcn, Radix Colors, and Material 3 ship.
What's OKLCH and why use it for palettes?
OKLCH is a modern perceptually-uniform color space — Lightness (0–1), Chroma (saturation, 0–~0.4 typically), Hue (0–360°). The 'perceptually uniform' part means equal numeric changes in L look like equal visual lightness changes to a human observer, which HSL fails at (HSL lightness 30% red is dramatically darker than lightness 30% yellow). For palette scales, OKLCH means your 50/100/200…950 actually feels like a smooth gradient instead of jumping. OKLCH ships natively as a CSS function in Chrome 111+, Safari 15.4+, and Firefox 113+. We compute scales in OKLCH internally but output as hex so the resulting palette works in 100% of browsers — including IE11 if anyone still has it.
How do I generate a complementary / triadic / analogous palette from a single color?
Switch to the Color Theory workflow, pick a base hex, and choose a scheme: Complementary (2 colors, base + opposite), Triadic (3 colors, evenly spaced around the wheel), Analogous (3 colors, adjacent hues), Split-Complementary (3 colors, base + two adjacent to its complement), Tetradic / Square (4 colors, evenly spaced), or Monochromatic (5 shades of the same hue). The math runs in HSL so the relationships read naturally on a color wheel. Triadic for vibrant brand palettes, analogous for calm gradients, complementary for high-contrast accent + base, monochromatic for subtle dashboards.
How do I check if my palette is colorblind-safe?
Switch to the Check workflow and toggle the colorblind simulation: Normal / Protanopia (red-blind, ~1% of men) / Deuteranopia (green-blind, ~6% of men) / Tritanopia (blue-yellow, rare, both sexes equally). The simulation runs the Brettel matrix transform on every swatch, so you see exactly how your palette appears to someone with that form of color vision. The pair-contrast matrix on the same tab shows the WCAG contrast ratio for every palette color against every other — if two colors carry the same meaning in your UI (e.g. red error + green success) but render as identical grays under deuteranopia, you have an accessibility bug that contrast checkers alone wouldn't catch. Roughly 8% of men and 0.5% of women have some form of color blindness.
What's k-means clustering and why use it for image palettes?
K-means is a classic clustering algorithm: given N data points (your image's pixels) and a target K (how many colors you want), it iteratively groups pixels into K clusters around evolving centroids, minimizing the distance from each pixel to its centroid. The final K centroid colors are the dominant colors of the image. It's the convergent algorithm for palette extraction — used by Sketch, Figma, Apple Color Palette tool, and most production design systems. The generator's implementation runs 8 iterations of k-means with a poor-man's k-means++ initialization (luminance-spaced seeds) for stable results without iteration ballooning.
Why does my extracted palette miss the obvious accent color?
K-means clusters by COLOR DISTANCE, weighted by pixel count. If your accent color appears in a small region (a brand logo on a large photo, a small CTA button on a screenshot), the algorithm gives it low priority because it's rare. Two fixes: (1) increase the cluster count (try 8–12 instead of 5–6) — more clusters means smaller groups get their own centroid; (2) crop your image to the region containing the accent before extracting. The generator's swatches are sorted by frequency, so the accent will be at the end of the palette.
How do I extract colors from a logo specifically?
Logos are the perfect input for the image workflow because their color space is small and intentional — usually 2–5 colors. Upload the logo (PNG with transparent background works best — alpha < 50% pixels are skipped, so your logo's colors won't get diluted by the transparent area). Set the cluster count to 4–6 (logos rarely need more) and the generator returns the dominant brand colors plus their WCAG contrast scores against white and black. Then switch to the Tailwind scale workflow with one of the extracted colors as the base to generate a full 50→950 brand scale.
What's the pair-contrast matrix on the Check tab for?
It's a grid that shows the WCAG contrast ratio for every palette color against every other palette color — not just against white and black like most contrast checkers. The diagonal is empty (a color has infinite contrast with itself). Each cell is color-coded: green = AAA (≥7), purple = AA (≥4.5), amber = AA Large (≥3), red = fail. Use it to find which color pairs work as text-on-background. If you're painting your dashboard's text color in palette[3] over palette[0] as the background, you can read the exact ratio from the cell instantly instead of running each combination through a separate tool.
Can I share my palette with a teammate via URL?
Yes — the generator encodes its state into the URL hash (#w=workflow&n=name&h=hex&s=scheme&k=count). Copy the URL from the address bar and paste into Slack / email; the recipient lands on the same palette. The hash updates as you change controls so you never have to click 'share' — the URL is always live. Bookmark it to save a palette permanently; no server, no account, no Save button needed.
How does the Tailwind export integrate with tailwind.config.js?
The Tailwind export emits a theme.extend.colors block with your palette colors under your chosen name. Drop it into tailwind.config.js (Tailwind v3) or the @theme block (Tailwind v4) and reference as bg-brand-500, text-brand-700, etc. For the Tailwind scale workflow the numeric labels are the standard 50/100/200…950 scale; for image and theory workflows the labels are 1/2/3… by population order. shadcn/ui, Radix Colors, and Material 3 all consume the same shape — paste, save, ship.
Why use design tokens format?
Design tokens (the W3C spec) is a JSON format that design tools (Figma, Sketch, Style Dictionary, Tokens Studio) can import directly. Use this when your palette is going into a design system shared between designers and developers — both sides reference the same source of truth. The format is also what Figma's Variables feature consumes for token-based design. The generator's token export uses the canonical { color: { name: { value, type } } } structure compatible with all major tooling.
Can I fine-tune individual shades in the Tailwind scale after generating?
Yes — click the ✎ icon on any swatch in the Tailwind Scale workflow to open the per-shade editor. The editor shows three OKLCH sliders: Lightness (0–100%), Chroma (0–0.4), and Hue (0–360°). Tweak any axis and just that single shade updates — the other 10 shades stay anchored to the base hex. A small dot on the swatch marks it as overridden. Use the 'Reset shade' button to revert one shade, or 'Reset all shades' to clear every override at once. Tweaked shades survive URL sharing: the o= hash parameter encodes them so a teammate opening your link sees your customised scale, not the default. This is the feature Coolors, Tints.dev, UIColors.app, and Shadecolr all have, and the most common request when designers move from auto-generated scales to production scales — the algorithmic scale is a 90% solution; the per-shade tweak is the last 10%.
Is this similar to Coolors, Colorffy, Tints.dev, mycolor.space, or UIColors?
Yes and no. The OVERLAP: like Coolors and Colorffy, this tool generates harmony palettes (complementary, triadic, analogous, etc.); like Tints.dev and UIColors.app, it generates the Tailwind 50–950 scale from a single hex via perceptually-uniform interpolation; like Coolors and mycolor.space, it extracts colors from images. The DIFFERENCE: most of those tools do ONE workflow — Coolors focuses on random palette discovery, Tints.dev focuses on Tailwind scales, mycolor.space focuses on theory harmonies. This tool combines all four (image / theory / scale / check) in one page with shared state. UNIQUE TO US: colorblind simulation (Brettel matrix for Protanopia / Deuteranopia / Tritanopia — no competitor has this), pair-contrast matrix (every palette color × every other, not just vs white/black), 100% client-side processing (image never leaves your browser), and FAQ-rich documentation for the long-tail design-system queries. Free, MIT-licensed, no signup.
How do I generate a palette like the ones on Coolors?
Coolors' default flow is 'press spacebar to randomise a 5-color palette.' This tool's Color Theory workflow gives you the deterministic version of the same end product: pick a base hex and choose a harmony scheme (Triadic for vibrant brand palettes like Coolors' typical output, Analogous for calmer gradient-style palettes, Complementary for high-contrast accent pairs, Monochromatic for subtle dashboards). You get exactly the same 3–5 color palette shape Coolors produces, but with control over the base color and harmony relationship instead of random discovery. Combine with the Tailwind Scale workflow to expand any one color into a full 50–950 scale for production use. The shareable URL hash means you can copy the palette directly into Slack or a design ticket without 'sharing' through an account.
What's the difference between OKLCH and OkLab color spaces (which one should I use)?
OkLab and OKLCH are the same color space described in two different coordinate systems. OkLab uses Cartesian coordinates (L = lightness, a = green↔red, b = blue↔yellow), like how RGB uses x/y/z axes. OKLCH uses cylindrical coordinates (L = lightness, C = chroma/saturation, H = hue angle 0–360°), like how HSL relates to RGB. They describe the same colors — just in different math. For PALETTE WORK, OKLCH is more intuitive because Hue is a single angle (easy to rotate for triadic / complementary / analogous palettes) and Chroma is a single magnitude (easy to dim for scale extremes). OkLab is more useful for color INTERPOLATION math because gradients in a/b space avoid the hue-wraparound problem. This tool uses OKLCH internally for the Tailwind scale interpolation (perceptually uniform) and exposes OKLCH as a swatch label format. If you've seen Colorffy advertise 'Oklab harmonies,' they're using the same underlying space — just rendering coordinates in the Cartesian form.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.