Convert HEX to RGB and HSL

How a hex color code maps to RGB

A hex color is three numbers squeezed together. In #FF4A3D the pairs are FF, 4A and 3D: red, green and blue, each from 00 to FF in hexadecimal, which is 0 to 255 in decimal. So #FF4A3D is rgb(255, 74, 61): full red, a little green, slightly less blue.

• Short form. #F80 doubles each digit and means #FF8800.
• With alpha. A fourth pair sets the opacity: #FF4A3D80 is the same color at about 50% (80 in hex is 128 of 255). Octoolo shows a see-through color as an 8-digit HEX and as RGBA and HSLA.
• The # matters. Type the code with its # sign; FF4A3D on its own is not read as a color.

Each pair is one byte, so six hex digits hold 256 × 256 × 256 = 16,777,216 colors. For converting other numbers between hex and decimal, use the number base converter.

RGB or HSL: which to use

RGB says how much of each light to mix, which is how screens work and how most design tools export colors. HSL describes a color the way people think about it:

• Hue, an angle on the color wheel from 0 to 360: 0 is red, 120 green, 240 blue.
• Saturation, from 0% (gray) to 100% (full color).
• Lightness, from 0% (black) through 50% (the pure color) to 100% (white).

That makes HSL handy for building a palette in CSS: keep the hue, change the lightness, and you get lighter and darker shades of one color for hover states, borders and backgrounds. Octoolo rounds HSL to whole numbers, so a color taken to HSL and back can come out a shade different in the last digit.

The named colors of CSS, from aliceblue to yellowgreen, convert too, which is a quick way to learn what tomato or steelblue really are.

Contrast ratios and WCAG

For each color, Octoolo shows the WCAG contrast ratio against white and against black. Ratios run from 1:1 (no contrast) to 21:1 (black on white). They compare the relative luminance of two colors, how bright each looks to the eye, which weighs green far more than blue.

Take #FF4A3D: 3.33:1 on white, 6.30:1 on black. White text on that red passes only at large sizes, while black text passes AA at any size. A classic case among grays: #777777 reaches 4.48:1 on white and just misses AA, while #767676, one step darker, passes at 4.54:1.

The ratio is worked out from the solid color. For a see-through color, the real contrast depends on what shows through it, so check the color it turns into on the page.

Where the colors come from

Most color codes you need are already somewhere: in a brand guide, a stylesheet, a screenshot. To take one from a picture, the Photo Editor's color picker copies the hex code of any pixel you click; paste it here for RGB, HSL and contrast. Microsoft PowerToys, a separate download for Windows, also has a Color Picker (Win Shift C) that grabs any pixel on screen.

This converter covers screen colors. It has no CMYK: print colors depend on the printer and paper profile, so ask your print shop for those values. It has no HSV or HSB either, the model behind Photoshop-style pickers. For QR codes in brand colors, the QR code generator takes a dot and a background color, and the contrast figures here help keep the code easy to scan.