A color converter takes a color in one notation and emits the same color in others. The tool above converts between HEX, RGB, and HSL in your browser; nothing leaves your machine. The conversions are deterministic — the same input produces the same output everywhere — so this page is about why the formats exist and when each is the right one to use.
HEX (#RRGGBB)
#3b82f6
Two hex characters per channel, six characters per color (eight with alpha as #RRGGBBAA). The compact form #RGB expands to #RRGGBB (each digit doubled), so #f0c is #ff00cc.
Use it for: CSS, design tools, anywhere a single string is more convenient than three numbers. It’s the form most designers and frontend developers think in.
Don’t use it for: Programmatic adjustments. Adding 0x101010 to lighten a hex color overflows channels independently and produces nonsense.
RGB (rgb(R, G, B))
rgb(59, 130, 246)
Three integers 0–255 per channel (or 0–100% in the percentage form). RGB is the literal pixel value — what the display actually emits. Modern CSS also accepts the slash-separated syntax rgb(59 130 246 / 0.5) with a fractional alpha.
Use it for: Anywhere you’re doing math on colors. Converting an image. Programmatically computing a tint.
Don’t use it for: “I want this 10% darker” — RGB doesn’t give you a single dial for that. Lowering each channel by 10% darkens, but the perceptual change isn’t uniform across hues.
HSL (hsl(H, S%, L%))
hsl(217, 91%, 60%)
Three values: hue (0–360 degrees on a color wheel), saturation (0% gray to 100% pure color), lightness (0% black to 100% white, with the pure hue at 50%).
Use it for: Authoring color schemes. “Same hue, less saturated” is one HSL change. “Darker variant” is one HSL change. CSS variables that drive a theme are often easiest to express in HSL.
Don’t use it for: Perceptually-uniform interpolation. HSL is geometric in RGB space, not perceptual — a 10% lightness reduction looks different at hue 60 (yellow) than at hue 240 (blue). For perceptual uniformity, modern CSS supports OKLCH and OKLab, which the tool above does not currently emit but which CSS authoring guides increasingly recommend.
Conversion is lossless within sRGB
HEX, RGB, and HSL are three notations for the same underlying sRGB triple. Converting #3b82f6 to RGB and back gives exactly #3b82f6. Converting through HSL and back may introduce a 1-bit rounding error per channel (HSL operates on floats; HEX is 8-bit integer).
The tool above uses the standard conversion formulas:
- HEX ↔ RGB: parse hex pairs as bytes (0x3b = 59).
- RGB ↔ HSL: the textbook formula in any computer graphics reference; the W3C specification is the canonical source for CSS.
Alpha (transparency)
All three forms support an alpha channel:
| Form | With alpha |
|---|---|
| HEX | #RRGGBBAA (#3b82f6cc) — alpha is the last hex pair |
| RGB | rgba(59, 130, 246, 0.8) or rgb(59 130 246 / 80%) |
| HSL | hsla(217, 91%, 60%, 0.8) or hsl(217 91% 60% / 80%) |
The hex form’s alpha is 0–255 (so cc = 80%). RGB and HSL alpha is 0–1 or 0–100%. Be careful: many color pickers default to outputting hex without alpha and silently drop transparency on copy.
sRGB, Display P3, and what the tool can’t do
The conversions above all operate inside sRGB — the color space the web defaulted to since the 1990s. Modern displays cover wider gamuts (Display P3, Rec. 2020); CSS now supports color(display-p3 ...) and OKLCH for those colors.
The tool above emits sRGB colors only. If you’re authoring for wide-gamut output, you’ll need a tool that explicitly handles non-sRGB color spaces — and you’ll discover that lossless conversion between color spaces is no longer possible (a Display P3 red has no sRGB equivalent without clipping).
When color names are enough
CSS supports 148 named colors (aliceblue, tomato, darkslategray, rebeccapurple), plus the keyword transparent. Each maps to a specific sRGB triple. The tool above will accept named-color input where browsers accept it.
For accessibility — choosing colors that meet WCAG contrast thresholds — see color contrast. That tool computes contrast ratios between two colors and tells you which WCAG levels they pass.
Common pitfalls
- Hex digits’ implicit doubling.
#fffis#ffffff(white), not#0fffor#ffff00. Three-character hex always doubles each digit. - HSL hue out of range. Hue is conventionally 0–360, but CSS accepts negative values and values >360 (they wrap mod 360). The tool above normalizes to 0–360 on output.
- Confusing HSL with HSV/HSB. Photoshop’s “HSB” picker is not HSL. Same hue dial, different saturation/value semantics. A color picked in HSB and pasted as HSL will look wrong.
- Lightness > 50% with high saturation. HSL
hsl(0, 100%, 90%)is a pale pink, not a darker red. The lightness coordinate is centered: 50% is the pure hue, anything above is lighter, anything below is darker.
For the inverse use case — checking whether two colors meet contrast standards — see color contrast.