HEX, RGB, HSL, CMYK and OKLCH color converter

Supported formats and when to use each

The converter accepts free text: HEX with 3 or 6 digits (with or without #), rgb(), hsl(), hsv() or hsb(), and cmyk(). If you would rather choose visually, use the browser's native color picker. As soon as the color is recognized, every format appears side by side, each with its own copy button. The table below uses #FF5733 as an example.

LAB and OKLCH values may differ in the decimals depending on rounding and the reference white point. On top of the formats, the tool generates a CSS variable you can paste straight into your :root.

How to convert HEX to RGB (and back) by hand

A HEX code is simply RGB written in base 16. The six digits form three pairs: red, green and blue. Each digit goes from 0 to F (where A=10, B=11, C=12, D=13, E=14 and F=15), and you convert each pair by multiplying the first digit by 16 and adding the second:

• FF → 15 × 16 + 15 = 255
• 57 → 5 × 16 + 7 = 87
• 33 → 3 × 16 + 3 = 51

Result: #FF5733 = rgb(255, 87, 51). In the 3-digit shorthand, each digit is doubled: #F53 is the same as #FF5533.

Going the other way is division by 16: 87 ÷ 16 = 5 with a remainder of 7, so 87 becomes 57. Repeat for all three channels and join the pairs.

How to convert RGB to HSL, with a worked example

Converting to HSL rearranges the same data into hue (the position on the color wheel), saturation and lightness. Let's keep going with rgb(255, 87, 51):

1. Normalize the channels by dividing by 255: R = 1, G ≈ 0.341, B = 0.2.
2. Find the max and min: max = 1, min = 0.2. The difference (Δ) is 0.8.
3. Lightness: L = (max + min) ÷ 2 = 1.2 ÷ 2 = 0.6, or 60%.
4. Saturation: S = Δ ÷ (1 − |2L − 1|) = 0.8 ÷ (1 − 0.2) = 1, or 100%.
5. Hue: since red is the max, H = 60 × ((G − B) ÷ Δ) = 60 × (0.141 ÷ 0.8) ≈ 10.6°, rounded to 11°. If green were the max, the formula would be 60 × ((B − R) ÷ Δ + 2); if blue, 60 × ((R − G) ÷ Δ + 4).

Result: hsl(11, 100%, 60%). HSV uses the same hue but sets V = max (100%) and S = Δ ÷ max (80%), which gives hsv(11, 80%, 100%). The color codes guide explains how the models differ.

RGB to CMYK and the limits of print

The simple formula used by online converters starts from the normalized channels:

K = 1 − max(R, G, B)
C = (1 − R − K) ÷ (1 − K)
M = (1 − G − K) ÷ (1 − K)
Y = (1 − B − K) ÷ (1 − K)

For our example, K = 0, C = 0, M ≈ 0.66 and Y = 0.8, which gives cmyk(0%, 66%, 80%, 0%).

The math is exact, but it cannot predict how the color will look on paper. RGB is an additive model based on light, while CMYK is subtractive and based on ink. Many screen colors, especially highly saturated greens and blues and neon oranges, fall outside the print gamut and come out duller. The real result depends on the printer's ICC profile (such as GRACoL or FOGRA), the paper stock and the ink. Treat the converter's value as a starting point and ask for a color proof. Our RGB vs CMYK guide goes deeper.

LAB and OKLCH: colors designed around human vision

HEX, RGB and HSL describe how a screen produces a color, not how we perceive it. One example makes this obvious: yellow #FFFF00 and blue #0000FF both have 50% lightness in HSL, yet the yellow looks far brighter. In OKLCH, yellow's lightness is about 97% and blue's about 45%, which matches what your eyes see.

CIE LAB was designed to be perceptually uniform: equal distances between values should match similar visual differences. It underpins measurements such as Delta E, used in color quality control. OKLCH is a newer, more accurate take on the same idea, expressed as lightness, chroma and hue. Current browsers support it, and it lets you build scales with visually even steps:

:root { --brand: oklch(68% 0.21 33.7); }
.button:hover { background: oklch(60% 0.19 33.7); }

To learn more about oklch(), color-mix() and the new color spaces, see our guide to modern CSS colors and the MDN reference.

Color name, text color and shareable link

Besides the conversions, the converter shows the closest named color, which helps when you need to describe a color in conversation or find it in the color library. It also tells you whether text on that color reads better in black or white, based on luminance. To test other pairings, use the contrast checker.

The page URL updates with a ?c= parameter followed by the HEX value, for example ?c=FF5733. Copy the address to send the exact color to a teammate or bookmark it for later.