ToolFox

Color Converter

Convert colors between HEX, RGB and HSL formats instantly, with a live swatch preview.

HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)

How it works

The tool accepts a color in any of three common formats — #rrggbb hex, rgb(r, g, b), or hsl(h, s%, l%) — parses it into red/green/blue components, and derives the other two formats from that: HEX is each channel written as a two-digit base-16 number; HSL is computed with the standard hue-saturation-lightness formulas, where lightness is the midpoint of the brightest and darkest channel and hue comes from which channel is largest.

Example

ff8800 (a vivid orange) is rgb(255, 136, 0) and hsl(32, 100%, 50%). Going the other way, rgb(79, 70, 229) converts to the hex #4f46e5 — the indigo used in many UI design systems.

Frequently asked questions

What formats can I paste in?

A 3- or 6-digit hex code (with or without the leading #), rgb(...) / rgba(...), or hsl(...) / hsla(...) — the tool auto-detects which format you typed.

What happens if I type an invalid color?

The tool shows a message asking for a valid hex, rgb() or hsl() value instead of guessing — it never silently shows a wrong color.

Why do HEX and RGB always match exactly, but HSL can look slightly different from other converters?

HSL involves floating-point calculations rounded to whole numbers for readability; different tools may round at a different step, giving results that differ by 1 in rare cases.

Can I copy the result straight into my CSS?

Yes — each format has its own Copy button, so you can grab hex, rgb() or hsl() exactly as written, ready to paste into a stylesheet.

Related tools