HEX to RGB converter

Red: 63 = 6 × 16 + 3 = 99   |   99 ÷ 16 = 6 remainder 3 → 63
Green: 66 = 6 × 16 + 6 = 102   |   102 ÷ 16 = 6 remainder 6 → 66
Blue: F1 = 15 × 16 + 1 = 241   |   241 ÷ 16 = 15 remainder 1 → F1

How HEX to RGB conversion works

A six-digit HEX code is three pairs of base-16 digits: red, green and blue. Base 16 uses the digits 0 to 9 and then A to F for the values 10 to 15. Each pair is worth (first digit × 16) + second digit, which gives a number from 0 (00) to 255 (FF).

Take #6366F1. Red is 63: 6 × 16 + 3 = 99. Green is 66: 6 × 16 + 6 = 102. Blue is F1: F is 15, so 15 × 16 + 1 = 241. The colour is rgb(99, 102, 241).

How RGB to HEX conversion works

Go the other way by dividing each channel by 16. The whole-number result is the first digit and the remainder is the second. For rgb(255, 136, 0): 255 ÷ 16 = 15 remainder 15, which is FF; 136 ÷ 16 = 8 remainder 8, which is 88; and 0 is 00. The result is #FF8800. Remember to pad single values with a leading zero: 9 is 09, not 9.

Because each pair in #FF8800 is a repeated digit, it can also be written in the three-digit shorthand #F80. Browsers expand shorthand by doubling each digit, so #F80 means #FF8800, not #F08000. Most colours cannot be shortened: #6366F1 has no exact three-digit form.

Converting to HSL

HSL describes the same colour by hue (an angle on the colour wheel from 0° to 360°), saturation and lightness (both percentages). Lightness is the average of the largest and smallest channel. For #6366F1 the largest channel is blue at 241 and the smallest is red at 99, so lightness is (241 + 99) ÷ 2 ÷ 255 = 66.7%. Saturation and hue then follow from how far apart the channels are and which one is largest. The exact values are hue 238.7°, saturation 83.5% and lightness 66.7%, shown rounded as hsl(239, 84%, 67%).

Rounding matters if you convert back. hsl(239, 84%, 67%) converts to #6467f2: every channel has moved up by one step from where we started. If you need an exact colour, store the HEX or RGB value and treat the HSL as a convenient approximation.

About the CMYK figure

The CMYK line uses the simple textbook formula: black (K) is 1 minus the largest RGB channel, and each ink is what is left of its opposite channel after black is taken out. It is useful for understanding the relationship between screen and ink, but it is not how printers convert colour. Real print conversion uses an ICC profile for the press and paper, and the numbers can be quite different. Our RGB vs CMYK guide explains why and what to do instead.

Formats this converter accepts

• HEX with or without #, in 3, 4, 6 or 8 digits (any alpha digits are ignored)
• rgb(255, 136, 0), rgb(255 136 0), rgba(255, 136, 0, 0.5) or simply 255, 136, 0
• Percentages, such as rgb(100%, 53.3%, 0%)
• hsl(32, 100%, 50%), including angles in deg or turn
• Any of the 148 CSS colour names

Frequently asked questions

Is HEX case-sensitive?

No. #6366F1 and #6366f1 are the same colour. Many style guides prefer lower case for consistency.

What does an 8-digit HEX code mean?

The last two digits are alpha (opacity), from 00 (transparent) to FF (opaque). 80 is 128 out of 255, about 50%. Modern browsers support it in CSS.

Why does my design tool show slightly different HSL values?

Tools round differently, and some show HSB/HSV, which is a different model. In HSB, 100% brightness is the pure colour; in HSL, 100% lightness is always white.