Loading the tool…
5-color palettes from any base color
Keep this palette. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.
:root {
--color-1: #c20b2a;
--color-2: #f43f5e;
--color-3: #fa9faf;
--color-4: #0ff1ca;
--color-5: #3ff4d5;
}// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
palette: {
'100': '#c20b2a',
'200': '#f43f5e',
'300': '#fa9faf',
'400': '#0ff1ca',
'500': '#3ff4d5',
}
}
}
}
}{
"name": "Complementary",
"base": "#f43f5e",
"colors": [
{
"hex": "#c20b2a",
"rgb": {
"r": 194,
"g": 11,
"b": 42
},
"hsl": {
"h": 349.8360655737705,
"s": 89.26829268292684,
"l": 40.19607843137255
}
},
{
"hex": "#f43f5e",
"rgb": {
"r": 244,
"g": 63,
"b": 94
},
"hsl": {
"h": 349.72375690607737,
"s": 89.1625615763547,
"l": 60.196078431372555
}
},
{
"hex": "#fa9faf",
"rgb": {
"r": 250,
"g": 159,
"b": 175
},
"hsl": {
"h": 349.45054945054943,
"s": 90.0990099009901,
"l": 80.19607843137256
}
},
{
"hex": "#0ff1ca",
"rgb": {
"r": 15,
"g": 241,
"b": 202
},
"hsl": {
"h": 169.64601769911502,
"s": 88.9763779527559,
"l": 50.19607843137255
}
},
{
"hex": "#3ff4d5",
"rgb": {
"r": 63,
"g": 244,
"b": 213
},
"hsl": {
"h": 169.72375690607734,
"s": 89.1625615763547,
"l": 60.196078431372555
}
}
]
}Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.
npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json
Five harmonious colours are a starting point, not a design system — a UI has one accent, a scale of neutrals, a radius and a typeface, and this page produces none of those. The Studio is the same controls plus the half a token file cannot carry — who the product is for, how it sounds, and what it must never do — and it leaves as a document your coding agent reads rather than as CSS you still have to explain.
Open in the StudioOpens with what is on this page already set.
Twelve starting points — a base colour people search for by name, paired with the harmony that flatters it. Open one, retune the base, and the address bar follows; what is in it is the palette.
Emerald, analogous
The catalog default. Five neighbours of #10B981 — the safest harmony there is.
Indigo, triadic
Three-way split off #6366F1. Enough separation for a chart series.
Rose, complementary
One accent and its opposite. What a two-colour brand actually needs.
Amber, analogous
Warm run from #F59E0B through orange. Reads as one family at a glance.
Sky, monochromatic
One hue at five lightnesses — the shape a UI scale wants.
Violet, split-complementary
The complement, softened. Contrast without the collision.
Teal, tetradic
Two complementary pairs. The widest spread here, and the hardest to balance.
Slate, shades and tints
A neutral ramp off #64748B — borders, surfaces and muted text in one go.
Crimson, triadic
Hot base, evenly spaced. Loud on purpose.
Lime, complementary
#84CC16 against its opposite — the pairing that makes a highlight read as one.
Fuchsia, analogous
Pink through purple. The gradient-era palette, as five flat swatches.
Navy, monochromatic
A single deep blue, laddered. What a dark-mode surface stack is made of.
Every one of these is just the address bar. Change anything in the tool above and the URL changes with it — copy it, paste it into a ticket, or commit it in a review, and it opens for anyone with these exact settings. No account, and nothing to save first.