Color Converter
Convert between HEX, RGB, HSL, and HSV. Pick a color from the visual picker or type a value in any format — the others update live.
Common variations
Color format quick guide
| Format | Example | Best for |
|---|---|---|
| HEX | #2f6df6 | Compact, dominant in CSS and design tools |
| RGB | rgb(47, 109, 246) | Math, image processing, color blending |
| HSL | hsl(220, 92%, 57%) | Tweaking hue/saturation/lightness independently |
| HSV / HSB | hsv(220°, 81%, 96%) | Color pickers in graphics software |
| RGBA / HSLA | rgba(47, 109, 246, 0.5) | Transparency / overlay colors |
HSL vs HSV — what's the difference?
Both use hue (0–360°) and saturation, but they differ in the third component. HSL's lightness goes from 0% (black) through 50% (the pure color at full saturation) to 100% (white). HSV's value goes from 0% (black) to 100% (the pure color). Designers often prefer HSL because adjusting lightness is intuitive; software like Photoshop's "color picker" uses HSV because it matches how a square+slider picker is laid out.
Frequently asked questions
What's the difference between #fff and #ffffff?
None — three-character HEX is shorthand for the six-character form where each digit is doubled. #abc is exactly equivalent to #aabbcc.
Why do my HSL values look different in Sketch / Figma / Photoshop?
Most likely they're showing HSV (also called HSB), not HSL. The hue and saturation will match for fully saturated colors, but the third value (lightness vs. value) is different.
Are these conversions exact?
Yes for HEX↔RGB. HSL/HSV are computed with floating-point math and rounded to integer percentages and degrees, which can produce a 1° / 1% drift on round-trips. The visual color is identical.