Color Palette Generator
Press Space for a new palette, lock the colors you like and export them anywhere.
Press Space to generate. Locked colors stay.
- RGB
- 25 53 80
- HSL
- 209.5 52.4% 20.6%
- OKLCH
- 32.11% 0.0592 249.38
- RGB
- 22 130 125
- HSL
- 177.2 71.1% 29.8%
- OKLCH
- 54.97% 0.0901 189.92
- RGB
- 233 206 148
- HSL
- 40.9 65.9% 74.7%
- OKLCH
- 86.06% 0.0806 85.75
- RGB
- 230 125 88
- HSL
- 15.6 74% 62.4%
- OKLCH
- 69.94% 0.1398 39.91
- RGB
- 132 59 97
- HSL
- 328.8 38.2% 37.5%
- OKLCH
- 46.08% 0.1102 349.84
Drag the grip on a swatch to reorder it. Editing a swatch locks it.
Color values
| Color | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| 1 ≈ darkslategray | #193550 | rgb(25 53 80) | hsl(209.5 52.4% 20.6%) | oklch(32.11% 0.0592 249.38) |
| 2 ≈ teal | #16827d | rgb(22 130 125) | hsl(177.2 71.1% 29.8%) | oklch(54.97% 0.0901 189.92) |
| 3 ≈ wheat | #e9ce94 | rgb(233 206 148) | hsl(40.9 65.9% 74.7%) | oklch(86.06% 0.0806 85.75) |
| 4 ≈ coral | #e67d58 | rgb(230 125 88) | hsl(15.6 74% 62.4%) | oklch(69.94% 0.1398 39.91) |
| 5 ≈ brown | #843b61 | rgb(132 59 97) | hsl(328.8 38.2% 37.5%) | oklch(46.08% 0.1102 349.84) |
Select a value to copy it. Names are the closest CSS named colors (≈ means not exact).
Color vision check
Simulate imagesSimulated with the Machado et al. (2009) model at full severity. Pairs closer than 0.06 in OKLab are flagged as easy to confuse — a rule of thumb, so also use labels or patterns when color carries meaning.
Export the palette
Files and links
Load .ase files from the Swatches panel menu in Photoshop, Illustrator or InDesign; GIMP and Inkscape read .gpl palettes. A share link keeps the colors after the # in the address — the part browsers do not send to the server when they open a page.
About the Color Palette Generator
Press Space (or tap Generate) for a new set of 3–10 colors that follow a color-harmony rule. Lock the colors you like and keep generating: locked colors stay where they are and the new ones are built around them. You can also start from your own color, type a new code into any swatch, drag swatches into a different order, and choose a style — balanced, pastel, vibrant, muted, dark, earthy or color-blind safe.
Colors are generated in OKLCH, a perceptual color space in which equal steps of lightness look equal, and brought into the range sRGB screens can show with the CSS Color 4 gamut-mapping method. Every swatch shows its HEX, RGB, HSL and OKLCH values and whether black or white text is more readable on it. Export the palette as CSS variables, SCSS, a Tailwind v4 @theme block or v3 config, JSON, a GIMP palette, Adobe Swatch Exchange (.ase), a PNG or SVG palette card, or a share link.
How to use it
- Press Space or select Generate for a new palette. Use Undo to go back to an earlier one.
- Select the lock on a swatch to keep that color. Locked colors stay when you generate again, and the first locked color sets the base hue of the harmony.
- Choose a Style, a Harmony (or leave it on Any harmony for variety) and the number of colors, from 3 to 10.
- To build a palette around a brand color, type it into Start from a color and select Use. To change a swatch, type a code into it or open its color picker; drag the grip, or use the arrow buttons, to reorder.
- Look at the Color vision check, then copy or download the palette in the format you need under Export the palette.
Examples
Colors #193550, #16827d, #e9ce94 · Code format: Tailwind v4 · Token name: brand
@theme {
--color-brand-1: oklch(32.11% 0.0592 249.38);
--color-brand-2: oklch(54.97% 0.0901 189.92);
--color-brand-3: oklch(86.06% 0.0806 85.75);
}Tailwind v4 turns these variables into utilities such as bg-brand-1 and text-brand-2.
Same colors · Code format: CSS variables
:root {
--palette-1: #193550;
--palette-2: #16827d;
--palette-3: #e9ce94;
}Start from a color: #1d5fcb · Harmony: Complementary · 5 colors
The brand blue becomes the first color and is locked. The other four alternate between the opposite hue (an orange) and the blue hue again, at different lightness, so the palette has contrast as well as harmony.
Common uses
- Choosing a color scheme for a website, app, presentation or poster in a few minutes.
- Growing one brand color into a full, harmonious palette.
- Producing design tokens — CSS variables, a Tailwind theme or SCSS — ready to paste into code.
- Picking chart and map colors that stay distinguishable for people with color vision deficiencies.
- Handing a palette to a designer as an Adobe .ase file, or to a client as a PNG card.
How the colors are generated
- Harmony decides the hues, measured on the OKLCH hue circle. Complementary uses opposite hues (180° apart); split-complementary the base hue plus the two hues beside its complement (150° and 210°); triadic three hues 120° apart; tetradic a rectangle (0°, 60°, 180°, 240°); square four hues 90° apart; analogous neighboring hues within an arc of about 50–110°; and monochromatic one hue at different lightness.
- Style decides lightness and chroma (colorfulness): pastel colors are very light and soft, vibrant ones as saturated as an sRGB screen allows, muted ones grayed, dark ones deep, and earthy ones keep their hues between terracotta and sage green.
- A color that would fall outside what an sRGB screen can show is brought inside with the CSS Color 4 gamut-mapping method, which lowers chroma while keeping lightness and hue.
- OKLCH is the polar form of OKLab, a perceptual color space published by Björn Ottosson in 2020. Because its lightness is perceptual, evenly spread OKLCH lightness also looks evenly spread.
The color vision check
Under the palette, each color is shown as it may look with protanopia, deuteranopia and tritanopia (no working red, green or blue cones), using the simulation by Machado, Oliveira & Fernandes (2009). Pairs that end up closer than 0.06 in OKLab — three times the 0.02 just-noticeable difference that CSS Color 4 uses for gamut mapping — are flagged as easy to confuse. The Color-blind safe style picks the colors that stay furthest apart in all four views.
This is a rule of thumb for flat colors in charts and interfaces, not a guarantee. WCAG SC 1.4.1 asks that color is never the only way information is shown, so add labels, patterns or icons as well. The Color Blindness Simulator shows whole images and lets you change the severity.
Readable text on every swatch
Each swatch is labelled in black or white — whichever has the higher WCAG 2.2 contrast ratio on that color — and shows the ratio. At least 4.5:1 passes WCAG AA for normal text and 3:1 for large text. Use the Color Contrast Checker to test text in one palette color on a background in another.
Export formats
- CSS variables:
--palette-1: #193550;inside:root, in HEX, RGB, HSL or OKLCH. - SCSS:
$palette-1variables plus a$palettemap for@eachloops. - Tailwind v4: an
@themeblock of--color-*variables (OKLCH by default, as in Tailwind’s own palette), which creates utilities such asbg-palette-1. - Tailwind v3: a
tailwind.config.jssnippet that extendstheme.colorswith HEX values. - JSON: every color with HEX, RGB, HSL and OKLCH values.
- Files: a GIMP palette (.gpl), Adobe Swatch Exchange (.ase), and a 1200 × 630 px palette card as PNG or SVG with HEX and RGB labels.
- Share link: the colors are kept after the # of the address, for example
/tools/color-palette-generator/#193550-16827d-e9ce94. The page address updates as you work, so a bookmark brings the palette back.
Limitations
- Palettes are made for sRGB screens. Wide-gamut (Display P3) colors are not produced, and printed colors depend on the printer and its color profile.
- Harmony rules are a starting point, not a guarantee of a pleasing result — generate a few times and lock what works.
- The color vision check simulates complete loss of one cone type; real color vision varies from person to person.
- Share links and the palette itself hold at most 10 colors. Palettes are not stored in an account, so download or bookmark the ones you want to keep.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
How do I keep a color I like?
Select the lock icon on its swatch. Locked colors stay in place when you press Space or Generate. Editing a swatch locks it automatically; select the lock again to release it.
Why OKLCH instead of HSL?
HSL lightness is not perceptual: at the same HSL lightness, yellow looks far brighter than blue. OKLCH lightness follows how light a color looks, so palettes get predictable contrast and evenly spaced shades. Current versions of Chrome, Edge, Firefox and Safari also understand oklch() in CSS.
What does “color-blind safe” mean here?
That style chooses colors that stay as far apart as possible under simulated protanopia, deuteranopia and tritanopia as well as normal vision, and the check under the palette shows how far apart they ended up. It cannot account for every viewer, screen or lighting condition, so in charts also use labels, patterns or direct annotation.
How do I open the .ase file in Photoshop, Illustrator or InDesign?
In Photoshop, choose Import Swatches from the Swatches panel menu. In Illustrator, use the Swatches panel menu → Open Swatch Library → Other Library. In InDesign, choose Load Swatches. The colors arrive as RGB swatches named after their HEX codes.
Can I start from colors I already have?
Yes. Type one color into Start from a color, or open a share link such as /tools/color-palette-generator/#193550-16827d-e9ce94. To get colors out of a photo or logo, use Color Palette from Image and open the result here.
Is anything uploaded?
No. Generating, checking and exporting all happen in your browser, and the tool keeps working offline once the page has loaded.