RGB to HEX Converter

How to use it

1. Paste or type any colour code – #ff8800, f80, rgb(255 136 0), hsl(32, 100%, 50%), hsv(…), cmyk(…) or a name such as darkorange.
2. Or choose a model under “Edit as” and move the sliders or type the channel values; the preview and every code update live.
3. Copy the HEX, RGB, HSL, HSV or CMYK string in modern CSS syntax (the legacy comma form is shown underneath), or copy them all.
4. Check the contrast line to pick black or white text on that background, and share the link to the exact colour.

Example

Formulas

HEX:   each channel 0–255 → two hex digits (e.g. 136 → 88)
HSL:   M = max(R,G,B)/255, m = min(R,G,B)/255, L = (M+m)/2
       S = (M−m) / (1 − |2L−1|),  H from the dominant channel (60° sectors)
HSV:   V = M,  S = (M−m)/M
CMYK:  K = 1−M,  C = (1−R/255−K)/(1−K),  M = (1−G/255−K)/(1−K),  Y = (1−B/255−K)/(1−K)
Luminance: L = 0.2126·R′ + 0.7152·G′ + 0.0722·B′ (channels linearised from sRGB); contrast = (L₁+0.05)/(L₂+0.05)

RGB, HEX, HSL and HSV are lossless re-arrangements of the same sRGB value; converting round-trips to the identical colour. The CMYK numbers are the naive formula used by most on-screen tools, not a profiled conversion – a print shop with an ICC profile (FOGRA, SWOP) will produce different, usually lower, ink percentages. Alpha/opacity is not converted. Hue is reported in degrees and saturation, lightness, value and ink coverage in percent, rounded to one decimal.

Common colours

Sources: W3C – CSS Color Module Level 4 (hex, rgb(), hsl(), named colours), W3C – WCAG 2.1, relative luminance and contrast ratio, Wikipedia – HSL and HSV.

Which syntax should I use in CSS?

All modern browsers accept the space-separated form, rgb(255 136 0) and hsl(32 100% 50%), with an optional “/ alpha”; the comma form rgb(255, 136, 0) still works everywhere. Hex is the shortest and most portable (#ff8800, or #ff880080 with 50 % alpha). HSL is the easiest to adjust by hand – change only the lightness for a hover shade – which is why design systems often define palettes in it.

Questions

How do I convert RGB to HEX by hand?

Divide each channel by 16: the quotient is the first hex digit and the remainder the second, using a–f for 10–15. 136 ÷ 16 = 8 remainder 8 → 88; 255 → ff; 0 → 00. Join them with a # in front.

What is the difference between HSL and HSV?

Both use the same hue. HSL’s lightness goes from black (0 %) through the pure colour (50 %) to white (100 %); HSV’s value is the brightness of the strongest channel, so a pure colour has V = 100 % and white also has V = 100 % but S = 0 %. Design tools such as Photoshop show HSB, which is HSV.

Why do my CMYK values differ from Photoshop’s?

Photoshop converts through a colour profile (for example U.S. Web Coated SWOP), which models real inks and paper. This tool uses the simple formula without a profile, which is fine for a quick estimate but not for print-ready separations.

Does the converter handle transparency?

It reads rgba(), hsla() and 8-digit hex codes but ignores the alpha channel. Add the opacity yourself, e.g. rgb(255 136 0 / 50%) or #ff880080.