Hex to RGB and HSL: How to Convert Color Codes

To convert a hex color to RGB, split the six-digit code into three pairs and convert each pair from base 16 to base 10. For #22C55E, 22 is 34, C5 is 197 and 5E is 94, so the RGB value is rgb(34, 197, 94).

Our free hex, RGB and HSL converter does this instantly in every direction: edit any one format and the other two update. This guide shows the manual method for each conversion, explains what HSL's three numbers mean, and covers the CSS syntax for using the results.

Hex, RGB and HSL explained

All three formats describe the same colors. In CSS, each one specifies a color in the sRGB color space, as defined in the CSS Color Module. They differ only in how the numbers are written and how easy they are to adjust.

Format	Example	Range	Best for
Hex	#22C55E	00–FF per channel	Design handoff, brand guidelines
RGB	rgb(34, 197, 94)	0–255 per channel	Code, canvas drawing, adding transparency
HSL	hsl(142, 71%, 45%)	Hue 0–360°, saturation and lightness 0–100%	Making lighter, darker or muted variants

How to convert hex to RGB

A hex color is three two-digit hexadecimal numbers for red, green and blue. Hex digits run from 0 to 9 and then A=10, B=11, C=12, D=13, E=14, F=15. Each pair equals the first digit × 16 plus the second digit:

#22C55E
22 = 2 × 16 + 2   =  34  (red)
C5 = 12 × 16 + 5  = 197  (green)
5E = 5 × 16 + 14  =  94  (blue)

Result: rgb(34, 197, 94)

Three-digit shorthand doubles each digit first: #F80 means #FF8800, which is rgb(255, 136, 0).

How to convert RGB to hex

Reverse the process. Divide each channel by 16: the whole-number result is the first hex digit and the remainder is the second. For 197, 197 ÷ 16 = 12 remainder 5, which gives C5. Pad single digits with a leading zero, so 9 becomes 09.

How HSL works

HSL describes a color the way people talk about it:

• Hue is the position on the color wheel in degrees: 0 is red, 120 is green and 240 is blue.
• Saturation is the intensity: 0% is gray and 100% is the most vivid version of the hue.
• Lightness runs from 0% (black) through 50% (the pure color) to 100% (white).

To convert RGB to HSL, scale each channel to 0–1, find the largest and smallest values, and apply these steps:

1. Lightness = (max + min) ÷ 2.
2. If max equals min, the color is gray: saturation and hue are 0.
3. Otherwise, saturation = (max − min) ÷ (1 − |2 × lightness − 1|).
4. Hue depends on which channel is largest. If green is largest, hue = 60 × ((blue − red) ÷ (max − min) + 2).

For #22C55E, the scaled values are red 0.133, green 0.773 and blue 0.369. Lightness is 0.453, saturation is 0.706, and hue is 60 × (0.368 + 2) = 142. The result is hsl(142, 71%, 45%).

HSL's advantage is that you can build a palette by changing one number. Keep the hue and saturation, then lower the lightness to 35% for a hover state or raise it to 90% for a soft background.

How to use the Hex, RGB & HSL Converter

1. Open the color converter. Pick a color with the swatch, or type a hex code in the Hex field. Six digits, three-digit shorthand, and codes with or without # all work.
2. Or type into the RGB field as comma-separated values, such as 34, 197, 94. Wrapping them in rgb() also works.
3. Or type into the HSL field as 142, 71%, 45%, with percent signs on saturation and lightness. Wrapping them in hsl() also works.
4. The other two fields and the preview swatch update as you type. The Current Values panel shows all three formats together.
5. If a value cannot be read, a message shows the expected format, for example "Enter RGB as three values from 0 to 255, like 34, 197, 94." Values out of range, such as 256 or 101%, are refused rather than clipped.

Two limits to know. The converter shows HSL as whole numbers, so converting from HSL can shift a channel by one: 142, 71%, 45% becomes #21C45D rather than #22C55E. Keep the hex value as your source of truth. The tool also works with solid colors only, so it does not read 8-digit hex codes, alpha values or the space-separated CSS syntax.

Using hex, RGB and HSL in CSS

Every modern browser accepts all three formats, in both the classic comma syntax and the newer space-separated syntax:

color: #22c55e;
color: rgb(34 197 94);
color: hsl(142 71% 45%);

/* 50% transparent */
background: rgb(34 197 94 / 0.5);
background: rgba(34, 197, 94, 0.5);
background: #22c55e80;

In the 8-digit hex form, the last pair is the alpha channel: 80 is 128 out of 255, about 50% opacity. Transparent colors are common in shadows, and the CSS box shadow generator builds the rgba() value for you, as covered in our guide to CSS box shadows.

Tips for working with color codes

• Case does not matter. #22C55E and #22c55e are the same color. Pick one style and use it consistently.
• Equal lightness does not mean equal brightness. HSL yellow and blue at 50% lightness look very different to the eye, so do not judge readability by the lightness number.
• Check text colors for contrast. Paste the hex values into the color contrast checker to confirm they meet WCAG, and read our guide to WCAG contrast ratios.
• Gray has no hue. Any color whose red, green and blue values are equal, such as #808080, has 0% saturation, and its hue is reported as 0.

Frequently asked questions

How do I convert hex to RGB?

Split the hex code into three pairs and convert each from base 16 to base 10 by multiplying the first digit by 16 and adding the second. #22C55E becomes rgb(34, 197, 94).

Is #FFF the same as #FFFFFF?

Yes. Three-digit hex is shorthand in which each digit is doubled, so #FFF equals #FFFFFF (white) and #F80 equals #FF8800.

What is the difference between RGB and HSL?

RGB defines a color by mixing red, green and blue light from 0 to 255. HSL defines the same color by hue, saturation and lightness, which makes it easier to create lighter or darker variants.

How do I add transparency to a hex color?

Add a fourth pair for alpha, such as #22c55e80 for about 50% opacity, or use rgb(34 197 94 / 0.5). Both are supported in modern browsers.

Which color format should I use in CSS?

Use whichever your team reads most easily, since browsers treat them the same. Hex is the most common for fixed brand colors, while HSL is convenient for building tints and shades.

Are hex color codes case-sensitive?

No. Uppercase and lowercase hex digits represent the same values, so #FF5733 and #ff5733 are identical.