[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fwhat-is-oklch-and-why-you-should-use-it":3},{"id":4,"title":5,"body":6,"date":417,"description":418,"extension":419,"head":420,"imageUrl":105,"meta":421,"navigation":422,"ogImage":420,"path":423,"robots":420,"schemaOrg":420,"seo":424,"sitemap":425,"stem":426,"__hash__":427},"articles\u002Farticles\u002F16.What-is-oklch-and-why-you-should-use-it.md","What is OKLCH and why you should use it",{"type":7,"value":8,"toc":403},"minimark",[9,13,17,20,30,69,72,75,82,85,89,100,113,116,119,122,126,139,146,149,158,161,164,173,176,179,182,185,188,197,201,204,213,222,225,245,254,284,287,296,299,318,321,325,330,333,342,345,349,357,366,369,373,396,400],[10,11,5],"h1",{"id":12},"what-is-oklch-and-why-you-should-use-it",[14,15,16],"p",{},"When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though.",[14,18,19],{},"Disclaimer:",[21,22,23,27],"ol",{},[24,25,26],"li",{},"I might have some inaccuracies in this article.",[24,28,29],{},"Sometimes I used definitions provided by Google AI, because it was challenging for me to convey ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources.",[14,31,32,33,37,38,37,41,37,44,37,47,37,50,37,53,37,56,37,59,37,62,37,65,68],{},"There are many notions and abbreviations: ",[34,35,36],"strong",{},"CIE 1931",", ",[34,39,40],{},"RGB",[34,42,43],{},"sRGB",[34,45,46],{},"HSL",[34,48,49],{},"CMYK",[34,51,52],{},"Oklab",[34,54,55],{},"LCH",[34,57,58],{},"OKLCH",[34,60,61],{},"P3 Colors",[34,63,64],{},"Adobe RGB",[34,66,67],{},"Rec.2020","...",[14,70,71],{},"A few years ago we all used good old HEX or HSL in CSS, and everything seemed perfectly fine.",[14,73,74],{},"Then, Bjorn Ottosson introduced the OKLCH model in December 2020.",[14,76,77,78,81],{},"In Tailwind 4, the color palette already uses OKLCH. I was curious: what the heck is ",[34,79,80],{},"oklch(42.4% 0.199 265.638)","?",[14,83,84],{},"Here I'll tell you how I understand it, based on a few resources listed at the end.",[86,87,36],"h2",{"id":88},"cie-1931",[14,90,91,92,99],{},"First of all, there is the ",[93,94,98],"a",{"href":95,"rel":96},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCIE_1931_color_space",[97],"nofollow","CIE 1931 color space",".",[101,102,106],"v-image",{":hasBorder":103,":rounded":103,"alt":104,"src":105},"true","CIE 1931 xy chromaticity diagram","\u002Fimg\u002Foklch\u002Fcie-1931-gamut.png",[107,108,110],"template",{"v-slot:description":109},"",[14,111,112],{},"Gamut of the CIE RGB primaries and location of primaries on the CIE 1931 xy chromaticity diagram",[14,114,115],{},"So I assume that CIE 1931 is basically a map of all colors humans can see.",[14,117,118],{},"To be precise, it is not fully correct. The diagram represents colors humans can perceive in terms of hue and saturation, but not their brightness.",[14,120,121],{},"In any case, I think about it as a \"master map of colors\". It might be an oversimplification, but it is enough for practical usage.",[86,123,125],{"id":124},"whats-the-difference-between-rgb-and-srgb","What's the difference between RGB and sRGB?",[14,127,128,133,134,138],{},[93,129,132],{"href":130,"rel":131},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRGB_color_model",[97],"RGB is an additive color model",", in which the red, green, and blue colors are added together. There is also a subtractive color model, ",[93,135,49],{"href":136,"rel":137},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCMYK_color_model",[97],", but that is a different story.",[14,140,141,145],{},[93,142,43],{"href":143,"rel":144},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSRGB",[97]," stands for standard RGB. It is a color space standard developed by Hewlett-Packard and Microsoft in 1996 to ensure consistent color display across different devices like computer monitors and printers.",[14,147,148],{},"sRGB is a subset of CIE 1931, which approximately looks like this:",[101,150,153],{":hasBorder":103,":rounded":103,"alt":151,"src":152},"sRGB gamut within the CIE 1931 diagram","\u002Fimg\u002Foklch\u002Fsrgb-gamut.png",[107,154,155],{"v-slot:description":109},[14,156,157],{},"sRGB gamut plotted within the CIE 1931 chromaticity diagram",[14,159,160],{},"So there is a \"master gamut\" that has all colors and a subset, which is sRGB.",[14,162,163],{},"In the sRGB space we can describe green by using HEX, RGB, or HSL values.",[101,165,168],{":hasBorder":103,":rounded":103,"alt":166,"src":167},"Different CSS ways to define green in sRGB","\u002Fimg\u002Foklch\u002Fgreen-css-values.png",[107,169,170],{"v-slot:description":109},[14,171,172],{},"Different ways of setting the green color in the sRGB color space via CSS",[86,174,61],{"id":175},"p3-colors",[14,177,178],{},"For many years sRGB was enough because displays could not show anything wider anyway.",[14,180,181],{},"The first monitors capable of reproducing a larger gamut appeared around 2008 (HP DreamColor with around 97% DCI-P3).",[14,183,184],{},"Apple later standardized a consumer-friendly version called Display P3 in 2015, and by 2016 P3 began spreading across laptops, phones, and desktop monitors.",[14,186,187],{},"Along with P3, there are other wide-gamut color spaces such as Adobe RGB and Rec.2020. They also cover a wider range of colors compared to sRGB but are used in different industries and for different hardware.",[101,189,192],{":hasBorder":103,":rounded":103,"alt":190,"src":191},"P3 gamut and other common RGB color spaces","\u002Fimg\u002Foklch\u002Fp3-vs-other-gamuts.png",[107,193,194],{"v-slot:description":109},[14,195,196],{},"The CIE 1931 chromaticity diagram showing the P3 gamut, and the gamuts of some other common RGB color spaces",[86,198,200],{"id":199},"oklab-and-oklch","OKLAB and OKLCH",[14,202,203],{},"OKLAB is a more modern, perceptually uniform color space developed in 2020. Perceptually uniform means that colors change in a way that feels visually even and consistent for humans.",[14,205,206,207,212],{},"In CSS you can set it by using the ",[93,208,211],{"href":209,"rel":210},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fcolor_value\u002Foklab",[97],"oklab"," function.",[101,214,217],{":hasBorder":103,":rounded":103,"alt":215,"src":216},"Example of oklab() usage in CSS","\u002Fimg\u002Foklch\u002Foklab-css-example.png",[107,218,219],{"v-slot:description":109},[14,220,221],{},"An example of oklab() usage in CSS",[14,223,224],{},"It takes three params:",[21,226,227,233,239],{},[24,228,229,232],{},[34,230,231],{},"L (Lightness)",": ranges from 0.0 (black) to 1.0 (white).",[24,234,235,238],{},[34,236,237],{},"a (Green-Red axis)",": negative values are green, positive values are red.",[24,240,241,244],{},[34,242,243],{},"b (Blue-Yellow axis)",": negative values are blue, positive values are yellow.",[14,246,247,248,253],{},"While OKLCH, as defined in ",[93,249,252],{"href":250,"rel":251},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fcolor_value\u002Foklch",[97],"MDN",":",[255,256,257],"blockquote",{},[14,258,259,260,264,265,267,268,271,272,275,276,279,280,283],{},"The ",[261,262,263],"code",{},"oklch()"," functional notation expresses a given color in the Oklab color space. ",[261,266,263],{}," is the cylindrical form of ",[261,269,270],{},"oklab()",", using the same ",[261,273,274],{},"L"," axis, but with polar Chroma (",[261,277,278],{},"C",") and Hue (",[261,281,282],{},"h",") coordinates.",[14,285,286],{},"In summary, Oklab and Oklch are two coordinate systems describing the same perceptually uniform color space, with Oklch being the more user-friendly option.",[101,288,291],{":hasBorder":103,":rounded":103,"alt":289,"src":290},"OKLAB and OKLCH comparison","\u002Fimg\u002Foklch\u002Foklab-vs-oklch.png",[107,292,293],{"v-slot:description":109},[14,294,295],{},"OKLAB and OKLCH are two representations of the same color space",[14,297,298],{},"It takes three params as well:",[21,300,301,306,312],{},[24,302,303,305],{},[34,304,231],{},": perceived brightness of the color, from 0 to 1 (or 0% to 100%).",[24,307,308,311],{},[34,309,310],{},"C (Chroma)",": color intensity or vividness. Practical values usually stay below 0.5.",[24,313,314,317],{},[34,315,316],{},"H (Hue)",": the type of color, such as red, blue, or green. Ranges from 0deg to 360deg.",[14,319,320],{},"This is way more readable.",[86,322,324],{"id":323},"but-why-do-we-need-oklch","But why do we need OKLCH?",[326,327,329],"h3",{"id":328},"wide-gamut-support-eg-p3-colors","Wide gamut support, e.g. P3 Colors",[14,331,332],{},"In Chrome DevTools, if you set a color using oklch, you will see extra colors available.",[101,334,337],{":hasBorder":103,":rounded":103,"alt":335,"src":336},"Chrome DevTools showing extended gamut with OKLCH","\u002Fimg\u002Foklch\u002Fchrome-devtools-oklch.png",[107,338,339],{"v-slot:description":109},[14,340,341],{},"Chrome DevTools visualization for OKLCH colors",[14,343,344],{},"OKLCH does not increase the gamut itself, it just helps navigate it more predictably.",[326,346,348],{"id":347},"better-than-hsl-for-accessibility","Better than HSL for accessibility",[14,350,351,352,99],{},"Look at the picture ",[93,353,356],{"href":354,"rel":355},"https:\u002F\u002Fevilmartians.com\u002Fchronicles\u002Foklch-in-css-why-quit-rgb-hsl",[97],"from this article",[101,358,361],{":hasBorder":103,":rounded":103,"alt":359,"src":360},"HSL vs OKLCH accessibility comparison","\u002Fimg\u002Foklch\u002Fhsl-vs-oklch-accessibility.png",[107,362,363],{"v-slot:description":109},[14,364,365],{},"Accessibility comparison between HSL and OKLCH when only hue changes",[14,367,368],{},"In both HSL and OKLCH only the hue value has been changed, which made the HSL version inaccessible while OKLCH remains accessible.",[86,370,372],{"id":371},"must-read","Must read",[21,374,375,382,388],{},[24,376,377],{},[93,378,381],{"href":379,"rel":380},"https:\u002F\u002Foklch.net\u002F",[97],"oklch.net",[24,383,384],{},[93,385,387],{"href":354,"rel":386},[97],"evilmartians.com\u002Fchronicles\u002Foklch-in-css-why-quit-rgb-hsl",[24,389,390,391],{},"Converter: ",[93,392,395],{"href":393,"rel":394},"https:\u002F\u002Foklch.com\u002F",[97],"oklch.com",[86,397,399],{"id":398},"conclusion","Conclusion",[14,401,402],{},"It's time to switch to oklch, use wider gamuts, and choose more vibrant yet accessible colors.",{"title":109,"searchDepth":404,"depth":404,"links":405},2,[406,407,408,409,410,415,416],{"id":88,"depth":404,"text":36},{"id":124,"depth":404,"text":125},{"id":175,"depth":404,"text":61},{"id":199,"depth":404,"text":200},{"id":323,"depth":404,"text":324,"children":411},[412,414],{"id":328,"depth":413,"text":329},3,{"id":347,"depth":413,"text":348},{"id":371,"depth":404,"text":372},{"id":398,"depth":404,"text":399},"2026-02-25T02:03:20+04:00","A practical explanation of OKLCH: where it comes from, how it relates to CIE 1931, RGB, sRGB, P3, and why it helps with accessible color work.\n","md",null,{},true,"\u002Farticles\u002Fwhat-is-oklch-and-why-you-should-use-it",{"title":5,"description":418},{"loc":423},"articles\u002F16.What-is-oklch-and-why-you-should-use-it","Gs2WNPqmNdlESL0R7pYeieICN5ift8Uhg99De5YGvj0"]