Color Converter
Converts a color between HEX, RGB, HSL and HSV at once, with live preview and a screen eyedropper.
Click the square to pick a color visually.
Source format
When to use each format
| Format | Example | Where it's used |
|---|---|---|
| HEX | #ff0000 | CSS, design tools — the most universal notation for color on the web |
| RGB | rgb(255, 0, 0) | Manipulating individual channels in code (Canvas, WebGL, image processing) |
| HSL | hsl(0, 100%, 50%) | CSS when you want to adjust lightness/saturation predictably (e.g., generating a palette by varying only lightness) |
| HSV | hsv(0, 100%, 100%) | Porting a value from a design tool (Figma/Photoshop call it HSB) — same model, different name |
What the different color formats are
HEX, RGB, HSL, and HSV describe the exact same color in different ways. HEX and RGB describe the same thing (how much red, green, and blue to mix), just in different bases — HEX in hexadecimal, RGB in decimal. HSL and HSV start from a different logic: instead of mixing three primary colors, they describe the color by hue (H, the color itself, 0-360°) and then two axes that differ between the two models — saturation and lightness (L) in HSL, saturation and value/brightness (V) in HSV. HSV is often called HSB ("Brightness" instead of "Value") in design tools like Figma and Photoshop — it's the same model, just a different name for the same third axis.
Limitations
No alpha/transparency channel (rgba, hsla) and no CMYK (a print color space, not very relevant to web/software development) in this version — deliberate scope decisions, not oversights. Conversion between formats may round slightly (each format is always computed from the internal RGB, never chained from another already-converted format, to avoid accumulating error — but the display rounding itself, when converting from one side to the other, is unavoidable).
Frequently asked questions
Yes — it's exactly the same color model, just with different names for the third axis ("Value" in HSV, "Brightness" in HSB). Design tools like Figma and Photoshop tend to use "HSB"; this tool uses "HSV", the more common naming in code and CSS/technical documentation — the numeric value is identical either way.
Not in this tool — internally the color is always stored as RGB, and each displayed format is computed straight from that, never chained from another already-converted format. This avoids the rounding buildup that would happen if, say, HSL were computed from an already-rounded HSV instead of the original RGB.
Every format would gain a fourth dimension (rgba, hsla) — a deliberate decision to keep this version's scope to opaque color, the most common use case when converting a value between notations.
CMYK is a color space meant for printing, not web/software development — this tool's audience is unlikely to need it. Left out of this version's scope for that reason, not an oversight.
That button uses the browser's EyeDropper API, currently only available in Chromium-based browsers (Chrome, Edge). When the browser doesn't support it, the button simply doesn't appear — no other feature is affected, including the visual color picker on the swatch itself, which works in any browser.
3 digits is the shorthand form used in CSS (e.g., "#f00") — each digit is duplicated internally ("f" becomes "ff") before converting, producing the same result as typing the full 6 digits ("#ff0000").