Color Converter

Convert between HEX, RGB, HSL, and HSV color formats

HEX
RGB
r
g
b
rgb(59, 130, 246)
HSL
h
s
l
hsl(217, 91%, 60%)
HSV
h
s
v
hsv(217, 76%, 96%)

The same color has a different spelling in every tool you open. Design hands you HEX, CSS is easiest to tweak in HSL, the eyedropper in Figma and Photoshop reports HSB, and Canvas or a shader wants raw 0–255 channels. This converter puts HEX, RGB, HSL, and HSV side by side on one page: edit any field and the other three update immediately.

How to use it

  1. The swatch and picker sit at the top. The picker is the browser's native <input type="color">, so you get your own operating system's color panel, and the choice applies the moment you make it.
  2. The HEX field takes six hex digits. The # is optional (it gets added for you) and case does not matter. It applies **when you leave the field** — after pasting, press Tab or click elsewhere. Bad input shows an error underneath.
  3. RGB is three integer inputs from 0 to 255. Anything out of range is clamped to the nearest bound.
  4. HSL and HSV each get three inputs: H from 0 to 360, S / L / V from 0 to 100, integers only.
  5. Each of the four cards has its own copy button, giving you #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%), or hsv(217, 76%, 96%) — ready to paste into a stylesheet or a design tool.
  6. Every field is bidirectional. Internally each edit is converted to RGB first and the other three are derived from that, so all four always describe the same color no matter where you started.

When it comes in handy

Turn a HEX from the mockup into something you can adjust

There is no way to darken #3b82f6 by 10% in your head. As hsl(217, 91%, 60%) you can move L alone for hover and pressed states, keeping H and S fixed so the hue never drifts. Copy the result back out of the HEX field when you are done.

Reconcile HSB numbers from a design tool

Photoshop, Figma, and Sketch pickers use HSB, and HSB is the HSV card here — same model, with Brightness and Value being two names for one axis. When a designer says "H 217, S 76, B 96," type it into the HSV row and read off the HEX your code actually needs.

Pull out channel values for code

Canvas fillStyle, SVG stop-color, a WebGL vec3, or hand-assembling rgba(59, 130, 246, 0.5) for a translucent shadow all need R, G, and B as separate numbers. Paste the HEX and read the three channels straight off.

Audit a design system color ramp

Paste each step of a palette — 50, 100, 200, through 900 — into the HEX field and watch whether L steps down evenly and H stays constant. Hand-tuned ramps often wander a few degrees of hue in the middle, and stepping through them like this exposes it fast.

Limits and behavior

  • Everything here is sRGB with 8 bits per channel. Display P3, Lab, LCH, OKLCH, and CMYK are not supported, and the tool never emits modern CSS color syntax such as oklch(), lab(), or color(display-p3 …). For wide-gamut or perceptually uniform work, use a dedicated tool.
  • HSL and HSV values are rounded to whole numbers, so a round trip can shift by 1. Measured: #3b82f6 reports as hsl(217, 91%, 60%), but feeding that HSL back produces #3c83f6 — R and G each off by one. The shift happens once and then settles, so it does not compound; still, if a HEX is a design token headed for version control, keep the original rather than the round-tripped value.
  • The HEX field accepts six digits only. The CSS-legal three-digit shorthand #abc, the eight-digit #3b82f6ff with alpha, and named colors like rebeccapurple are all rejected as invalid. Output is always lowercase.
  • There is no alpha channel anywhere in the pipeline: no rgba(), no hsla(), add opacity yourself. The copied RGB and HSL use the legacy comma syntax rather than the modern space-separated form rgb(59 130 246 / 50%) — both are universally supported, they just look different.
  • Hue is meaningless for grays. Whenever R = G = B, H is reported as 0, and while S is 0 changing H does nothing at all — the value you typed gets zeroed on the next sync. For the same reason H = 360 snaps back to 0 (identical color). Note too that #7f7f7f and #808080 both read as hsl(0, 0%, 50%), so touching any HSL field while on #7f7f7f bumps the HEX to #808080.
  • hsv() is not a CSS function — that card exists for design tools, not stylesheets. And HSL lightness is not perceived lightness: hsl(60, 100%, 50%) (yellow) looks far brighter than hsl(240, 100%, 50%) (blue) despite both sitting at 50%. This tool does not compute WCAG contrast, and it does not generate ramps, complements, or palettes.

Frequently asked questions

I pasted a HEX and nothing else changed. Why?

The HEX field validates and applies on blur, not on every keystroke — otherwise a half-typed #3b8 would sit there flagged as an error while you type. Move focus away with Tab or a click anywhere else on the page and all four cards update.

Why does HEX to HSL and back give me a different HEX?

Integer HSL offers 360 x 101 x 101 combinations against 16.7 million sRGB colors, so the counts cannot line up and a rounded HSL has to land on the nearest available RGB triple. That is exactly how #3b82f6 becomes hsl(217, 91%, 60%) becomes #3c83f6 — indistinguishable by eye, different as a string. Copy from HEX or RGB when you need the exact value; treat HSL as a way to reason about and adjust a color, not as the source of truth.

Does it take `#abc` shorthand or `#rrggbbaa` alpha?

Neither — both show a format error. Expand the shorthand yourself (#abc means #aabbcc), and strip the last two digits from an eight-digit value before pasting. Those two digits are opacity in hex, where ff is fully opaque and 80 is roughly 50%.

Is HSV the same as HSB in my design software?

Yes, identical model, two names for the third axis. Photoshop, Figma, and Sketch say HSB; papers and libraries usually say HSV, and the numbers transfer directly. Do not confuse either with HSL, though: for one color the S and L/V figures generally differ (#3b82f6 is hsl(217, 91%, 60%) but hsv(217, 76%, 96%)), and only H matches.

Why does H jump back to 0 when I edit it on a gray?

Because saturation is 0, and at zero saturation hue changes nothing — hsl(200, 0%, 50%) and hsl(0, 0%, 50%) are the same gray. After applying your edit the tool re-derives HSL from RGB, and a gray is defined as H = 0, which overwrites what you typed. Raise S above 0 first and H starts mattering.

Can it convert to CMYK or OKLCH?

No. CMYK has no single correct conversion: the same four numbers print as different colors on different paper, ink, and presses, and doing it properly requires an ICC profile — any web tool that just hands you four numbers is guessing. OKLCH and Lab are perceptually uniform spaces that require gamma-decoding sRGB and passing through XYZ, and this tool deliberately stays out of that rather than printing precise-looking numbers that disagree with what the browser renders.