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.

更新日 2026年9月28日検証済みの例：6

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

計算方法 S

Scale the channels to 0–1
$R = 0.1804,\ G = 0.5255,\ B = 0.7569\quad(46, 134, 193) \div 255$
Read as hex.
HSL and HSV from the largest and smallest channel
$\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}$
CMYK
$\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.
Linearise, then convert to CIE XYZ (D65)
$\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.
CIE Lab against the D65 white
$\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.
OKLab and OKLCH
$\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.
Nearest CSS name
$\Delta E_{OK} = 0.0244\ \text{to steelblue } (\text{\#4682B4})$
Distance is the straight-line gap in OKLab. CSS Color 4 treats 0.02 as a just-noticeable difference in its gamut-mapping algorithm.

Color code converter (HEX, RGB, HSL, CMYK, OKLCH)について

The converter reads any CSS color notation 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.

計算例

Steel blue #2E86C1

色: #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%)

照合元：Python 3.8 colorsys.rgb_to_hls / rgb_to_hsv on (46, 134, 193)/255, formatted to 1 dp

Pure red

色: 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

照合元：Separate Python 3.8 decimal 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

色: hsl(120, 100%, 25.1%)

HEX: #008000
Nearest CSS named color: green

照合元：Python 3.8 colorsys.hls_to_rgb(1/3, 0.251, 1.0) × 255 = (0, 128.01, 0) → #008000; CSS Color 4 §6.1 green = #008000

White has no hue (edge)

色: #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

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

よくある質問

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).

「Color code converter (HEX, RGB, HSL, CMYK, OKLCH)」の精度はどのくらいですか？

精度は入力値と計算方法の前提に依存します。十進演算には有効数字50桁を使いますが、推定、数値計算手法、元データの精度はそれより低い場合があります。表示の丸め処理でこれらの制約がなくなるわけではありません。独立した出典の解答と照合した計算例：6。例えば、「Steel blue #2E86C1」はPython 3.8 colorsys.rgb_to_hls / rgb_to_hsv on (46, 134, 193)/255, formatted to 1 dpと照合しています。

この計算方法の出典は何ですか？

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

この計算機について

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

出典

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

出典と照合済み

この計算機には、独立した出典の解答を使った計算例が 6 件あります。テストに組み込まれており、ここでも実行できます。

Your color and its nearest name

Scale the channels to 0–1

HSL and HSV from the largest and smallest channel

CMYK

Linearise, then convert to CIE XYZ (D65)

CIE Lab against the D65 white

OKLab and OKLCH

Nearest CSS name