Color Converter — HEX, RGB, HSL, HSV

Type or pick a colour to instantly see its HEX, RGB, HSL and HSV representations. The conversion is computed locally in your browser — nothing is uploaded.

Why convert between colour spaces?

Each colour space serves a different purpose. HEX is compact and universally supported in CSS and design tools. RGB is the native space of every screen and is the format expected by many APIs. HSL (hue, saturation, lightness) and HSV (hue, saturation, value) are designed for humans — they make it easy to reason about how light or saturated a colour is, which is far less intuitive in HEX or RGB.

When designing an interface, you often start in HSL to derive a consistent palette (same hue, varying lightness for shades), then export the final values in HEX for use in code. This converter lets you bounce freely between the four representations without losing precision.

How to use this tool

Type any colour in the input field — HEX (#3b82f6 or #38f), rgb(), rgba(), hsl(), hsla() or hsv() are all accepted.
Or use the native colour picker on the left to pick visually.
Click "Random" to generate a random colour and see all its representations at once.
Copy any of the four output formats with the Copy button next to it.

Frequently asked questions

Which input formats are recognised?

Hexadecimal (3, 6, or 8 digits, optional # prefix), rgb()/rgba(), hsl()/hsla() with or without the percent sign, and hsv(). The alpha channel is parsed but not currently displayed in the converted outputs.

What is the difference between HSL and HSV?

Both express colour as Hue / Saturation / something. The third component differs: in HSL it is Lightness (0% black, 50% pure colour, 100% white), in HSV it is Value (0% black, 100% pure colour). HSL is symmetric around 50%, HSV is closer to how a paint mix behaves.

Why does my converted colour look slightly off?

Conversions between integer-rounded RGB and percent-rounded HSL/HSV are not perfectly lossless. For most UI work the difference is invisible, but if you need exact round-tripping, treat HEX/RGB as the source of truth and recompute HSL/HSV from it.

Are color names like 'red' or 'tomato' supported?

Not yet. CSS named colours add ~150 mappings that are easy to support — we will add them in a future update. In the meantime you can paste the HEX equivalent.

Is the alpha channel supported?

It is parsed (rgba/hsla input is accepted) but only the RGB part is converted. Full alpha-aware conversion across all four spaces is on the roadmap.