RGB to hex converter

Type the red, green and blue values, each from 0 to 255. rgb(255, 136, 0), 255, 136, 0 and 255 136 0 all work, as do percentages and an rgba() opacity. The hex code appears straight away, ready to copy as #FF8800, with the HSL value, the nearest CSS colour name and the contrast with black and white text.

The box takes hex codes, hsl() and colour names too, so you can paste whatever a design tool or a stylesheet gave you. Nothing you type leaves the page.

Each of the three numbers becomes two hex digits. Divide it by 16. The whole-number answer is the first digit and the remainder the second, with 10 to 15 written as A to F. For 136, 136 ÷ 16 is 8 remainder 8, so 88. For 255 it's 15 remainder 15, FF, and for 0 it's 00. Put the three pairs together after a #, red first, and 255, 136, 0 becomes #FF8800.

Every value needs both digits, so 5 is 05, not 5. Otherwise the pairs would run into each other. An opacity, as in rgba(255, 136, 0, 0.5), is multiplied by 255 and added as a fourth pair, so 0.5 × 255 rounds to 128, which is 80, giving #FF880080.

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.