Color Format Converter
Color Format Converter translate css color notation hex rgb hsl equivalent change color code format#336699rgb(51, 102, 153)hsl(210, 50%, 40%)Translate a screen color without changing it
Type or paste one opaque sRGB color in HEX, RGB, or HSL notation, or choose one with the color picker. Select Convert color to see the same color in all three formats, then copy the notation your stylesheet, design note, or handoff needs.
Accepted color syntax
HEX accepts three or six hexadecimal digits after #. RGB uses three comma-separated whole-number channels from 0 through 255. HSL uses a hue from 0 through 360 and saturation and lightness from 0% through 100%. Examples include #369, rgb(51, 102, 153), and hsl(210, 50%, 40%). Alpha values, CSS color names, space-separated CSS syntax, and variables are intentionally rejected so an accepted value has one unambiguous interpretation.
How conversion works
Every accepted value is normalized to red, green, and blue sRGB channels. HEX writes those channels in base 16. RGB writes the same channels as decimal integers. HSL is calculated from the largest and smallest normalized RGB channels: lightness is their midpoint, saturation measures their separation at that lightness, and hue identifies which channel leads around the color wheel.
Worked example
Enter #336699. Its channel pairs are 33, 66, and 99 in hexadecimal, equal to 51, 102, and 153 in decimal. The results are #336699, rgb(51, 102, 153), and hsl(210, 50%, 40%). All three describe the same blue on an sRGB display.
Rounding and practical use
HEX and RGB retain exact 8-bit channel values. HSL hue and percentages are rounded to two decimal places and trailing zeros are removed. That makes the result readable, but an HSL value converted back to RGB can occasionally land one channel away because the displayed HSL was rounded. Keep HEX or RGB when exact round trips matter.
Limitations and privacy
Conversion runs entirely in this browser; the page does not upload the entered color. Scope is opaque, 8-bit sRGB only. It does not convert alpha, named colors, print inks such as CMYK, ICC profiles, HDR values, or wide-gamut spaces such as Display P3. Matching numbers also cannot guarantee identical appearance on uncalibrated screens.
Color Format FAQ
Does converting a color improve its quality?
No. Notation changes, while underlying sRGB channels stay the same.
Why is shorthand #369 expanded?
Each shorthand digit is duplicated, so #369 is exactly #336699.
Can I paste a CSS variable?
No. Resolve the variable to a supported literal color first.