Hex to RGB color converter

Format	Example	Notes
HEX	#FF5733	6 hex digits: two each for red, green and blue (00–FF)
Short HEX	#F53	Each digit is doubled: #FF5533
HEX + alpha	#FF573380	The last two digits are opacity (80 ≈ 50%)
RGB	rgb(255, 87, 51)	Red, green, blue from 0 to 255
RGBA	rgba(255, 87, 51, 0.5)	Adds opacity from 0 to 1
HSL	hsl(11, 100%, 60%)	Hue (0–360°), saturation and lightness

The tool accepts all of these, plus three plain numbers like 255, 87, 51. Paste whatever your design tool or stylesheet gives you and every other format updates instantly.

A HEX color is just three base-16 numbers written side by side. Split #FF5733 into pairs and convert each from hexadecimal:

• FF = 15 × 16 + 15 = 255 (red)
• 57 = 5 × 16 + 7 = 87 (green)
• 33 = 3 × 16 + 3 = 51 (blue)

So #FF5733 is rgb(255, 87, 51). Going the other way, divide each value by 16: the whole number is the first digit and the remainder is the second. HSL is calculated from the same RGB values by finding the hue angle on the color wheel, how saturated the color is and how light it is.

HSL is the easiest format to adjust by hand. To make a lighter or darker shade of your brand color, keep the hue and saturation and change only the lightness: hsl(11, 100%, 60%) → hsl(11, 100%, 45%). To build a palette of related colors, keep saturation and lightness and change the hue.

HEX is the most compact and is what most design tools export. RGB(A) is handy when you need transparency in older code. All modern browsers support every format here, so pick the one your team finds easiest to read.

Below the formats, the tool shows the contrast ratio of your color with white text and with black text, and the preview uses whichever reads better. The Web Content Accessibility Guidelines (WCAG 2) recommend:

• at least 4.5:1 for normal body text (level AA),
• at least 3:1 for large text (about 24px, or 19px bold) and for icons and UI controls,
• 7:1 for the stricter AAA level.

A bright orange like #FF5733 reaches only about 3.1:1 with white text, which is fine for a large heading or a button icon but too low for small text. Darken it slightly, or use black text on it instead.

Color	HEX	RGB	HSL
White	#FFFFFF	255, 255, 255	0°, 0%, 100%
Black	#000000	0, 0, 0	0°, 0%, 0%
Red	#FF0000	255, 0, 0	0°, 100%, 50%
Green (CSS lime)	#00FF00	0, 255, 0	120°, 100%, 50%
Blue	#0000FF	0, 0, 255	240°, 100%, 50%
Gray (CSS gray)	#808080	128, 128, 128	0°, 0%, 50%
Orange (CSS orange)	#FFA500	255, 165, 0	39°, 100%, 50%

Grays always have equal red, green and blue values, and 0% saturation in HSL. Note that the CSS keyword green is #008000, a darker shade than pure #00FF00, which CSS calls lime.