Hex to OKLCH Converter
Convert hex color codes to the modern CSS oklch() format used by Tailwind CSS v4 and CSS Color Level 4. Enter a hex code and copy the perceptually uniform OKLCH value. All conversions happen in your browser.
Synchronized color
#2B7FFFParsed as RGB; malformed or out-of-range channels are rejected, never silently clamped.
Integer or percentage RGB, modern or legacy CSS, Hex with optional alpha, HSL, HSV, OKLCH, LAB, LCH, CMYK, or a CSS name.
Adjust channels
Share this exact input
?color=2B7FFFOne input, implementation-ready output
Color workspace
Hex
#RRGGBB
#2B7FFFCSS RGB
Modern space syntax
rgb(43 127 255)Legacy RGB
Comma syntax
rgb(43, 127, 255)RGB %
Percentage channels
rgb(16.9% 49.8% 100%)HSL
CSS hue, saturation, lightness
hsl(216 100% 58%)HSV / HSB
Design-tool model
hsv(216, 83%, 100%)OKLCH
Perceptual CSS color
oklch(61.9% 0.207 259.2)LAB
CSS Lab, D50
lab(53.83% 11.48 -72.05)LCH
CSS LCH, D50
lch(53.83% 72.95 279.05)CMYK
Unprofiled approximation
cmyk(83%, 50%, 0%, 0%)How Hex Converts to OKLCH
The conversion goes through the OKLab perceptual color space (Björn Ottosson's reference math):
- Decode the hex code to RGB channels and undo the sRGB gamma curve to get linear RGB.
- Transform linear RGB to the LMS cone response space with a 3×3 matrix, then take cube roots.
- Transform to OKLab (L, a, b) with a second matrix.
- Convert the a/b pair to polar form: chroma C = √(a² + b²) and hue H = atan2(b, a).
Example: convert #2B7FFF to OKLCH
#2B7FFF → rgb(43, 127, 255)
Linear RGB → OKLab: L = 0.623, a = −0.038, b = −0.211
C = √(a² + b²) = 0.214
H = atan2(−0.211, −0.038) ≈ 259.8°
Result: oklch(62.3% 0.214 259.8) - Tailwind v4 blue-500
How to Use the Hex to OKLCH Converter
Enter any hex color code and the CSS-ready oklch() value appears instantly, along with RGB, HSL, and CMYK equivalents. Copy the OKLCH value straight into your stylesheet or Tailwind theme configuration.
Understanding OKLCH Values
An OKLCH value like oklch(62.3% 0.214 259.8) reads as: 62.3% perceived lightness, 0.214 chroma (color intensity), at hue angle 259.8° (blue). Because the space is perceptually uniform, you can build an entire tint-and-shade scale by only changing L - something that never works cleanly in HSL.
Common Use Cases
Migrating design tokens to Tailwind CSS v4, building color scales that stay perceptually even, using wide-gamut P3 colors in modern CSS, and future-proofing design systems as tooling standardizes on OKLCH.
Hex to OKLCH Conversion Table
Hex, RGB, and OKLCH values for the most commonly used colors. Click any hex code to load it into the converter above.
| Color | Name | Hex | RGB | OKLCH |
|---|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | oklch(0% 0 0) | |
| White | #FFFFFF | rgb(255, 255, 255) | oklch(100% 0 0) | |
| Red | #FF0000 | rgb(255, 0, 0) | oklch(62.8% 0.258 29.2) | |
| Lime | #00FF00 | rgb(0, 255, 0) | oklch(86.6% 0.295 142.5) | |
| Blue | #0000FF | rgb(0, 0, 255) | oklch(45.2% 0.313 264.1) | |
| Yellow | #FFFF00 | rgb(255, 255, 0) | oklch(96.8% 0.211 109.8) | |
| Cyan | #00FFFF | rgb(0, 255, 255) | oklch(90.5% 0.155 194.8) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | oklch(70.2% 0.322 328.4) | |
| Silver | #C0C0C0 | rgb(192, 192, 192) | oklch(80.8% 0 0) | |
| Gray | #808080 | rgb(128, 128, 128) | oklch(60% 0 0) | |
| Maroon | #800000 | rgb(128, 0, 0) | oklch(37.7% 0.155 29.2) | |
| Olive | #808000 | rgb(128, 128, 0) | oklch(58.1% 0.127 109.8) | |
| Green | #008000 | rgb(0, 128, 0) | oklch(52% 0.177 142.5) | |
| Purple | #800080 | rgb(128, 0, 128) | oklch(42.1% 0.193 328.4) | |
| Teal | #008080 | rgb(0, 128, 128) | oklch(54.3% 0.093 194.8) | |
| Navy | #000080 | rgb(0, 0, 128) | oklch(27.1% 0.188 264.1) | |
| Orange | #FFA500 | rgb(255, 165, 0) | oklch(79.3% 0.171 70.7) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | oklch(86.8% 0.074 7.1) | |
| Gold | #FFD700 | rgb(255, 215, 0) | oklch(88.7% 0.182 95.3) | |
| Brown | #A52A2A | rgb(165, 42, 42) | oklch(48.1% 0.16 25.6) | |
| Coral | #FF7F50 | rgb(255, 127, 80) | oklch(73.5% 0.168 40.2) | |
| Indigo | #4B0082 | rgb(75, 0, 130) | oklch(33.9% 0.179 301.7) | |
| Violet | #EE82EE | rgb(238, 130, 238) | oklch(76.2% 0.186 327.2) | |
| Salmon | #FA8072 | rgb(250, 128, 114) | oklch(73.5% 0.152 28.1) |
Need a value that is not listed? Browse the full color library — every hex code has a page with its RGB, HSL, CMYK and OKLCH values, contrast ratios, tints, shades and matching palette colors.
Frequently Asked Questions about Hex to OKLCH Converter
OKLCH is a modern color format built on the OKLab perceptual color space. L is lightness (0-100%), C is chroma (roughly 0 to 0.4 for sRGB colors), and H is hue in degrees. Unlike HSL, equal lightness values actually look equally light across hues, which makes palettes far more predictable.
Tailwind CSS v4 rebuilt its entire default palette in OKLCH, and CSS Color Level 4 made oklch() a first-class browser feature. Because OKLCH is perceptually uniform, adjusting lightness or chroma produces consistent results - no more hue shifts or muddy midtones when generating color scales.
Yes. Chrome 111+, Safari 15.4+, and Firefox 113+ all support oklch() natively, which covers the vast majority of users. For older browsers you can serve a hex fallback on the previous line of CSS.
HSL is a simple geometric transform of RGB, so its lightness is unreliable: hsl yellow at 50% lightness looks far brighter than hsl blue at 50%. OKLCH is modeled on human vision, so L=70% looks similarly light whether the hue is yellow, blue, or pink.
Keep the color moving
Useful next steps
Your latest color stays in the local workspace when the next tool uses it.