Hex to RGB Color Converter

A hex color like #FF5733 is three bytes written in hexadecimal: one each for red, green and blue. CSS, design tools and image editors all accept it, but sometimes you need the same color as rgb() or rgba() values, or as hue, saturation and lightness. This converter does both directions and shows a preview of the color as you type.

How to use the hex to RGB converter

1. Enter a hex color in any of the four CSS forms: #RGB, #RGBA, #RRGGBB or #RRGGBBAA. The # is optional.
2. Read the rgb() value (or rgba() when the code includes alpha) and the hsl() value, and check the color in the preview.
3. To go the other way, enter red, green and blue values from 0 to 255 and, optionally, an alpha from 0 to 1. The hex code updates to match.
4. Use the copy buttons to copy the hex, RGB or HSL value.

How it works

Hex to RGB

CSS Color Module Level 4 defines four hex notations:

Form	Example	Meaning
#RRGGBB	#3366CC	Red 33, green 66, blue CC, each a hex number from 00 to FF
#RRGGBBAA	#3366CC80	The same plus an alpha byte: 00 is fully transparent, FF fully opaque
#RGB	#36C	Each digit doubled: #36C = #3366CC
#RGBA	#36C8	Each digit doubled: #36C8 = #3366CC88

Each pair converts to decimal as first digit × 16 + second digit, with A to F standing for 10 to 15. The alpha byte becomes the 0–1 alpha in rgba() by dividing it by 255. Hex codes are case-insensitive.

RGB to HSL

To get hue, saturation and lightness, the converter scales red, green and blue to 0–1 and follows the method in the CSS Color 4 specification’s sample code:

• Lightness = (max + min) ÷ 2, where max and min are the largest and smallest of the three channels.
• Saturation = (max − min) ÷ (1 − |2 × lightness − 1|), or 0 for a gray where max = min.
• Hue depends on which channel is largest. If red: 60 × (green − blue) ÷ (max − min). If green: 60 × ((blue − red) ÷ (max − min) + 2). If blue: 60 × ((red − green) ÷ (max − min) + 4). A negative hue gets 360° added.

The converter rounds hue to whole degrees and saturation and lightness to whole percentages.

Worked examples

#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)

FF = 15 × 16 + 15 = 255, 57 = 5 × 16 + 7 = 87, 33 = 3 × 16 + 3 = 51. For HSL: max = 1, min = 51 ÷ 255 = 0.2, so lightness = 0.6 and saturation = 0.8 ÷ (1 − 0.2) = 1. Red is largest, so hue = 60 × (0.341 − 0.2) ÷ 0.8 = 10.6°, which rounds to 11.

#3366CC → rgb(51, 102, 204) → hsl(220, 60%, 50%)

33 = 51, 66 = 102, CC = 12 × 16 + 12 = 204. Max = 0.8 and min = 0.2, so lightness = 0.5 and saturation = 0.6 ÷ 1 = 60%. Blue is largest: hue = 60 × ((0.2 − 0.4) ÷ 0.6 + 4) = 220°.

#F09 → rgb(255, 0, 153)

The short form doubles each digit, so #F09 = #FF0099: red 255, green 0, blue 153. With an alpha byte of 80, #FF009980 is rgba(255, 0, 153, 0.5), because 80 in hex is 128 and 128 ÷ 255 = 0.502.

rgb(0, 128, 128) with alpha 0.4 → #00808066

0 = 00, 128 = 80 (8 × 16) and 128 = 80. Alpha 0.4 × 255 = 102, which is 66 in hex (6 × 16 + 6). Without the alpha, the color is #008080.

Related guides

• Convert any single hex pair, or longer hex values, with the hex to decimal converter.
• Each color channel is one byte, eight bits: see 255 as 11111111 in the decimal to binary converter.
• More practical shortcuts and tools are in Tech Tips.