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