Color Converter

About this tool

Web colors are commonly written as HEX, RGB or HSL, and converting between them by hand invites rounding errors. The Color Converter accepts a HEX value, previews the color and returns matching RGB and HSL representations for use in CSS, design documentation and code.

HEX and RGB describe the same red, green and blue channels in different notation. HSL reorganizes the color into hue, saturation and lightness, which can be easier to adjust systematically. Conversion does not guarantee accessible contrast; always test foreground and background combinations at the actual font size. Use the result with the CSS Gradient Generator or the site's other visual CSS tools.

How to use it

1. Enter a three- or six-digit HEX color, including the leading hash where possible.
2. Use the color picker when you want to explore visually rather than type a value.
3. Run the conversion and review the RGB channels and HSL values.
4. Copy the notation that best matches your stylesheet or design-token system.
5. Test the color in context and verify contrast for text and interactive controls.

Useful ways to apply it

• Converting a designer's HEX value into RGB or HSL CSS syntax.
• Creating HSL-based color variations while preserving a shared hue.
• Checking whether shorthand HEX expands to the expected full value.
• Documenting brand colors in several development-friendly formats.
• Supplying exact colors to gradient, shadow and filter experiments.

Worked example

#FF8A24

RGB 255, 138, 36; HSL 28, 100%, 57%

Edge cases to check

• Three-digit HEX is expanded before conversion.
• HSL values are rounded for display, so converting the rounded display back may not reproduce every intermediate floating-point value.
• Alpha-channel HEX forms are outside this converter.

Known limitations

The tool converts common sRGB HEX colors to RGB/HSL; it does not perform color-management conversion between wide-gamut spaces such as Display-P3 or Lab.