Paste a colour in any CSS syntax — hex, rgb(), hsl() or a keyword like tomato — and read it back in every other format, with a palette built from it.
Files never leave your device
hex#ff6347
rgbrgb(255, 99, 71)
hslhsl(9, 100%, 64%)
hsvhsv(9, 72%, 100%)
cmykcmyk(0%, 61%, 72%, 0%)
Palette
Tints
Shades
Complementary
Analogous
Triadic
One colour, five formats
Pick a colour once and this page shows it every way a stylesheet, a design tool or a print job
might ask for it. tomato — the CSS colour name — is #ff6347, which is rgb(255, 99, 71),
hsl(9, 100%, 64%), hsv(9, 72%, 100%) and cmyk(0%, 61%, 72%, 0%):
Format
Value
Hex
#ff6347
RGB
rgb(255, 99, 71)
HSL
hsl(9, 100%, 64%)
HSV
hsv(9, 72%, 100%)
CMYK
cmyk(0%, 61%, 72%, 0%)
All five describe the exact same colour; nothing is lost or approximated converting between them,
CMYK's rounding for print aside. The tool updates all five together the moment you change any one
of the first three inputs.
Typing a name instead of a code
CSS ships with over a hundred named colours, and this converter reads them the same way it reads
hex or rgb(). Type dodgerblue and you get #1e90ff — rgb(30, 144, 255), hsl(210, 100%, 56%)
— without needing to already know the hex value. Names are also how a lot of quick prototyping
happens: it's faster to type steelblue in a mockup than to look up #4682b4, and converting the
name to every other format afterward takes one paste.
Building a palette from one colour
Below the converter, the palette section takes your colour and generates two ramps and three
related hues. Tints step tomato toward white — #ff7d66, #ff9784, #ffb1a3, #ffcbc2,
#ffe5e0 — and shades step it toward black — #d5533b, #aa422f, #803224, #552118,
#2b110c. Both ramps keep the same hue throughout; only how much white or black is mixed in
changes, which is exactly the property that makes them usable as a matched set of hover, active
and disabled states for one UI colour.
Tip:Need a full set of button states from one brand colour? Take the base colour plus two tints and two shades — that's five swatches with guaranteed visual consistency, since they all descend from the same hue.
Harmonies: related colours, not lighter or darker ones
The three harmony swatches rotate hue instead of lightness. Complementary rotates 180 degrees —
tomato's complement is a cyan-blue at hsl(189, 100%, 64%), roughly #47e3ff. Analogous rotates
±30 degrees, giving a pink-red at hsl(339, 100%, 64%) and an orange at hsl(39, 100%, 64%) —
neighbours on the wheel that read as part of the same family. Triadic rotates ±120 degrees, giving
a green at hsl(129, 100%, 64%) and a blue-violet at hsl(249, 100%, 64%) — three colours spaced
evenly around the wheel, a classic starting point for a multi-colour chart or illustration palette.
Tip:Complementary pairs make good accents precisely because they clash a little — use the base colour for most of a UI and its complement sparingly, for a single call-to-action button or a status badge, rather than for two large adjacent areas.
Choosing a format for the task
Task
Best format
Writing CSS
Hex, or a named colour when one exists
Blending or animating a colour in code
RGB or HSL, both plain numbers
Making a lighter or darker version
HSL, by changing only lightness
Sending a colour to a print designer
CMYK
Matching "how bright" to a lighting or paint tool
HSV
There's no single correct format — each one makes a different question easy to answer, and this
page exists so you can read off whichever one the task in front of you actually needs.
Frequently asked questions
Which colour formats does this tool convert between?
Hex, RGB, HSL, HSV and CMYK, all at once — type or paste a colour in any one of the first three (hex, rgb(), or hsl()), or a CSS colour name like tomato, and every format updates together, so you never convert just one pair at a time.
Can I type a colour name instead of a code?
Yes. tomato, dodgerblue, steelblue and the rest of the CSS named colours are all recognised — tomato itself is #ff6347, which is why it shows up as the running example on this and the other converter pages. Typing a name is often faster than remembering or looking up its code.
What is CMYK, and why does a web tool have it at all?
CMYK — cyan, magenta, yellow, key (black) — is the ink model print uses, where colours are subtracted from white paper rather than added on a dark screen. Web developers mostly don't need it, but it's the format a print designer will ask for, so having it alongside RGB and hex avoids a trip to a separate tool.
How is the palette below the converter built?
Tints step from your colour toward white and shades step from it toward black, in even increments, giving a ramp usable for hover, disabled and pressed states. The three harmony swatches — complementary, analogous and triadic — rotate the hue by a fixed number of degrees while keeping saturation and lightness the same.
What's the difference between a tint, a shade, and a harmony?
A tint or a shade is the same hue at a different lightness — mixed toward white or toward black. A harmony is a different hue entirely, chosen by its position on the colour wheel relative to your colour, so it reads as a deliberately related but distinct colour rather than a lighter or darker version of the same one.
Why do HSV and HSL both exist if they measure similar things?
They answer slightly different questions. HSL's lightness reaches 100% at white, so a pure, fully lit hue sits at 50% lightness. HSV's value reaches 100% at the fully lit hue itself, which is closer to how a paint mixer or a lighting rig thinks about brightness — less mixing toward white, more mixing toward black.
Does this tool store or upload the colours I try?
No. Every conversion, including the palette and harmony maths, runs in JavaScript in your browser tab. Nothing about the colour you're working with leaves your device.