OKLCH
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/oklch/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/oklch/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/oklch/)Use the native HTML custom element.
A modern perceptually uniform color space using lightness, chroma, and hue, designed to improve upon CIELAB for digital design workflows.
OKLCH is based on the Oklab color space created by Bjorn Ottosson in 2020. It uses L for lightness (0-1), C for chroma (colorfulness), and H for hue angle (0-360). OKLCH improves on CIELAB by providing better perceptual uniformity, especially in the blue region where CIELAB has known issues. CSS Color Level 4 includes oklch() as a native function, making it increasingly relevant for web development. OKLCH is particularly powerful for generating consistent color palettes because equal chroma values produce colors that look equally vivid regardless of hue.
Try It Out
Related Articles
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
Building a Color Picker Web Component from Scratch
Build an accessible color picker as a Web Component. Implement canvas rendering, hue sliders, alpha channels, and custom events with Shadow DOM.
Perceptual Color Spaces: Lab, LCH, Oklab, OKLCH
Explore perceptually uniform color spaces — CIE Lab, LCH, Oklab, and OKLCH. Learn how each was designed, where it excels, and which to use for CSS and design work.
Color for Data Storytelling: Beyond Default Chart Colors
Go beyond default chart colors for data storytelling. Learn sequential, diverging, and categorical palettes, accessibility in dataviz, and D3/Chart.js color scales.
Emerald vs Jade vs Forest Green: Green Comparison Guide
Compare emerald (#50C878), jade (#00A86B), and forest green (#228B22). Learn the visual and hex code differences between these popular green shades.
CSS light-dark() Function: Native Theme Switching
Use CSS light-dark() for native theme switching. Replace JavaScript toggles and media queries with a single CSS function for light and dark mode colors.