Color Converter
Convert colors between HEX, RGB, HSL and HSV in real time. Type any format or use the picker and instantly see every other representation, with a live swatch preview.
Tints & shades (click to use)
#10b981rgb(16, 185, 129)hsl(160, 84%, 39%)hsv(160, 91%, 73%)≈ emerald2.54:1 · fail8.28:1 · AA passAbout the Color Converter
Designers and developers juggle several color models. HEX and RGB describe a color by its red, green and blue components, while HSL and HSV describe it by hue, saturation and lightness/value — which is often more intuitive for adjusting shades. Converting between them by hand is fiddly and error-prone.
This converter does the math instantly and shows a live swatch so you can confirm the result by eye. Everything runs in your browser, so it is fast and works offline once loaded.
Each model earns its place for a different job. HEX is the shorthand nearly every CSS stylesheet and design tool defaults to. RGB is what canvas APIs, image-processing code and most programming languages actually operate on internally. HSL is the one most developers reach for when programmatically adjusting a color — dropping the lightness value for a hover or disabled state is intuitive in a way that recalculating three RGB channels is not. HSV (also called HSB) shows up mainly in image-editing software color pickers like Photoshop's, where separating hue from a single brightness/value slider matches how people visually pick a shade.
All four formats support an alpha (transparency) channel too — RGBA and HSLA add a fourth value from 0 (fully transparent) to 1 (fully opaque), while 8-digit hex (#3b82f6ff) appends two extra hex digits for the same purpose. If your CSS needs transparency, the alpha variant is usually simpler to reason about than layering an opacity property separately.
How to use it
- 1Enter a color in any format, or use the picker.
- 2Read the equivalent HEX, RGB, HSL and HSV values.
- 3Copy the format you need.
Features
- Convert between HEX, RGB, HSL and HSV
- Live color preview swatch
- Built-in color picker
- Accepts #hex, rgb() and hsl() with shorthand
- One-click copy of any value
Frequently asked questions
How do I convert HEX to RGB?
Paste a hex value like #3b82f6 and the tool shows the equivalent rgb(59, 130, 246) immediately, along with HSL and HSV.
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL’s third channel is lightness (0=black, 100=white) while HSV’s is value/brightness. They describe the same colors with different math.
Does it support shorthand hex?
Yes. Three-digit shorthand like #f80 is expanded automatically to its six-digit form.
Is it free and private?
Yes. It is free, needs no signup, and converts entirely in your browser.
Which color format should I actually use in CSS?
HEX is the most common default and is compact for static colors. HSL is usually easier when you need to programmatically lighten, darken or desaturate a color, since you can adjust one channel directly instead of recomputing RGB.
How do I add transparency to a color?
Use the RGBA or HSLA form (a fourth value from 0 to 1), or an 8-digit hex code with two extra digits for alpha, e.g. #3b82f6ff for fully opaque.
Why does HSV exist if HSL already covers hue and saturation?
They model brightness differently — HSL's lightness runs from black through the full color to white, while HSV's value runs from black to the full-brightness color. HSV maps more directly to how paint-mixing and many color pickers (like Photoshop's) work, which is why it's more common in image-editing tools than in CSS.