Converters

Color Converter

Translate an opaque sRGB hexadecimal color into channel values and rounded HSL for CSS work.

Local processing

Loading tool workspace...

About this tool

When to use it

Translate an opaque sRGB hexadecimal color into channel values and rounded HSL for CSS work.

How to use it

Enter a three- or six-digit HEX color, or select one in the picker. Select Convert color for typed text and compare the swatch with RGB and HSL. Copy values into a stylesheet after checking them against the surrounding design.

Guide updated 2026-09-15. Examples checked against this implementation.

Worked examples

Expand shorthand red

Input

#f00

Expected output

#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

Each shorthand digit expands to two digits. HSL describes the same opaque color; it is not a contrast rating.

Errors and unsupported input

#ff000080

Use three or six HEX digits. Alpha transparency is not supported in this workspace.

Continue this workflow

SVG Placeholder Generator: Use the colors in a simple SVG placeholder.

Questions

Frequently asked questions

Does a matching RGB value guarantee accessible text?

No. Readability depends on the foreground/background combination, text size, and contrast, which this converter does not evaluate.