Convert a Brand Color Between HEX, RGB and HSL

Read a six-digit HEX value

HEX #336699 pairs 33, 66 and 99 into red, green and blue channels. Converting each base-16 pair gives 51, 102 and 153. The RGB representation is rgb(51, 102, 153). A short form such as #369 expands to #336699, not #030609.

Inspect the HSL relationship

Normalize the channels to 0.2, 0.4 and 0.6. Maximum is 0.6 and minimum 0.2, so lightness is (0.6 + 0.2)/2 = 0.4. The hue is 210 degrees and saturation 50%, yielding hsl(210, 50%, 40%). Use channel precision before formatting a rounded HSL result.

Treat gray and black as special cases

When all three RGB channels are equal, saturation is zero and hue does not identify a distinct visible color. Black is lightness zero; white is lightness 100%. A formatter may choose a conventional hue of zero for achromatic colors, but that hue is not a unique property of the gray.

Check accessibility in a separate calculation

HSL lightness is not the relative luminance used in WCAG contrast calculations. Two colors at the same HSL lightness can have different perceived brightness. Convert the notation first, then check text and background contrast using the appropriate sRGB linearization and contrast equation.

Keep alpha, profiles and print separate

The tool’s opaque color conversion should not be interpreted as a complete color-management workflow. Transparency requires a compositing background, and wide-gamut profiles or CMYK printing introduce separate conversions. Test the final CSS value in the actual interface rather than judging accessibility from the color swatch alone.

Check a second RGB color by channel arithmetic

For rgb(240, 128, 16), the hexadecimal channel pairs are F0, 80 and 10, giving #F08010. Normalized maximum and minimum channels are 240/255 and 16/255. Their mean gives HSL lightness 128/255 = 50.196078…%. Hue is thirty degrees because the green channel lies halfway through the red-to-yellow sector. Saturation is 224/254 = 88.188976…%, which should be rounded only when formatting the HSL text.

This example differs from an idealized fully saturated orange. Entering hsl(30,100%,50%) produces RGB channels 255, 127.5 and zero before eight-bit rounding, so the output is rgb(255, 128, 0), or #FF8000. Similar hue does not mean identical channels. A notation conversion should preserve the specified color model, not substitute a visually familiar named color for the entered value.

Read wraparound and achromatic values correctly

A hue of 390 degrees wraps to thirty, so hsl(390,100%,50%) converts to the same #FF8000 result. A hue of −330 degrees also wraps to thirty. Saturation and lightness remain bounded percentages, not angles, and do not wrap. Inputs above 100% or below zero for those two quantities are rejected. The parser supports its documented comma-separated HSL syntax, not every modern CSS color expression.

For #808080, all three channels are 128, saturation is zero and lightness is 128/255 = 50.196078…%. Hue is conventionally formatted as zero because it has no visible effect at zero saturation. The gray is not exactly fifty-percent lightness in eight-bit channel arithmetic. Black and white are the zero and full lightness endpoints; a hue label at either endpoint should not be treated as evidence of a distinct visible tint.

Expect bounded round-trip differences from channel rounding

The HSL input path produces continuous channel values and then rounds each to an integer from zero through 255. When the result is converted back to HSL, the reported percentages describe those rounded channels. They can differ slightly from the original HSL percentages. For the idealized orange, rounding green from 127.5 to 128 causes its recovered hue to be approximately 30.117647 degrees rather than exactly thirty.

Each independently rounded channel differs from its pre-rounding value by at most half a channel unit. That is a quantization bound, not a guaranteed perceptual error or display accuracy. Keep the original design token if an exact HSL parameter needs to be reused, and keep the returned HEX token if the eight-bit RGB representation is authoritative. Repeatedly converting and overwriting tokens can make formatting changes appear to be intentional design changes.

Separate color notation from interface acceptance checks

Save a color record with the original notation, normalized RGB channels, HEX value and intended use. Check a text color against its actual background rather than judging it from an isolated swatch. HSL lightness is not the luminance used by contrast calculations, and identical lightness percentages do not establish identical perceived brightness. The notation converter does not return an accessibility pass or fail and should not be used as a substitute for that separate check.

The supported values are opaque sRGB-style channels. Alpha compositing needs a background; wide-gamut profiles and print inks need different models. The parser excludes alpha syntax, percentage RGB channels and space/slash color expressions instead of guessing their interpretation. After conversion, verify the intended CSS token in its actual interface and maintain descriptive text alongside color-dependent meaning. A correct channel conversion alone does not confirm the whole design is usable.