oklch.fyi
Build better color systems with OKLCH. Convert, generate and explore OKLCH colors and create a unique color palette for your next app.
Bulk Convert
Individual Convert
Why OKLCH?
What is OKLCH?
OKLCH is a newer color model similar to sRGB, HSL and others. It is designed to be perceptually uniform, which means that the colors are much more accurate in terms of how humans actually perceive colors.
Perceptual Uniformity
OKLCH keeps color changes consistent with how our eyes see them. In HSL for example, small tweaks to the individual values can look huge or barely noticeable depending on the color. In OKLCH, a change in values always creates a similar and predictable change.
Consistent Lightness
For example, HSL's lightness values can be misleading. Two colors at 50% lightness may appear different. OKLCH's lightness aligns with human perception, so brightness adjustments remain accurate across all hues.
Accessibility
Because OKLCH's lightness ties directly to contrast, it's easier to make color palettes that are readable and accessible.
Easier Color Manipulation
Lightness, Chroma and Hue work independently. You can brighten a color without changing its saturation, or tone it down without shifting its hue.
Application & Adoption
OKLCH is supported in modern CSS, with growing adoption in design tools. It also enables wide gamut colors (e.g. P3 Color Space), making it ideal to achieve colors that cannot be achieved in other color models.