Color Converter
Convert a color between HEX, RGB and HSL notation in the sRGB space, with a preview swatch.
Updated Formula covered by automated tests
The same on-screen color can be written three common ways in CSS and design tools: as a hex code such as #1E90FF, as red, green and blue channel values such as rgb(30, 144, 255), or as hue, saturation and lightness such as hsl(210, 100%, 56%). This converter takes any one of those and shows the other two, with a swatch so you can confirm the color is the one you meant.
Front-end developers use it when a style guide gives a hex code but the stylesheet uses HSL custom properties, when building hover and disabled states from a brand color, or when a screenshot tool reports RGB and a design token file wants hex. Designers moving a palette between Figma, a slide template and a website hit the same problem.
All three notations describe colors in the sRGB space that browsers use by default, so converting between them changes the spelling, not the color, apart from small rounding effects explained below.
The formula
- d₁, d₂
- The two hexadecimal digits of a channel, where A = 10 through F = 15
- R′, G′, B′
- Channel values divided by 255, so each lies between 0 and 1
- max, min, Δ
- The largest and smallest of R′, G′, B′, and their difference Δ = max − min
- H
- Hue angle on the color wheel in degrees: 0 red, 120 green, 240 blue
- S, L
- Saturation and lightness as fractions, shown as percentages; when Δ = 0 the color is a gray and H and S are 0
Hex is simply base-16 RGB: each pair of digits is one byte, so #RRGGBB packs three 0-255 channels into six characters. Three-digit shorthand such as #0A5 doubles each digit to #00AA55.
HSL and its sibling HSV were published in 1978, by George Joblove and Donald Greenberg and by Alvy Ray Smith, as more intuitive ways to pick colors on a computer screen. It rearranges the RGB cube into a cylinder: the dominant channel sets the hue angle, the spread between the strongest and weakest channel sets saturation, and their midpoint sets lightness. The CSS Color specification defines the exact conversion this tool uses.
Converting back from HSL uses the inverse piecewise formula, then rounds each channel to a whole number. Because CSS HSL values are usually written as whole degrees and percentages, a round trip from RGB to HSL and back can shift a channel by a unit or two.
Worked example
Aisha is building a button for a site whose brand color is #1E90FF. She needs the HSL form so she can keep the same hue and raise the lightness to 80% for a pale background tint.
- 1 Hex to RGB: 1E = 1 × 16 + 14 = 30, 90 = 9 × 16 + 0 = 144, FF = 15 × 16 + 15 = 255, so rgb(30, 144, 255).
- 2 Scale to 0-1: R′ = 0.118, G′ = 0.565, B′ = 1.000; max = 1.000, min = 0.118, Δ = 0.882.
- 3 Lightness: (1.000 + 0.118) ÷ 2 = 0.559, or 56%. Saturation: 0.882 ÷ (1 − |2 × 0.559 − 1|) = 0.882 ÷ 0.882 = 100%.
- 4 Hue (max is blue): 60 × ((0.118 − 0.565) ÷ 0.882 + 4) = 60 × 3.493 = 209.6, rounded to 210°.
- 5 Tint: hsl(210, 100%, 80%) converts back to rgb(153, 204, 255), which is #99CCFF.
Result: The brand color is hsl(210, 100%, 56%), and the matching pale tint is #99CCFF. Keeping the hue at 210° is what makes the two read as the same family.
Before you rely on the result
- Only sRGB hex, RGB and HSL are handled. Wide-gamut spaces such as Display P3, and perceptual models such as OKLCH or CIELAB, are not converted.
- HSL lightness is not perceived brightness: hsl(60, 100%, 50%) yellow looks far lighter than hsl(240, 100%, 50%) blue at the same L. Do not use HSL lightness alone to judge text contrast; check the WCAG contrast ratio instead.
- How a color actually looks depends on the display, its calibration and the surrounding colors.
Frequently asked questions
Why does converting to HSL and back give me a slightly different hex code?
HSL is shown as whole degrees and percentages, and 1% of lightness is about 2.55 RGB steps, so the rounding can move a channel by one or two units. For example, #3B82F6 becomes hsl(217, 91%, 60%), which converts back to #3C83F6. Keep the original hex code as your source of truth and use HSL for adjustments.
Is 50% lightness the “pure” color?
Yes. At L = 50% and S = 100% the strongest channel is at 255 and the weakest at 0, so hsl(0, 100%, 50%) is pure red #FF0000. Raising L toward 100% mixes in white; lowering it toward 0% mixes in black.
Does the tool support transparency such as #RRGGBBAA or rgba()?
Not yet. The alpha channel is independent of the color conversion: an 8-digit hex code ends with an alpha byte where 80 means about 50% opacity, and you can carry that value across unchanged into rgba() or hsla().
Will the hex code look the same in print?
Not necessarily. Hex, RGB and HSL are screen colors in sRGB. Printers use CMYK inks with a smaller gamut, so saturated blues and greens often print duller. Ask your printer for a proof, or use a Pantone or CMYK value from your brand guide.
Sources
- W3C CSS Color Module Level 4 (w3.org)
- MDN Web Docs: hsl() (developer.mozilla.org)