Color converter
RGB to HSL and HSL to RGB
Type an RGB value or an HSL value, and the other one appears as you type. Every other notation of the same color is listed below, with each step of the maths.
The converter needs JavaScript. The values shown are for #D3AF37, and the worked examples below read without it.
Result
Inside sRGB
Showing the last color that converted.
- RGB
rgb(211 175 55)- HSL
hsl(46.2 63.9% 52.2%)- HEX
#D3AF37- OKLCH
oklch(76.55% 0.13847 91.55)
Color converters
Every format at once
The same color in every notation the converters know. Each name opens its own converter.
| Format | Value | Copy |
|---|---|---|
| Web and CSS | ||
| HEX CSS | #D3AF37 | |
| RGB CSS | rgb(211 175 55) | |
| sRGB (0 to 1) CSS | color(srgb 0.8275 0.6863 0.2157) | |
| Linear sRGB CSS | color(srgb-linear 0.65141 0.42869 0.0382) | |
| HSL CSS | hsl(46.2 63.9% 52.2%) | |
| HSV (HSB) Notation | hsv(46.2 73.9% 82.7%) | |
| HWB CSS | hwb(46.2 21.6% 17.3%) | |
| CSS color name CSS | goldenrodNearest ΔE00 5.00 | |
| Perceptual and CIE | ||
| OKLCH CSS | oklch(76.55% 0.13847 91.55) | |
| OKLab CSS | oklab(76.55% -0.00375 0.13842) | |
| CIELAB CSS | lab(73.19 4.7 62.68) | |
| CIE LCH CSS | lch(73.19 62.86 85.71) | |
| CIE XYZ (D65) CSS | color(xyz-d65 0.42882 0.44786 0.1) | |
| CIE XYZ (D50) CSS | color(xyz-d50 0.45463 0.45457 0.07797) | |
| CIE xyY Notation | xyY(0.43906 0.45855 0.44786) | |
| CIELUV Notation | luv(72.75 30.75 69) | |
| Wide gamut | ||
| Display P3 CSS | color(display-p3 0.80472 0.69157 0.30739) | |
| Rec. 2020 CSS | color(rec2020 0.74174 0.66017 0.25864) | |
| Adobe RGB (1998) CSS | color(a98-rgb 0.78545 0.68035 0.26584) | |
| ProPhoto RGB CSS | color(prophoto-rgb 0.67408 0.63343 0.26964) | |
| Print and paint | ||
| CMYK Notation | cmyk(0% 17.1% 73.9% 17.3%) | |
| RAL Classic Notation | RAL 1032 Broom yellowNearest ΔE00 3.02 | |
| Video | ||
| YCbCr (JPEG, BT.601) Notation | ycbcr(172.08 61.93 155.76) | |
| YCbCr (HD video, BT.709) Notation | ycbcr709(165.43 71.67 148.64) | |
| Code and platforms | ||
| Decimal integer Notation | 13872951 | |
| Android and Flutter ARGB Notation | 0xFFD3AF37 | |
| Android color int Notation | -2904265 | |
| SwiftUI and UIKit Notation | Color(red: 0.8275, green: 0.6863, blue: 0.2157) | |
| GLSL vec3 / vec4 Notation | vec3(0.8275, 0.6863, 0.2157) | |
| Embedded and terminal | ||
| RGB565 Notation | 0xD567Lossy | |
| ANSI 256 (xterm) Notation | 38;5;178Nearest ΔE00 3.11 | |
Every step of the maths
How RGB becomes HSL
Each step shows the values for the color above, as the converter computes them.
- Start rgb()
rgb(211 175 55) - Back 8-bit channels
the three numbers are the bytes211 175 55 - Back sRGB channels, 0 to 1
each byte ÷ 2550.8275 0.6863 0.2157 - Then HSL
L = (max + min) / 2; S = (max − min) / (1 − |2L − 1|); H from the largest channelhsl(46.2 63.9% 52.2%)
HSL
About HSL
HSL describes an sRGB color by its hue as an angle, then saturation and lightness as percentages. It is easy to reason about, but its lightness is not what the eye sees: a yellow and a blue at the same L look very different.
How this page writes it
- Writes the hue to one decimal place and saturation and lightness as percentages to one decimal place; a gray has no hue and is written as none.
- Reads hsl() and hsla(), with commas or spaces, and hue units deg, grad, rad and turn.
Watch for
- At one decimal place HSL brings back every 8-bit color exactly; rounded to whole numbers, many come back a step off.
Worked examples
RGB to HSL
Each row is the converter's own output, and a test re-runs every row.
| Color | RGB | HSL |
|---|---|---|
| White | rgb(255 255 255) | hsl(none 0% 100%) |
| Black | rgb(0 0 0) | hsl(none 0% 0%) |
| Middle gray | rgb(128 128 128) | hsl(none 0% 50.2%) |
| Red | rgb(255 0 0) | hsl(0 100% 50%) |
| Green | rgb(0 255 0) | hsl(120 100% 50%) |
| Blue | rgb(0 0 255) | hsl(240 100% 50%) |
| Royal blue | rgb(37 99 235) | hsl(221.2 83.2% 53.3%) |
| Gold | rgb(211 175 55) | hsl(46.2 63.9% 52.2%) |
Next
Related converters
- HEX and RGBHex codes, rgb() and alpha
- HEX and OKLCHPerceptual color and gamut
- HEX and HSLHue, saturation and lightness
- HSL and HSVHue, saturation and value, also called HSB
- HEX and sRGBcolor(srgb), channels from 0 to 1
- HEX and Linear sRGBLight before gamma encoding
- All color convertersPaste a color in any notation the converters read, and see it in all of them.
Method
Sources and testing
- CSS Color Module Level 4, 5.1: the rgb() and rgba() functions w3.org
- CSS Color Module Level 4, 7: HSL colors w3.org
- Conversions run in your browser with the site's shared color code; nothing you type is sent anywhere.
- An automated test recomputes every value on this page and reads every format back.
- Checked with a keyboard, the axe engine and Playwright in Chromium, in light and dark themes at phone and desktop widths. It has not yet been checked with a screen reader.
Found a mistake? Tell us and we will correct it.