What color formats does this convert between?

HEX (e.g. #3b82f6), RGB (e.g. rgb(59, 130, 246)), and HSL (e.g. hsl(217, 91%, 60%)).

Can I enter any HEX color?

Yes. Enter a 6-digit hex code with or without the # symbol.

HSL stands for Hue, Saturation, Lightness — an alternative color model that's often more intuitive for adjusting colors than RGB.

Why does the color picker not match my exact hex?

Some browsers limit the native color picker to sRGB. You can always type the hex value directly in the text field.

Why does CSS support HSL alongside HEX and RGB?

HSL maps to how humans think about color: hue (which color), saturation (how vivid), lightness (how bright). Adjusting HSL produces predictable results — useful for hover states, theme variants, and accessibility tweaks where RGB feels unintuitive.

When should I use OKLCH instead of HSL?

OKLCH is perceptually uniform — equal numeric changes look like equal visual changes. Modern design systems (Tailwind v4, Radix Colors) are moving to OKLCH for accessible contrast tuning. HSL is still fine for most legacy CSS.

Color Converter

Converters· 6 tools

Free online color converter. Convert any color between HEX, RGB, and HSL formats with a live color preview. Simply enter a color value and instantly get all three formats. Essential tool for web designers and developers.

#3B82F6

rgb(59, 130, 246)

hsl(217, 91%, 60%)

HEX

RGB

R (0–255)

G (0–255)

B (0–255)

HSL

H (0–360)

S (0–100)

L (0–100)

Frequently Asked Questions

References

CSS Color Module Level 4 — W3C

Related Tools

Unit Converter
Convert length, weight, and temperature units instantly.
Number Base Converter
Convert numbers between decimal, binary, hexadecimal, and octal.
Roman Numeral Converter
Convert numbers to Roman numerals and back. Supports 1 to 3,999,999 with vinculum notation.

Frequently Asked Questions

References and sources

Related Tools