Color Converter

How to use Color Converter

What it does & when you need it

You have a colour in one notation and need it in another: a designer handed you #3b82f6, but your chart library wants rgb(), or you want to build a hover state by nudging lightness and HSL is the only sane way to do that. This tool takes a HEX, rgb()/rgba(), or hsl()/hsla() value and shows you all three at once, with a live swatch so you can confirm you got the colour you meant. It runs entirely in your browser — nothing about the colours you paste is sent anywhere, and it keeps working with the network disconnected.

It is built for the everyday "hex to rgb" lookup, but it also handles the fiddlier cases: alpha channels, #RGB shorthand, percentage channels, and the modern space-separated syntax (rgb(59 130 246 / 0.5)).

How to use

1. Type or paste a colour into the color buffer, press Sample to load #3b82f6, or use the Pick swatch in the toolbar to choose one visually.
2. The hex · rgb · hsl buffer updates as you type, listing all three forms on their own line, and the status bar shows a preview swatch plus the R/G/B channels (and alpha, when the colour is translucent).
3. Press Copy on the output to grab all three, or hit Copy HEX (Ctrl/Cmd + Enter) to put just the hex on your clipboard. If the value can't be parsed, the output panel explains why instead of guessing.

Things worth knowing

Shorthand and alpha are just digit counts. A three-digit #RGB value is expanded by doubling each nibble, so #f0a is exactly #ff00aa — handy, but it means you can only express 4,096 colours in shorthand. The four- and eight-digit forms (#RGBA and #RRGGBBAA) add an alpha channel as a final byte, where 80 is roughly 50% opacity. This tool prints the eight-digit form only when alpha is below 1, so opaque colours stay in the short, familiar #rrggbb shape.

HSL is the notation you can edit by hand. RGB mixes three light channels, so "a slightly darker blue" means changing all three numbers in concert. HSL splits a colour into hue (0–360 degrees around the wheel), saturation, and lightness, so a tint or shade is a single nudge of the lightness percentage while hue and saturation stay put. That is why design systems and CSS custom properties so often store colours as HSL. If you're building a set of related colours, the gradient generator works from the same values.

Round-trips can drift by one. Every representation here is derived from one canonical integer RGB triple. Because RGB↔HSL conversion runs through floating point and then rounds back to whole numbers, feeding an HSL value in and reading the RGB back out can land a unit away from where you started — hsl(217, 91%, 60%) comes back as #3c83f6, not the #3b82f6 it originally described. That is expected rounding, not a bug; keep one notation as your source of truth rather than bouncing a value back and forth.

Everything here lives in the sRGB gamut. HEX and rgb() can only address colours inside sRGB (IEC 61966-2-1), the lowest-common-denominator space of the web. CSS Color Module Level 4 adds wider spaces such as oklch(), which reaches colours sRGB simply cannot show on capable displays and — unlike HSL — keeps perceived lightness constant as hue changes, so a palette doesn't look patchy. If you're picking UI colours, run the results through the contrast checker to confirm they clear WCAG ratios, and if you're converting other CSS units the px to rem converter is next door.