Skip to content
TinyTools

Color Converter

One colour, every format — plus whether text on it will be readable.

Any CSS colour: #3b82f6, rgb(59 130 246), hsl(217, 91%, 60%), or a name like tomato.

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)
Black text
5.71:1
AAAA LargeAAA
White text
3.68:1
AAAA LargeAAA

WCAG ratios against black and white text. AA needs 4.5 for body text, AAA needs 7, and AA Large covers text at 18pt or bold 14pt.

Everything is processed on your device. Nothing you upload or type is sent to a server, and nothing is stored.

Color Converter online

Every colour on a screen is the same three numbers wearing different clothes. HEX is what you paste into CSS, RGB is what image editors speak, and HSL is the one that actually makes sense to adjust by hand — nudge the lightness and you have a hover state. Type a colour in any of them, or a name like "tomato", and see it in all the rest, with the WCAG contrast against black and white so you know before you ship whether text on it will be readable.

How to use color converter

  1. Enter a colour

    Any CSS colour works: #3b82f6, rgb(59 130 246), hsl(217, 91%, 60%) or a name like tomato.

  2. Or pick one

    Use the swatch to open your system colour picker and choose visually.

  3. Copy the format you need

    Every row has its own copy button.

  4. Check the contrast

    The panel underneath shows the contrast against black and white, and whether that passes WCAG AA and AAA.

Frequently asked questions

What does a hex colour actually mean?

#3b82f6 is three pairs of hexadecimal digits — 3b red, 82 green, f6 blue — each from 00 to ff, which is 0 to 255. So it is exactly rgb(59, 130, 246) written more compactly. A three-digit hex like #f00 is shorthand where each digit is doubled, making it #ff0000.

When should I use HSL instead of HEX?

Whenever you are adjusting a colour rather than recording one. HSL separates hue, saturation and lightness, so a darker version of a colour is the same value with a lower lightness. Doing that in hex means recalculating all three channels by eye.

Can I trust the CMYK values for printing?

Treat them as an approximation. This is the standard naive conversion every web tool uses, and it is not colour-managed — real printing depends on the press, the ink and the paper, all described by an ICC profile. For anything that matters, get the CMYK values from your printer.

What do the contrast numbers mean?

It is the WCAG contrast ratio, from 1 (invisible) to 21 (black on white). Normal body text needs at least 4.5 to pass AA and 7 to pass AAA; large or bold text needs 3 and 4.5. The panel works both out for you against black and white text.

Does it handle transparency?

Yes. An eight-digit hex like #3b82f680 or an rgba() value keeps its alpha, and the alpha is carried through to the other formats that can express it. CMYK and HSV have no notion of transparency, so they describe the colour itself.

You might also like