CalcOpenly
English

Color code converter (HEX, RGB, HSL, CMYK, OKLCH)

Convert a color from HEX to RGB, HSL, HSV, CMYK, CIE Lab and OKLCH or back, and find its nearest CSS named color and relative luminance.

Drafted with AI writing toolsUpdated Checked examples: 6

#RRGGBB, #RGB, a CSS name, rgb(), hsl(), hsv(), cmyk(), oklab(), oklch(), or lab() with the D65 white point.
Try
HEX
#2E86C1
HEX: #2E86C1
RGB
rgb(46, 134, 193)
HSL
hsl(204.1, 61.5%, 46.9%)
HSV / HSB
hsv(204.1, 76.2%, 75.7%)
CMYK
cmyk(76.2%, 30.6%, 0.0%, 24.3%)
CIE Lab (D65)
L* 53.47, a* -5.68, b* -38.11
OKLCH
oklch(59.57% 0.1217 242.57)
Nearest CSS named color
steelblue
Distance to that name (ΔE OK)
0.0244
Relative luminance
0.2148

#2E86C1 is hsl(204.1, 61.5%, 46.9%) in HSL: hue 204°, 62% saturation, 47% lightness. The closest CSS name is “steelblue” (#4682B4).

Your color and its nearest name

#2E86C1
rgb(46, 134, 193)
steelblue
#4682B4
How it's calculated S

  1. Scale the channels to 0–1

    R=0.1804, G=0.5255, B=0.7569(46,134,193)÷255R = 0.1804,\ G = 0.5255,\ B = 0.7569\quad(46, 134, 193) \div 255

    Read as hex.

  2. HSL and HSV from the largest and smallest channel

    L=max⁡+min⁡2=0.4686SL=max⁡−Lmin⁡(L, 1−L)=0.6151V=max⁡=0.7569H=204.08∘\begin{aligned} L &= \tfrac{\max + \min}{2} = 0.4686 \\ S_L &= \tfrac{\max - L}{\min(L,\,1-L)} = 0.6151 \\ V &= \max = 0.7569 \\ H &= 204.08^\circ \end{aligned}

  3. CMYK

    K=1−max⁡(R,G,B)=0.2431C=1−R−K1−K=0.7617\begin{aligned} K &= 1 - \max(R,G,B) = 0.2431 \\ C &= \tfrac{1 - R - K}{1 - K} = 0.7617 \end{aligned}

    This is the textbook formula with no ink limit or printer profile.

  4. Linearise, then convert to CIE XYZ (D65)

    (R,G,B)lin=(0.0273,0.2384,0.5333)(X,Y,Z)=(0.1928,0.2148,0.5358)\begin{aligned} (R, G, B)_{lin} &= (0.0273, 0.2384, 0.5333) \\ (X, Y, Z) &= (0.1928, 0.2148, 0.5358) \end{aligned}

    Uses the IEC 61966-2-1 transfer curve and the CSS Color 4 sRGB-to-XYZ matrix.

  5. CIE Lab against the D65 white

    L∗=116f(Y)−16=53.47a∗=500 [f(X/Xn)−f(Y)]=−5.68b∗=200 [f(Y)−f(Z/Zn)]=−38.11\begin{aligned} L^* &= 116 f(Y) - 16 = 53.47 \\ a^* &= 500\,[f(X/X_n) - f(Y)] = -5.68 \\ b^* &= 200\,[f(Y) - f(Z/Z_n)] = -38.11 \end{aligned}

    CSS lab() uses a D50 white instead, so its numbers differ slightly from these D65 values.

  6. OKLab and OKLCH

    (L,a,b)=(0.5957,−0.0560,−0.1080)C=a2+b2=0.1217h=atan2⁡(b,a)=242.57∘\begin{aligned} (L, a, b) &= (0.5957, -0.0560, -0.1080) \\ C &= \sqrt{a^2 + b^2} = 0.1217 \\ h &= \operatorname{atan2}(b, a) = 242.57^\circ \end{aligned}

    LMS cone responses are cube-rooted between Ottosson's two matrices.

  7. Nearest CSS name

    ΔEOK=0.0244(#4682B4)\Delta E_{OK} = 0.0244 (\text{\#4682B4})

    Nearest CSS name: steelblue. Distance is the straight-line gap in OKLab. CSS Color 4 uses 0.02 as a just-noticeable difference for its gamut mapping.

About the color code converter

The converter reads the listed color formats into sRGB channels between 0 and 1, then derives each format from them: HEX and RGB scale the channels to 0–255, HSL and HSV come from the largest and smallest channel, and CMYK sets K = 1 − max(R, G, B). For CIE Lab and OKLCH it first removes the sRGB gamma curve of IEC 61966-2-1, converts to CIE XYZ with the D65 white point, then applies the CIE 15 and Ottosson (2020) formulas.

Designers and front-end developers use it to move a color between CSS, design tools and print specs. The default, #2E86C1, is rgb(46, 134, 193), hsl(204.1, 61.5%, 46.9%) and oklch(59.57% 0.1217 242.57), and its nearest CSS named color is steelblue (#4682B4).

CMYK here is the plain formula with no printer profile, so a print shop's values will differ. The lab() input and CIE Lab output here use D65; CSS lab() uses D50 and is not interchangeable. Transparency is ignored, and colors outside sRGB are clipped.

How to convert a HEX color code to RGB

Split the six hex digits into three pairs and convert each pair from base 16 to base 10: the first digit times 16, plus the second. #2E86C1 gives 2E = 2 × 16 + 14 = 46, 86 = 134 and C1 = 193, so it is rgb(46, 134, 193). The same steps decode any color code from CSS, HTML or a design tool.

How to convert RGB to HEX

Divide each channel by 16: the quotient is the first hex digit and the remainder the second, with 10–15 written A–F. For rgb(34, 34, 34), every channel is 34 = 2 × 16 + 2, so the code is #222222, a dark neutral gray.

Pad values below 16 with a leading zero: 9 becomes 09, so rgb(9, 9, 9) is #090909. All three channels are needed, since a lone 34 leaves the other two unknown.

Three-digit shorthand doubles each digit: #F80 is #FF8800, or rgb(255, 136, 0).

CSS color names: purple, violet, gray, green and more

These are the CSS keyword values from the W3C named-color table, the definitions every browser uses. They name web colors, not paint, pigment or print standards.

CSS nameHEXRGB
purple#800080rgb(128, 0, 128)
violet#EE82EErgb(238, 130, 238)
gray#808080rgb(128, 128, 128)
grey#808080rgb(128, 128, 128)
green#008000rgb(0, 128, 0)
lime#00FF00rgb(0, 255, 0)
brown#A52A2Argb(165, 42, 42)
black#000000rgb(0, 0, 0)
pink#FFC0CBrgb(255, 192, 203)
white#FFFFFFrgb(255, 255, 255)
ivory#FFFFF0rgb(255, 255, 240)
yellow#FFFF00rgb(255, 255, 0)
red#FF0000rgb(255, 0, 0)
teal#008080rgb(0, 128, 128)
orange#FFA500rgb(255, 165, 0)
lavender#E6E6FArgb(230, 230, 250)
cyan#00FFFFrgb(0, 255, 255)
  • Purple and violet are different colors, #800080 and #EE82EE.
  • Gray and grey are two spellings of #808080, much lighter than the #222222 above.
  • Green and lime differ: CSS green is #008000, a half-intensity green channel, while lime is #00FF00.
  • Cyan and aqua are both #00FFFF.

For lighter and darker versions of one color, use the palette generator.

HSL and HSV

Both use the same hue angle but define the other two numbers differently. With channels scaled to 0–1, #2E86C1 has a largest channel of 0.757 (blue) and a smallest of 0.180 (red):

  • HSL lightness is (max + min) ÷ 2 = 46.9%, and saturation is (max − min) ÷ (1 − |2L − 1|) = 61.5%, giving hsl(204.1, 61.5%, 46.9%).
  • HSV value is the max, 75.7%, and saturation is (max − min) ÷ max = 76.2%, giving hsv(204.1, 76.2%, 75.7%).

The percentages are not interchangeable. CSS has hsl() but no hsv(), and design tools often call HSV "HSB".

CMYK, Lab and OKLCH

CMYK here is the plain formula: K = 1 − max, then C = (1 − R − K) ÷ (1 − K), and the same for M and Y. #2E86C1 is cmyk(76.2%, 30.6%, 0.0%, 24.3%). A print shop converts through an ICC profile for its paper and press, so its numbers will differ.

CIE Lab here uses the D65 white point, while CSS lab() uses D50, so the same three numbers describe slightly different colors. Keep the white point with any Lab value you copy.

OKLCH gives lightness, chroma and hue in Björn Ottosson's OKLab space, so #2E86C1 is oklch(59.57% 0.1217 242.57). A gray has zero chroma, and its hue is written none.

Nearest CSS name

The nearest named color is the one closest in OKLab. For #2E86C1 that is steelblue, #4682B4, at a distance of 0.0244: close, but a different color. Keep the original HEX when you need the exact color.

Common conversion mistakes

  • Expecting transparency to carry over. #2E86C1CC and rgba() convert as the opaque color, with a warning.
  • Rounding surprises. HEX and RGB hold whole 8-bit values, while the other formats keep the unrounded color, so hsl(120, 100%, 25.1%) rounds to #008000, the CSS green.
  • Out-of-gamut colors. An oklch() value outside sRGB is clipped before converting: oklch(70% 0.4 150) comes back as #00D600.
  • Context-dependent values. currentcolor, transparent and var(--brand) only mean something inside a stylesheet, so they are rejected.

To check a text and background pair, use the contrast checker, which works from the same relative luminance.

Worked examples

Steel blue #2E86C1

Color
#2E86C1
RGB
rgb(46, 134, 193)
HSL
hsl(204.1, 61.5%, 46.9%)
HSV / HSB
hsv(204.1, 76.2%, 75.7%)
CMYK
cmyk(76.2%, 30.6%, 0.0%, 24.3%)

Checked against: colorsys.rgb_to_hls / rgb_to_hsv on (46, 134, 193)/255, formatted to 1 dp

Pure red

Color
red
HEX
#FF0000
CIE Lab (D65)
L* 53.24, a* 80.09, b* 67.20
OKLCH
oklch(62.80% 0.2577 29.23)
Relative luminance
0.2126

Checked against: Separate exact decimal arithmetic script of the CIE 15 Lab (D65) and Ottosson OKLab formulas; matches Bruce Lindbloom's sRGB/D65 red (53.24, 80.09, 67.20) and CSS Color 4's oklch(62.8% 0.2577 29.23)

HSL input lands exactly on a named color

Color
hsl(120, 100%, 25.1%)
HEX
#008000
Nearest CSS named color
green

Checked against: CSS Color 4 §6.1 green = #008000

White has no hue (edge)

Color
#fff
HEX
#FFFFFF
HSL
hsl(0.0, 0.0%, 100.0%)
CMYK
cmyk(0.0%, 0.0%, 0.0%, 0.0%)
OKLCH
oklch(100.00% 0.0000 none)
Nearest CSS named color
white

Checked against: Definition: max = min = 1 gives zero saturation and chroma; CSS Color 4 treats the hue of an achromatic color as powerless (none)

Questions

How do you convert HEX to RGB?

Split the six hex digits into three pairs and convert each pair from base 16 to decimal: #2E86C1 is 2E = 46, 86 = 134 and C1 = 193, so rgb(46, 134, 193). A three-digit shorthand doubles each digit, so #F80 means #FF8800. To go the other way, write each 0–255 channel as two hex digits, padding with a leading 0 below 16.

What is the difference between HSL and HSV?

Both use the same hue angle but define the other two values differently. HSL lightness is the average of the largest and smallest channel, so pure colors sit at 50% and white at 100%; HSV value is the largest channel, so pure colors sit at 100%. #2E86C1 is hsl(204.1, 61.5%, 46.9%) but hsv(204.1, 76.2%, 75.7%). CSS has hsl() and hwb() but no hsv().

Why doesn't my CMYK conversion match what the printer uses?

A plain conversion only rearranges screen RGB: K = 1 − max(R, G, B) and each ink is (1 − channel − K) ÷ (1 − K), with no knowledge of paper, ink or press. Print workflows convert through an ICC profile such as FOGRA39 or GRACoL 2006, which limits total ink coverage and shifts colors, so treat these numbers as a starting point and ask the printer for their profile.

What is OKLCH and why use it in CSS?

OKLCH is the polar form of Björn Ottosson's 2020 OKLab space: lightness L, chroma C and hue h. Equal steps in L look about equally different in brightness across hues, which HSL does not manage, so it suits palettes and accessible color scales. CSS Color Level 4 defines oklch(), and every major browser has supported it since 2023. Pure red is oklch(62.8% 0.2577 29.23).

What is relative luminance?

Relative luminance is a color's brightness on a scale from 0 (black) to 1 (white), computed on linear channels after removing the sRGB gamma curve: L = 0.2126 R + 0.7152 G + 0.0722 B. Green weighs most because the eye is most sensitive to it, so pure red scores 0.2126 and #2E86C1 scores 0.2148. WCAG uses it for contrast ratios, (L1 + 0.05) ÷ (L2 + 0.05).

About this calculator

Clin={C/12.92C≤0.04045(C+0.0551.055)2.4C>0.04045L∗=116f(Y/Yn)−16\begin{aligned} C_{lin} &= \begin{cases} C/12.92 & C \le 0.04045 \\ \left(\frac{C+0.055}{1.055}\right)^{2.4} & C > 0.04045\end{cases} \\[4pt] L^* &= 116 f(Y/Y_n) - 16 \end{aligned}

Sources

  1. W3C CSS Color Module Level 4 — sRGB, HSL, HWB conversions and sample code
  2. IEC 61966-2-1:1999 — Default RGB colour space sRGB
  3. CIE 15:2004 Colorimetry, 3rd ed. — CIELAB (ε = 216/24389, κ = 24389/27)
  4. Björn Ottosson (2020), A perceptual color space for image processing (OKLab)

Checked against references

This calculator includes 6 worked examples with independently sourced answers. They run in the test suite, and you can run them here too.

Put this calculator on your site

Paste this where you want the calculator to appear. It is free to use, it stays in step with corrections made here, and the credit line below it links back so your readers can find the full version.

Height
Preview the embed

Keep the credit line. It is the only condition, and it is what keeps these calculators free.

Related calculators