Color Converter
Convert a colour between every format a stylesheet accepts, with a picker and the CSS name where one exists.
Processed on your device — no upload
Type any format into the field — #f0a, rgb(255 0 170), hsl(320 100% 50%) or a CSS name such as rebeccapurple. The three-digit shorthand is expanded by doubling each digit, so #f0a is #ff00aa and not #f00a00.
How to use it
- Type or pick a colour.
- Read every format at once.
- Click one to copy it.
How it works
All of these describe the same three numbers. A screen has red, green and blue subpixels, and every format here is a different way of saying how bright each one is. The conversions are exact arithmetic, not approximations — except CMYK, which is explained below.
HEX is RGB written in base 16. Two hexadecimal digits per channel, 0 to 255 each. The three-digit shorthand doubles each digit, so #f0a is #ff00aa — not #f00a00, which is what a naive parser produces and a surprising number of tools get wrong.
HSL and HSV are the same idea from different ends. Both start with a hue angle on the colour wheel. HSL's lightness runs from black through the pure colour at 50% to white, which is why it is good for building a tint scale. HSV's value runs from black to the pure colour at 100%, which is what a design tool's colour picker square is showing you.
CMYK is the honest approximation here. Screens emit light and add colours; ink absorbs light and subtracts them. The conversion shown is the standard arithmetic one, and it is fine for a rough idea — but a real print job needs a colour profile for the specific press and paper, and the numbers will differ.
A worked example
Where this actually comes up. A brand guide gives you #4d7c0f. The CSS needs a translucent version for a hover state, so you need it as rgb() to add an alpha. A designer asks for it in HSL so they can build lighter steps by moving one number. The printer asks for CMYK. One colour, four formats, and copying digits by hand is where the typo gets in.
The name lookup is more useful than it sounds. There are 148 CSS colour names, and a hex value that exactly matches one is worth knowing about — reading rebeccapurple in a stylesheet is easier than reading #663399, and it tells you the value was chosen deliberately rather than eyedropped.
The luminance figure is the one to watch. It is the same measurement the WCAG contrast formula is built on, and it tells you which side of the light/dark line a colour sits on. If you are choosing text colour to go over a background, that is the number that decides it — and the contrast checker does the full calculation.
To build a whole scale from one colour rather than convert a single value, the palette generator produces the 50–900 ramp and the harmony schemes.
Questions
What is the difference between HSL and HSV?
Both use a hue angle. In HSL, 50% lightness is the pure colour and 100% is white. In HSV, 100% value is the pure colour and there is no white at all without lowering saturation. HSL suits tint scales; HSV matches most colour pickers.
Why does #f0a become #ff00aa?
The three-digit form is shorthand where each digit is doubled. It is the CSS specification, and a parser that pads with zeros instead produces a completely different colour.
Is the CMYK value accurate for printing?
It is the standard arithmetic conversion, which is a reasonable starting point. Real print work needs the ICC profile for that press and paper — screens and ink do not have the same range of colours.
Can I enter a colour name?
Yes. All 148 CSS names work, including rebeccapurple. If the colour you enter matches one exactly, the name is shown alongside the other formats.
What about the 8-digit hex form?
The last two digits are opacity, from 00 to ff. It is supported everywhere now and is often tidier than switching to rgba() just to add transparency.
What is relative luminance?
A measure of perceived brightness that linearises each channel first. It is what accessibility contrast ratios are built from, and it is why yellow and blue at the same lightness look nothing alike.
Does this support OKLCH or LAB?
Not yet. Those are perceptually uniform spaces and genuinely better for generating scales, but the conversions are considerably more involved than the ones shown here.
Is anything sent to a server?
No. The arithmetic runs in this page, which is also why the result updates as you type rather than after a round trip.
Does this do HEX to RGB and back?
Both directions, and every other pair. HEX to RGB, RGB to HEX, HEX to HSL, HSL to HEX and RGB to HSL are all the same conversion viewed from different ends: type a colour in any of the fields and the rest update together, because they are all describing one point in the same space.
Related Web tools
Color Contrast Checker
WCAG AA and AAA, with a fix
open$termiva palette --triadicColor Palette Generator
Harmonies and a full tint scale
open$termiva gradient --linearCSS Gradient Generator
Linear, radial and conic
open$termiva shadow --layers 2CSS Box Shadow Generator
Layered shadows, live preview
open