Huely/Color converter
HEX to RGB, RGB to HEX, HSL, HSB, CMYK and OKLCH — in one direction or any
other. Paste whatever notation you are holding; the field accepts
#4a7ebb, rgb(74, 126, 187),
hsl(212, 45%, 51%) or three bare numbers.
Closest named color:
A color that fails both is a fill color, not a text color. For an exact pair, use the contrast checker.
Eleven steps built in OKLCH, so the spacing is perceptually even rather than bunched around the light end. Click any step to convert it.
| Notation | Looks like | Use it for |
|---|---|---|
| HEX | #4a7ebb | The default in CSS and design handoff. Compact, no alpha unless you add two more digits. |
| RGB | rgb(74 126 187) | Anything computational — canvas, image processing, per-channel math. |
| HSL | hsl(212 45% 51%) | Hand-tuning a hue or building a quick ramp in CSS. |
| HSB / HSV | hsb(212 60% 73%) | Matching what Figma, Sketch and Photoshop show in their pickers. |
| CMYK | cmyk(60% 33% 0% 27%) | Print. Treat the conversion as indicative — real output depends on the press profile. |
| OKLCH | oklch(58.4% 0.110 254) | Anything perceptual: ramps, gradients, contrast repair, color mixing. |
They are the same numbers in different bases. A hex color is three pairs of
hexadecimal digits — red, green, blue — each running 00 to
ff, which is 0 to 255 in decimal. #4a7ebb splits
into 4a, 7e, bb, and
4a is 4×16 + 10 = 74. So #4a7ebb is exactly
rgb(74, 126, 187). Nothing is lost or approximated in either
direction.
A three-digit hex such as #4b7 is shorthand for
#44bb77 — each digit doubled, not padded with zeros.
Both start from the same hue angle, and then diverge. In HSL,
lightness 100% is always white and 50% is the pure hue. In
HSB, brightness 100% is the pure hue and there is no way to
reach white except by dropping saturation. That is why a color copied out of
Figma as "60% / 73%" looks wrong when pasted into a CSS hsl()
function: the second and third numbers mean different things.
HSL's lightness is a geometric average of channels, not a perceptual
quantity. hsl(60 100% 50%) is a blinding yellow and
hsl(240 100% 50%) a near-black blue, yet both claim 50%
lightness. Any ramp, gradient or accessibility decision built on that number
inherits the error.
OKLCH replaces it with a lightness that matches perception, a chroma that means saturation, and the same hue angle you already think in. Equal steps look equal. It is supported in every current browser, and it is what the ramps and contrast repairs on this site are computed in.
Split the six digits into three pairs and read each as a base-16 number:
the first digit is worth 16 each, the second 1 each. 4a is
(4 × 16) + 10 = 74. Repeat for the other two pairs to get
rgb(74, 126, 187).
Not exactly. The conversion here is the standard naive formula, which ignores paper, ink and press profile. Use it to get in the right neighbourhood, and let your printer's ICC profile produce the final separation.
The third channel. HSL lightness reaches white at 100%; HSB brightness reaches the pure hue at 100% and never reaches white. Design tools report HSB, CSS uses HSL, and pasting one into the other silently shifts the color.
This field takes numeric notations. The converter does report the nearest CSS color name for whatever you enter, so you can go from a value to a name; for the reverse, the CSS named colors are a fixed list of 148 values you can use directly in CSS.
HEX, RGB and HSL round-trip exactly. OKLCH and CMYK are shown rounded for readability, so re-entering a displayed value can land a fraction off the original — use HEX or RGB when exactness matters.