Convert HEX, RGB, and HSL without losing track of rounding

Three ways to describe an sRGB color

HEX groups red, green, and blue into hexadecimal pairs. RGB writes those channels as decimal values. HSL expresses the same sRGB color using hue, saturation, and lightness. Converting notation is useful when moving a design token into CSS or adjusting a color by hue, but it does not change a monitor's calibration or expand the color's gamut.

HaloBench's Color Converter keeps integer RGB channels from 0 to 255, accepts three- or six-digit HEX with an optional #, and displays whole-number HSL values. It provides separate H, S, and L number fields. It does not parse an entire CSS stylesheet, named colors, alpha channels, or wide-gamut color notation.

Decode #D9FF68 into RGB

Split D9FF68 into D9, FF, and 68. A hexadecimal pair represents first digit × 16 + second digit. D is 13 and F is 15, giving red = 13 × 16 + 9 = 217, green = 15 × 16 + 15 = 255, and blue = 6 × 16 + 8 = 104. Therefore #D9FF68 and rgb(217, 255, 104) describe exactly the same three channel values.

Three-digit shorthand repeats each digit; it does not append zeros. #0F8 expands to #00FF88, which is rgb(0, 255, 136). A six-digit value can be shortened only if both digits in every pair are identical. #D9FF68 cannot be shortened because D9 and 68 do not meet that rule.

Derive the HSL values for the same example

Normalize the RGB channels by dividing by 255. For #D9FF68, the largest channel is green at 1 and the smallest is blue at 104/255. Let the difference be Δ = 151/255. Lightness is (maximum + minimum) / 2 = 359/510, or approximately 70.392157%.

Saturation is Δ / (1 − |2L − 1|). Here the denominator equals Δ, so saturation is 100%. Since green is the largest channel, hue is 60 × ((blue − red) / Δ + 2), approximately 75.099338 degrees. HaloBench rounds the three displayed components to hsl(75, 100%, 70%). These rounded values are convenient for editing but are not an exact replacement for the original RGB channels.

#D9FF68
rgb(217, 255, 104)

H ≈ 75.099338°
S = 100%
L ≈ 70.392157%

HaloBench display: hsl(75, 100%, 70%)

Why converting back can produce #D9FF66

Keeping only whole-number HSL values discards precision. If hsl(75, 100%, 70%) is converted back using HaloBench's nearest-integer RGB conversion, the result is rgb(217, 255, 102), or #D9FF66. The blue channel is 2 lower than the original 104. This is an expected rounding effect, not evidence that HEX and RGB disagree.

For an exact existing brand color, retain the original HEX or RGB as the source of truth. Use HSL as an editing aid, then save the resulting HEX when the new color is intentional. Repeatedly editing HSL fields can introduce further changes because the converter recalculates from its rounded displayed components.

Move a color into your project

Choose whether the task is preserving an exact color or creating a variation before changing any fields. A visual preview is useful, but a small channel difference can be difficult to see on a bright or uncalibrated display.

1. Paste a three- or six-digit HEX value into HaloBench Color Converter. The # is optional. An incomplete or invalid HEX leaves the last valid preview in place, so check that the input no longer shows an error.
2. Read the R, G, and B fields to verify the conversion. For #D9FF68, expect 217, 255, and 104.
3. If the task is an exact conversion, copy the HEX or RGB line from Color values and use that in your CSS or design token.
4. If creating a variant, adjust H, S, or L and compare the new preview. Record the resulting HEX once the change is deliberate.
5. Inspect the color in the real interface, including text, borders, and its surrounding background. Verify contrast separately before using it for information or controls.

Inputs and assumptions that can cause surprises

CSS supports four- and eight-digit HEX for transparency, but this converter accepts only three or six digits. #D9FF6880 and rgba(217, 255, 104, 0.5) are therefore outside its input model. Convert the opaque base color and manage alpha separately in a tool that explicitly supports it; dropping alpha changes how the color blends with a background.

RGB inputs are rounded and clamped to 0–255. HSL saturation and lightness are clamped to 0–100, while hue wraps around the 360-degree circle. For a gray where all RGB channels are equal, saturation is zero and the tool displays hue as zero; that hue does not make the gray red.

HSL lightness is not perceived brightness or the relative luminance used in accessibility contrast calculations. Two colors with the same L can have different readability. This converter does not calculate a contrast ratio, simulate color-vision differences, or convert Display P3, CMYK, or OKLCH colors.

Try it in the tools

Technical references

• W3C CSS Color 4: hexadecimal RGB and HSL notation
• MDN: HSL syntax and color components

Found an incorrect result or an unclear step? Send a correction with the input, expected result, and browser version. Do not include private files or credentials.