Color Converter
Convert a colour between hex, RGB and HSL notation, using the conversions in the CSS Color Module Level 4 specification.
Result
RGB: rgb(255, 128, 0)
Hex and RGB hold whole channels from 0 to 255, so a colour entered as HSL is rounded to the nearest one. The unrounded channels are shown when that happens.
- Hex
- #ff8000
- HSL
- hsl(30.1, 100%, 50%)
https://calcgallery.com/notation-conversions/color-converter-calculator/
Unit conversions follow from exact definitions and published notation rules. Sizes follow published standards and are approximate: makers grade their own, so check their chart. Figures are rounded only for display. Read the full disclaimer
How to use the Color Converter
- Choose what you have. A hex code looks like
- Enter the colour. Hex codes can have three or six digits, with or without the
- Read the same colour in the other two notations, ready to paste into CSS, and check it against the swatch.
Three notations, one colour space
All three notations describe a colour in sRGB, the colour space these CSS notations are defined in. RGB gives the red, green and blue channels directly as whole numbers from 0 to 255. Hex is the same three numbers written in base 16, two digits each. HSL rearranges the same colours around a colour wheel: hue is the angle round the wheel, saturation how far from grey, and lightness how far from black to white.
The page follows the conversions published in the W3C’s CSS Color Module Level 4, the specification browsers implement. From HSL, it computes each channel with the specification’s function:
k(n) = (n + hue ÷ 30) mod 12a = saturation × min(lightness, 1 − lightness)f(n) = lightness − a × max(−1, min(k − 3, 9 − k, 1))red, green, blue = f(0), f(8), f(4), each × 255The reverse takes the largest and smallest channel: lightness is their average, saturation is how far the largest sits above the lightness relative to the room available, and hue depends on which channel is largest.
Rounding
Only the final step rounds. Channels from HSL are rounded half up to whole numbers for hex and RGB, and HSL values are shown to one decimal place. The hex code is written in lower case, as CSS writes it back out; upper case means exactly the same colour.
With your numbers
- Each pair of hex digits is one channel, 00 to ff: rgb(255, 128, 0)
- HSL = hsl(30.1, 100%, 50%)
- Hex = #ff8000
Quick reference
Hex and RGB hold whole channels from 0 to 255, so a colour entered as HSL is rounded to the nearest one. The unrounded channels are shown when that happens.
| Example | Result |
|---|---|
| #ff8000, orange | RGB: rgb(255, 128, 0) |
| #123, short form | RGB: rgb(17, 34, 51) |
| #808080, grey | RGB: rgb(128, 128, 128) |
| RGB 51, 102, 153 | Hex: #336699 |
| RGB 255, 255, 255, white | Hex: #ffffff |
| HSL 120, 100%, 25% | Hex: #008000 |
| HSL 210, 50%, 40% | Hex: #336699 |
| HSL 0, 100%, 50%, red | Hex: #ff0000 |
Common questions about the Color Converter
- How do I convert hex to RGB?
- Split the six digits into three pairs and read each pair as a base-16 number. In #ff8000, ff is 255, 80 is 128 and 00 is 0, so the colour is rgb(255, 128, 0). A three-digit code doubles each digit first: #123 is #112233.
- How do I convert RGB to hex?
- Write each channel as two hex digits and join them. 51 is 33, 102 is 66 and 153 is 99, so rgb(51, 102, 153) is #336699. The hex calculator shows the base conversion step by step.
- Why does converting HSL and back give a slightly different HSL?
- Hex and RGB hold whole numbers from 0 to 255, but HSL can describe colours between them. hsl(120, 100%, 25%) needs a green channel of 127.5, which has to become 128. Converting 128 back gives a lightness of 25.1%. The page shows the unrounded channels whenever this happens.
- What hue does a grey have?
- None. With no saturation every hue gives the same grey, so the specification leaves hue undefined. The page writes it as 0, as the specification does when a missing value has to be written as a number.
- Does this work for print colours or other colour spaces?
- No. Hex, RGB and HSL all describe the same sRGB screen colours. CMYK for print depends on the printer, ink and paper profile, so there is no single formula for it, and the page does not attempt one.