Color Converter
The color #ff0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%). This color converter reads a HEX, RGB, or HSL value and returns the same color in all three formats. Paste a value such as #3b82f6, rgb(59, 130, 246), or hsl(217, 91%, 60%), then read the matching codes and a live swatch.
Quick answer
HEX writes each red, green, and blue channel as a two-digit base-16 number from 00 to ff.
What this tells you
- •HEX writes each red, green, and blue channel as a two-digit base-16 number from 00 to ff.
- •RGB writes the same three channels as decimal numbers from 0 to 255.
- •HSL describes a color by its hue in degrees, its saturation as a percent, and its lightness as a percent.
- •All three formats point to the same color, so the converter just rewrites the values without changing what you see.
How to Use
- 1Type or paste a color in any supported format. The default value is the blue #3b82f6.
- 2Use a hex code like #ff0000 or f00, an rgb value like 255,0,0 or rgb(255, 0, 0), or an hsl value like 0,100%,50% or hsl(0, 100%, 50%).
- 3Select Convert to read the HEX, RGB, and HSL versions of the same color.
- 4Check the swatch above the results to confirm the color looks right.
How It Works
Formula
RGB channel = base-16 value of each hex pair (00 to ff = 0 to 255). HSL is derived from normalized RGB where lightness = (max + min) / 2A hex code splits into three pairs, and each pair is a base-16 number for the red, green, and blue channel from 0 to 255. To find HSL, divide each channel by 255, take the largest and smallest of the three, set lightness to their average, derive saturation from their spread, and set hue from which channel is largest. For example #ff0000 has channels 255, 0, 0, so lightness is (1 + 0) / 2 = 0.5, which prints as 50 percent.
Calculation note: values are processed in the order shown above, using the current input units.
Worked Examples
Hex to RGB and HSL
ff is 255, and the two 00 pairs are 0, so the color is pure red. Red sits at hue 0 with full saturation and 50 percent lightness.
RGB to hex
0 is 00 and 128 is 80 in base 16, so the hex code is #008000. The low lightness of 25 percent shows this is a dark green.
HSL to hex
Hue 240 with full saturation and 50 percent lightness is pure blue, which is 0000ff in hex.
Common Color Conversions
Quick reference for the primary and secondary colors plus black and white.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
Each row shows the same color written in all three formats.
Common mistakes
- Leaving off the leading hash is fine, but a stray invalid character like a letter past f makes the hex code fail.
- Mixing up 3-digit and 6-digit hex. The 3-digit form #f00 doubles each digit to #ff0000, so #f00 and #ff0000 are the same color.
- Forgetting the percent signs on the saturation and lightness in HSL. The values 0,100%,50% need the percent marks while the hue does not.