Hex to RGB converter

Paste a hex colour code, with or without the #. FF8800, #f80 and #FF880080 all work. The RGB value appears straight away, ready to copy as rgb(255, 136, 0), along with the HSL value, the CSS colour name nearest to it, and how well black and white text read on it. The swatch shows the colour itself, with sample text on it.

The box takes any colour form, so pasting rgb(), hsl() or a name like teal shows the hex code too. Nothing you type leaves the page.

A hex colour like #FF8800 is three numbers written in base 16, two digits each, with FF for red, 88 for green and 00 for blue. Each pair runs from 00 to FF, which is 0 to 255 in ordinary numbers, the same range as rgb(). To read a pair, multiply the first digit by 16 and add the second, counting A to F as 10 to 15. FF is 15 × 16 + 15 = 255, and 88 is 8 × 16 + 8 = 136, so #FF8800 is rgb(255, 136, 0).

Three-digit codes are a shorthand, so #F80 means each digit is doubled, #FF8800. An eighth and ninth digit, as in #FF880080, add opacity on the same 0 to 255 scale, so 80 (128) is about half see-through. Upper and lower case mean the same.

HSL describes the same colour as hue, saturation and lightness. The hue is an angle round the colour wheel (0 red, 120 green, 240 blue), saturation how strong the colour is, and lightness how far from black to white. It's easier to adjust by hand. To make a darker shade, lower the lightness and keep the rest.

CSS has 148 colour names, from aliceblue to yellowgreen. If the colour is one of them exactly, its name is shown; otherwise the nearest one is, which helps when describing a colour in words. Names, hex, rgb() and hsl() can all be typed into either box.

The contrast ratios show whether text will be readable on the colour. The Web Content Accessibility Guidelines ask for at least 4.5:1 between normal text and its background (level AA), 3:1 for large text, and 7:1 for the stricter AAA level. The ratio runs from 1:1, the same colour, to 21:1, black on white.

The ratio comes from each colour's relative luminance, how bright it looks, which weights green most and blue least because eyes are most sensitive to green. That's why yellow #FFFF00 is fine behind black text but nearly unreadable behind white, while blue #0000FF is the other way round.