Palette generator
Color Palette Generator
Build a color scheme from one color, then lock the swatches you like.
Analogous palette
5 swatches from #2F6F68 · Neighbors on the wheel. Calm, cohesive, low risk.
6 of 20 pairs
carry body text
Which swatch can sit on which
6 of 20 pairs carry body text
| Text color | #07472D | #255F45 | #59918D | #7FBAC6 | #BEE3FF |
|---|---|---|---|---|---|
| #07472D | 1.0 | 1.43 | 3.0 | 4.99 | 8.0 |
| #255F45 | 1.43 | 1.0 | 2.09 | 3.48 | 5.58 |
| #59918D | 3.0 | 2.09 | 1.0 | 1.66 | 2.67 |
| #7FBAC6 | 4.99 | 3.48 | 1.66 | 1.0 | 1.6 |
| #BEE3FF | 8.0 | 5.58 | 2.67 | 1.6 | 1.0 |
Read a row as the text color and a column as the background. Anything at 4.5 or above is safe for body copy; 3.0 and above works for large headings and interface furniture.
Color vision check
Four types simulated
Typical vision
Protanopia: No working red cones. Around 1 in 100 men.
Deuteranopia: No working green cones. Around 1 in 100 men.
Tritanopia: No working blue cones. Around 1 in 10,000 people.
Achromatopsia: No color vision at all. Very rare, but the strictest test.
If two swatches merge into one in any row, do not rely on color alone to tell those two things apart. Add a label, an icon or a pattern.
:root {
--color-spring-green: #07472d;
--color-spring-green-2: #255f45;
--color-cyan: #59918d;
--color-cyan-2: #7fbac6;
--color-azure: #bee3ff;
}module.exports = {
theme: {
extend: {
colors: {
"spring-green": "#07472d",
"spring-green-2": "#255f45",
"cyan": "#59918d",
"cyan-2": "#7fbac6",
"azure": "#bee3ff"
},
},
},
};$spring-green: #07472d;
$spring-green-2: #255f45;
$cyan: #59918d;
$cyan-2: #7fbac6;
$azure: #bee3ff;[
{
"name": "spring-green",
"hex": "#07472d",
"rgb": [
7,
71,
45
],
"hsl": [
155.9,
81.7,
15.3
],
"oklch": [
0.3528,
0.0755,
160.1586
]
},
{
"name": "spring-green-2",
"hex": "#255f45",
"rgb": [
37,
95,
69
],
"hsl": [
153.7,
43.7,
25.8
],
"oklch": [
0.4386,
0.074,
162.0446
]
},
{
"name": "cyan",
"hex": "#59918d",
"rgb": [
89,
145,
141
],
"hsl": [
176.5,
24.0,
45.7
],
"oklch": [
0.616,
0.0594,
191.0479
]
},
{
"name": "cyan-2",
"hex": "#7fbac6",
"rgb": [
127,
186,
198
],
"hsl": [
190.7,
38.5,
63.8
],
"oklch": [
0.7521,
0.063,
212.6462
]
},
{
"name": "azure",
"hex": "#bee3ff",
"rgb": [
190,
227,
255
],
"hsl": [
206.3,
100.0,
87.3
],
"oklch": [
0.8976,
0.0547,
241.8277
]
}
]<svg xmlns="http://www.w3.org/2000/svg" width="600" height="160" viewBox="0 0 600 160" role="img" aria-label="Color palette">
<rect x="0" y="0" width="120" height="160" fill="#07472d"/>
<text x="60" y="142" font-family="monospace" font-size="13" text-anchor="middle" fill="#ffffff">#07472D</text>
<rect x="120" y="0" width="120" height="160" fill="#255f45"/>
<text x="180" y="142" font-family="monospace" font-size="13" text-anchor="middle" fill="#ffffff">#255F45</text>
<rect x="240" y="0" width="120" height="160" fill="#59918d"/>
<text x="300" y="142" font-family="monospace" font-size="13" text-anchor="middle" fill="#111111">#59918D</text>
<rect x="360" y="0" width="120" height="160" fill="#7fbac6"/>
<text x="420" y="142" font-family="monospace" font-size="13" text-anchor="middle" fill="#111111">#7FBAC6</text>
<rect x="480" y="0" width="120" height="160" fill="#bee3ff"/>
<text x="540" y="142" font-family="monospace" font-size="13" text-anchor="middle" fill="#111111">#BEE3FF</text>
</svg>Pick a color you already trust, choose the relationship you want the rest of the palette to have with it, and the generator does the arithmetic. Every swatch is spaced in OKLCH, so the color scheme has an even lightness rhythm instead of five colors that all sit at the same value.
How to make a color palette from one color
Most palettes start from a single fixed point: a brand color, a hex code from a logo, or a shade you saw somewhere and liked. Type that hex code in as the base color and choose a harmony rule. Analogous keeps the palette calm, complementary adds a strong accent, and triadic gives you three distinct hues with equal weight. The base stays exactly as you entered it, and every other swatch is placed around it on the color wheel.
Why the lightness matters more than the hue
A color scheme can follow a harmony rule perfectly and still fail, because every swatch lands at the same lightness and nothing can carry text. This generator sets the hues with the rule you choose and then spreads the lightness out in OKLCH, a color space where equal steps look equal to the eye. The result is a palette with a clear light end, a clear dark end and usable pairs in between.
Accessible palettes for websites and apps
Under the swatches you can see which colors are dark or light enough to hold body text at the WCAG 4.5:1 contrast ratio, and a color blindness preview that shows the palette through protanopia, deuteranopia and tritanopia. If two swatches merge in the preview, add a second signal such as a label or an icon wherever those colors need to be told apart.
How to use the palette generator
- Start from a colorType a hex code, RGB, HSL or OKLCH value, or use the picker. Any format the CSS specification knows, this reads.
- Choose a harmony ruleAnalogous for calm, complementary for tension, triadic for energy. The note under each rule says what it is for.
- Lock the keepersClick the lock on a swatch you want to keep, then shuffle. Locked swatches survive every regeneration.
- Check it worksThe accessibility row shows which swatches can carry text. The color blindness preview shows the palette as roughly 1 in 12 men see it.
- ExportCopy CSS custom properties, a Tailwind color object, SCSS variables, JSON or an SVG swatch sheet.
Common questions
How many colors should a palette have?
Most interfaces run on three to five: one dominant neutral, one brand color, one accent, and one or two support colors. The 60 30 10 color rule is a useful starting split: 60% dominant, 30% secondary and 10% accent. More than five and you are usually describing a design system's full color ramp rather than a palette.
Can I generate a color palette from a hex code?
Yes. Paste any hex code into the base color field and the generator builds the rest of the palette around it. The base color is never altered, so a brand hex stays exactly as it is while the supporting colors change with the rule.
What is the difference between analogous and complementary colors?
Analogous colors sit next to each other on the color wheel, so they share undertones and feel settled. Complementary colors sit opposite each other, so they push against each other and create a focal point. Analogous is safer; complementary is louder.
Why does the generator use OKLCH instead of HSL?
HSL lightness is misleading. Yellow at 50% lightness looks far brighter than blue at 50% lightness, so an HSL palette comes out visually lopsided. OKLCH lightness matches what the eye actually sees, so evenly spaced numbers give evenly spaced colors.
Can I export my palette to Tailwind CSS?
Yes. The export panel produces a Tailwind color object you can paste into your config, along with CSS custom properties, SCSS variables, JSON and an SVG swatch sheet.
Can I use these palettes commercially?
Yes. Colors are not copyrightable and nothing here is licensed. Anything you generate is yours to use in client work, products or print.
The rest of the toolkit
Every tool reads the same color formats, so you can carry a value straight from one to the next.