[{"data":1,"prerenderedAt":1257},["ShallowReactive",2],{"guide-oklch-color-space-explained":3},{"id":4,"title":5,"body":6,"date":1249,"description":1250,"extension":1251,"meta":1252,"navigation":721,"path":1253,"readingTime":458,"seo":1254,"stem":1255,"__hash__":1256},"guides\u002Fguides\u002Foklch-color-space-explained.md","OKLCH Color Space Explained",{"type":7,"value":8,"toc":1231},"minimark",[9,14,18,21,29,33,36,113,124,129,132,175,178,217,220,224,318,322,329,333,337,340,615,618,622,625,784,788,791,932,936,997,1000,1052,1058,1062,1114,1120,1184,1188,1211,1215,1218,1227],[10,11,13],"h2",{"id":12},"the-problem-oklch-solves","The Problem OKLCH Solves",[15,16,17],"p",{},"Traditional color spaces like HSL and RGB have a critical flaw: they don't match human perception. In HSL, a lightness value of 50% doesn't look equally bright across different hues. A yellow at HSL lightness 50% appears much brighter to the eye than a blue at the same value. This makes HSL unreliable for design systems.",[15,19,20],{},"RGB is worse — it's tied to hardware (red, green, blue phosphors) and tells you nothing about how a color actually looks to a human.",[15,22,23,24,28],{},"OKLCH (Okabe-Lab Chroma-Hue) fixes this by being ",[25,26,27],"strong",{},"perceptually uniform",". Equal numeric changes produce equal visual changes, regardless of hue. This makes it the first color space that works the way designers actually think.",[10,30,32],{"id":31},"how-oklch-works","How OKLCH Works",[15,34,35],{},"OKLCH uses three components:",[37,38,39,58],"table",{},[40,41,42],"thead",{},[43,44,45,49,52,55],"tr",{},[46,47,48],"th",{},"Component",[46,50,51],{},"What It Controls",[46,53,54],{},"Range",[46,56,57],{},"Analogy",[59,60,61,79,96],"tbody",{},[43,62,63,70,73,76],{},[64,65,66,69],"td",{},[25,67,68],{},"L"," (Lightness)",[64,71,72],{},"Perceived brightness",[64,74,75],{},"0–1",[64,77,78],{},"HSL lightness, but accurate",[43,80,81,87,90,93],{},[64,82,83,86],{},[25,84,85],{},"C"," (Chroma)",[64,88,89],{},"Color intensity\u002Fsaturation",[64,91,92],{},"0–0.4+",[64,94,95],{},"HSL saturation, but uniform",[43,97,98,104,107,110],{},[64,99,100,103],{},[25,101,102],{},"H"," (Hue)",[64,105,106],{},"Color angle on the wheel",[64,108,109],{},"0–360",[64,111,112],{},"Same as HSL hue",[114,115,120],"pre",{"className":116,"code":118,"language":119},[117],"language-text","oklch(L C H)\noklch(0.7 0.15 150)  \u002F* A medium-bright green *\u002F\n","text",[121,122,118],"code",{"__ignoreMap":123},"",[125,126,128],"h3",{"id":127},"why-perceptual-uniformity-matters","Why Perceptual Uniformity Matters",[15,130,131],{},"Consider two colors at the same HSL lightness (50%):",[37,133,134,147],{},[40,135,136],{},[43,137,138,141,144],{},[46,139,140],{},"Color",[46,142,143],{},"HSL",[46,145,146],{},"Perceived Brightness",[59,148,149,162],{},[43,150,151,154,159],{},[64,152,153],{},"Yellow",[64,155,156],{},[121,157,158],{},"hsl(50, 100%, 50%)",[64,160,161],{},"Very bright",[43,163,164,167,172],{},[64,165,166],{},"Blue",[64,168,169],{},[121,170,171],{},"hsl(230, 100%, 50%)",[64,173,174],{},"Much darker",[15,176,177],{},"In OKLCH, you'd express these with different lightness values to match their actual perceived brightness:",[37,179,180,191],{},[40,181,182],{},[43,183,184,186,189],{},[46,185,140],{},[46,187,188],{},"OKLCH",[46,190,146],{},[59,192,193,205],{},[43,194,195,197,202],{},[64,196,153],{},[64,198,199],{},[121,200,201],{},"oklch(0.82 0.18 90)",[64,203,204],{},"0.82 (bright)",[43,206,207,209,214],{},[64,208,166],{},[64,210,211],{},[121,212,213],{},"oklch(0.45 0.15 260)",[64,215,216],{},"0.45 (dark)",[15,218,219],{},"This is the key difference: OKLCH lightness matches what your eyes see.",[10,221,223],{"id":222},"oklch-vs-other-color-spaces","OKLCH vs Other Color Spaces",[37,225,226,243],{},[40,227,228],{},[43,229,230,233,235,237,240],{},[46,231,232],{},"Feature",[46,234,188],{},[46,236,143],{},[46,238,239],{},"RGB",[46,241,242],{},"LCH",[59,244,245,261,274,289,303],{},[43,246,247,250,253,256,258],{},[64,248,249],{},"Perceptually uniform",[64,251,252],{},"Yes",[64,254,255],{},"No",[64,257,255],{},[64,259,260],{},"Mostly",[43,262,263,266,268,270,272],{},[64,264,265],{},"Hue-independent lightness",[64,267,252],{},[64,269,255],{},[64,271,255],{},[64,273,260],{},[43,275,276,279,282,285,287],{},[64,277,278],{},"CSS support",[64,280,281],{},"Modern browsers",[64,283,284],{},"All",[64,286,284],{},[64,288,281],{},[43,290,291,294,296,299,301],{},[64,292,293],{},"Intuitive for design",[64,295,252],{},[64,297,298],{},"Yes (misleadingly)",[64,300,255],{},[64,302,252],{},[43,304,305,308,310,312,315],{},[64,306,307],{},"No hue shift in gradients",[64,309,252],{},[64,311,255],{},[64,313,314],{},"N\u002FA",[64,316,317],{},"Some",[125,319,321],{"id":320},"oklch-vs-lch","OKLCH vs LCH",[15,323,324,325,328],{},"LCH (CIE LCH) was an earlier attempt at perceptual uniformity. It's better than HSL but still has a known issue: the ",[25,326,327],{},"blue-purple shift",". Adjusting lightness in LCH can unintentionally shift the hue, particularly in the blue range. OKLCH corrects this with a newer underlying model (OKLAB), making it the most perceptually accurate option available.",[10,330,332],{"id":331},"practical-uses-in-css","Practical Uses in CSS",[125,334,336],{"id":335},"consistent-shade-scales","Consistent Shade Scales",[15,338,339],{},"The biggest win: generate shade scales by changing only lightness while keeping chroma and hue constant. The result is visually even steps — no surprises:",[114,341,345],{"className":342,"code":343,"language":344,"meta":123,"style":123},"language-css shiki shiki-themes github-light github-dark",":root {\n  --brand-50:  oklch(0.97 0.03 260);\n  --brand-100: oklch(0.93 0.06 260);\n  --brand-200: oklch(0.85 0.10 260);\n  --brand-300: oklch(0.75 0.14 260);\n  --brand-400: oklch(0.65 0.17 260);\n  --brand-500: oklch(0.55 0.20 260);\n  --brand-600: oklch(0.45 0.18 260);\n  --brand-700: oklch(0.37 0.15 260);\n  --brand-800: oklch(0.28 0.12 260);\n  --brand-900: oklch(0.22 0.10 260);\n  --brand-950: oklch(0.15 0.08 260);\n}\n","css",[121,346,347,360,389,412,434,456,478,500,522,544,566,587,609],{"__ignoreMap":123},[348,349,352,356],"span",{"class":350,"line":351},"line",1,[348,353,355],{"class":354},"sScJk",":root",[348,357,359],{"class":358},"sVt8B"," {\n",[348,361,363,367,370,374,377,380,383,386],{"class":350,"line":362},2,[348,364,366],{"class":365},"s4XuR","  --brand-50",[348,368,369],{"class":358},":  ",[348,371,373],{"class":372},"sj4cs","oklch",[348,375,376],{"class":358},"(",[348,378,379],{"class":372},"0.97",[348,381,382],{"class":372}," 0.03",[348,384,385],{"class":372}," 260",[348,387,388],{"class":358},");\n",[348,390,392,395,398,400,402,405,408,410],{"class":350,"line":391},3,[348,393,394],{"class":365},"  --brand-100",[348,396,397],{"class":358},": ",[348,399,373],{"class":372},[348,401,376],{"class":358},[348,403,404],{"class":372},"0.93",[348,406,407],{"class":372}," 0.06",[348,409,385],{"class":372},[348,411,388],{"class":358},[348,413,415,418,420,422,424,427,430,432],{"class":350,"line":414},4,[348,416,417],{"class":365},"  --brand-200",[348,419,397],{"class":358},[348,421,373],{"class":372},[348,423,376],{"class":358},[348,425,426],{"class":372},"0.85",[348,428,429],{"class":372}," 0.10",[348,431,385],{"class":372},[348,433,388],{"class":358},[348,435,437,440,442,444,446,449,452,454],{"class":350,"line":436},5,[348,438,439],{"class":365},"  --brand-300",[348,441,397],{"class":358},[348,443,373],{"class":372},[348,445,376],{"class":358},[348,447,448],{"class":372},"0.75",[348,450,451],{"class":372}," 0.14",[348,453,385],{"class":372},[348,455,388],{"class":358},[348,457,459,462,464,466,468,471,474,476],{"class":350,"line":458},6,[348,460,461],{"class":365},"  --brand-400",[348,463,397],{"class":358},[348,465,373],{"class":372},[348,467,376],{"class":358},[348,469,470],{"class":372},"0.65",[348,472,473],{"class":372}," 0.17",[348,475,385],{"class":372},[348,477,388],{"class":358},[348,479,481,484,486,488,490,493,496,498],{"class":350,"line":480},7,[348,482,483],{"class":365},"  --brand-500",[348,485,397],{"class":358},[348,487,373],{"class":372},[348,489,376],{"class":358},[348,491,492],{"class":372},"0.55",[348,494,495],{"class":372}," 0.20",[348,497,385],{"class":372},[348,499,388],{"class":358},[348,501,503,506,508,510,512,515,518,520],{"class":350,"line":502},8,[348,504,505],{"class":365},"  --brand-600",[348,507,397],{"class":358},[348,509,373],{"class":372},[348,511,376],{"class":358},[348,513,514],{"class":372},"0.45",[348,516,517],{"class":372}," 0.18",[348,519,385],{"class":372},[348,521,388],{"class":358},[348,523,525,528,530,532,534,537,540,542],{"class":350,"line":524},9,[348,526,527],{"class":365},"  --brand-700",[348,529,397],{"class":358},[348,531,373],{"class":372},[348,533,376],{"class":358},[348,535,536],{"class":372},"0.37",[348,538,539],{"class":372}," 0.15",[348,541,385],{"class":372},[348,543,388],{"class":358},[348,545,547,550,552,554,556,559,562,564],{"class":350,"line":546},10,[348,548,549],{"class":365},"  --brand-800",[348,551,397],{"class":358},[348,553,373],{"class":372},[348,555,376],{"class":358},[348,557,558],{"class":372},"0.28",[348,560,561],{"class":372}," 0.12",[348,563,385],{"class":372},[348,565,388],{"class":358},[348,567,569,572,574,576,578,581,583,585],{"class":350,"line":568},11,[348,570,571],{"class":365},"  --brand-900",[348,573,397],{"class":358},[348,575,373],{"class":372},[348,577,376],{"class":358},[348,579,580],{"class":372},"0.22",[348,582,429],{"class":372},[348,584,385],{"class":372},[348,586,388],{"class":358},[348,588,590,593,595,597,599,602,605,607],{"class":350,"line":589},12,[348,591,592],{"class":365},"  --brand-950",[348,594,397],{"class":358},[348,596,373],{"class":372},[348,598,376],{"class":358},[348,600,601],{"class":372},"0.15",[348,603,604],{"class":372}," 0.08",[348,606,385],{"class":372},[348,608,388],{"class":358},[348,610,612],{"class":350,"line":611},13,[348,613,614],{"class":358},"}\n",[15,616,617],{},"Every step looks equally different from its neighbor. Try that in HSL and you'll get inconsistent visual gaps.",[125,619,621],{"id":620},"better-gradients","Better Gradients",[15,623,624],{},"HSL gradients often pass through muddy middle tones because hue interpolation isn't perceptually uniform. OKLCH gradients stay vivid:",[114,626,628],{"className":342,"code":627,"language":344,"meta":123,"style":123},".gradient-hsl {\n  background: linear-gradient(to right, hsl(0, 80%, 55%), hsl(240, 80%, 55%));\n  \u002F* Passes through dull gray in the middle *\u002F\n}\n\n.gradient-oklch {\n  background: linear-gradient(to right, oklch(0.6 0.2 25), oklch(0.5 0.2 280));\n  \u002F* Stays vivid and perceptually even throughout *\u002F\n}\n",[121,629,630,637,707,713,717,723,730,775,780],{"__ignoreMap":123},[348,631,632,635],{"class":350,"line":351},[348,633,634],{"class":354},".gradient-hsl",[348,636,359],{"class":358},[348,638,639,642,644,647,649,653,656,659,662,664,667,669,672,675,677,680,682,685,687,689,692,694,696,698,700,702,704],{"class":350,"line":362},[348,640,641],{"class":372},"  background",[348,643,397],{"class":358},[348,645,646],{"class":372},"linear-gradient",[348,648,376],{"class":358},[348,650,652],{"class":651},"szBVR","to",[348,654,655],{"class":372}," right",[348,657,658],{"class":358},", ",[348,660,661],{"class":372},"hsl",[348,663,376],{"class":358},[348,665,666],{"class":372},"0",[348,668,658],{"class":358},[348,670,671],{"class":372},"80",[348,673,674],{"class":651},"%",[348,676,658],{"class":358},[348,678,679],{"class":372},"55",[348,681,674],{"class":651},[348,683,684],{"class":358},"), ",[348,686,661],{"class":372},[348,688,376],{"class":358},[348,690,691],{"class":372},"240",[348,693,658],{"class":358},[348,695,671],{"class":372},[348,697,674],{"class":651},[348,699,658],{"class":358},[348,701,679],{"class":372},[348,703,674],{"class":651},[348,705,706],{"class":358},"));\n",[348,708,709],{"class":350,"line":391},[348,710,712],{"class":711},"sJ8bj","  \u002F* Passes through dull gray in the middle *\u002F\n",[348,714,715],{"class":350,"line":414},[348,716,614],{"class":358},[348,718,719],{"class":350,"line":436},[348,720,722],{"emptyLinePlaceholder":721},true,"\n",[348,724,725,728],{"class":350,"line":458},[348,726,727],{"class":354},".gradient-oklch",[348,729,359],{"class":358},[348,731,732,734,736,738,740,742,744,746,748,750,753,756,759,761,763,765,768,770,773],{"class":350,"line":480},[348,733,641],{"class":372},[348,735,397],{"class":358},[348,737,646],{"class":372},[348,739,376],{"class":358},[348,741,652],{"class":651},[348,743,655],{"class":372},[348,745,658],{"class":358},[348,747,373],{"class":372},[348,749,376],{"class":358},[348,751,752],{"class":372},"0.6",[348,754,755],{"class":372}," 0.2",[348,757,758],{"class":372}," 25",[348,760,684],{"class":358},[348,762,373],{"class":372},[348,764,376],{"class":358},[348,766,767],{"class":372},"0.5",[348,769,755],{"class":372},[348,771,772],{"class":372}," 280",[348,774,706],{"class":358},[348,776,777],{"class":350,"line":502},[348,778,779],{"class":711},"  \u002F* Stays vivid and perceptually even throughout *\u002F\n",[348,781,782],{"class":350,"line":524},[348,783,614],{"class":358},[125,785,787],{"id":786},"accessible-color-manipulation","Accessible Color Manipulation",[15,789,790],{},"Need a lighter version with the same perceived hue? In HSL, you'd adjust lightness and get unexpected hue shifts. In OKLCH, bump the L value and the color stays consistent:",[114,792,794],{"className":342,"code":793,"language":344,"meta":123,"style":123},"\u002F* HSL: making lighter shifts the apparent hue *\u002F\n.button       { background: hsl(230, 80%, 45%); }  \u002F* blue-ish *\u002F\n.button-hover { background: hsl(230, 80%, 55%); }  \u002F* slightly purple shift *\u002F\n\n\u002F* OKLCH: making lighter preserves the hue *\u002F\n.button       { background: oklch(0.45 0.18 260); }\n.button-hover { background: oklch(0.55 0.18 260); }  \u002F* same hue, brighter *\u002F\n",[121,795,796,801,840,875,879,884,907],{"__ignoreMap":123},[348,797,798],{"class":350,"line":351},[348,799,800],{"class":711},"\u002F* HSL: making lighter shifts the apparent hue *\u002F\n",[348,802,803,806,809,812,814,816,818,821,823,825,827,829,832,834,837],{"class":350,"line":362},[348,804,805],{"class":354},".button",[348,807,808],{"class":358},"       { ",[348,810,811],{"class":372},"background",[348,813,397],{"class":358},[348,815,661],{"class":372},[348,817,376],{"class":358},[348,819,820],{"class":372},"230",[348,822,658],{"class":358},[348,824,671],{"class":372},[348,826,674],{"class":651},[348,828,658],{"class":358},[348,830,831],{"class":372},"45",[348,833,674],{"class":651},[348,835,836],{"class":358},"); }  ",[348,838,839],{"class":711},"\u002F* blue-ish *\u002F\n",[348,841,842,845,848,850,852,854,856,858,860,862,864,866,868,870,872],{"class":350,"line":391},[348,843,844],{"class":354},".button-hover",[348,846,847],{"class":358}," { ",[348,849,811],{"class":372},[348,851,397],{"class":358},[348,853,661],{"class":372},[348,855,376],{"class":358},[348,857,820],{"class":372},[348,859,658],{"class":358},[348,861,671],{"class":372},[348,863,674],{"class":651},[348,865,658],{"class":358},[348,867,679],{"class":372},[348,869,674],{"class":651},[348,871,836],{"class":358},[348,873,874],{"class":711},"\u002F* slightly purple shift *\u002F\n",[348,876,877],{"class":350,"line":414},[348,878,722],{"emptyLinePlaceholder":721},[348,880,881],{"class":350,"line":436},[348,882,883],{"class":711},"\u002F* OKLCH: making lighter preserves the hue *\u002F\n",[348,885,886,888,890,892,894,896,898,900,902,904],{"class":350,"line":458},[348,887,805],{"class":354},[348,889,808],{"class":358},[348,891,811],{"class":372},[348,893,397],{"class":358},[348,895,373],{"class":372},[348,897,376],{"class":358},[348,899,514],{"class":372},[348,901,517],{"class":372},[348,903,385],{"class":372},[348,905,906],{"class":358},"); }\n",[348,908,909,911,913,915,917,919,921,923,925,927,929],{"class":350,"line":480},[348,910,844],{"class":354},[348,912,847],{"class":358},[348,914,811],{"class":372},[348,916,397],{"class":358},[348,918,373],{"class":372},[348,920,376],{"class":358},[348,922,492],{"class":372},[348,924,517],{"class":372},[348,926,385],{"class":372},[348,928,836],{"class":358},[348,930,931],{"class":711},"\u002F* same hue, brighter *\u002F\n",[10,933,935],{"id":934},"browser-support","Browser Support",[37,937,938,951],{},[40,939,940],{},[43,941,942,945,948],{},[46,943,944],{},"Browser",[46,946,947],{},"Version",[46,949,950],{},"CSS Support",[59,952,953,967,978,988],{},[43,954,955,958,961],{},[64,956,957],{},"Chrome",[64,959,960],{},"111+",[64,962,963,966],{},[121,964,965],{},"oklch()"," in color values",[43,968,969,972,975],{},[64,970,971],{},"Firefox",[64,973,974],{},"113+",[64,976,977],{},"Full support",[43,979,980,983,986],{},[64,981,982],{},"Safari",[64,984,985],{},"15.4+",[64,987,977],{},[43,989,990,993,995],{},[64,991,992],{},"Edge",[64,994,960],{},[64,996,977],{},[15,998,999],{},"For older browsers, provide hex\u002Fhsl fallbacks:",[114,1001,1003],{"className":342,"code":1002,"language":344,"meta":123,"style":123},":root {\n  --brand-500: #3366ff;              \u002F* Fallback *\u002F\n  --brand-500: oklch(0.55 0.2 260); \u002F* Modern override *\u002F\n}\n",[121,1004,1005,1011,1026,1048],{"__ignoreMap":123},[348,1006,1007,1009],{"class":350,"line":351},[348,1008,355],{"class":354},[348,1010,359],{"class":358},[348,1012,1013,1015,1017,1020,1023],{"class":350,"line":362},[348,1014,483],{"class":365},[348,1016,397],{"class":358},[348,1018,1019],{"class":372},"#3366ff",[348,1021,1022],{"class":358},";              ",[348,1024,1025],{"class":711},"\u002F* Fallback *\u002F\n",[348,1027,1028,1030,1032,1034,1036,1038,1040,1042,1045],{"class":350,"line":391},[348,1029,483],{"class":365},[348,1031,397],{"class":358},[348,1033,373],{"class":372},[348,1035,376],{"class":358},[348,1037,492],{"class":372},[348,1039,755],{"class":372},[348,1041,385],{"class":372},[348,1043,1044],{"class":358},"); ",[348,1046,1047],{"class":711},"\u002F* Modern override *\u002F\n",[348,1049,1050],{"class":350,"line":414},[348,1051,614],{"class":358},[15,1053,1054,1055,1057],{},"Browsers that don't understand ",[121,1056,965],{}," will use the first declaration; those that do will use the second.",[10,1059,1061],{"id":1060},"converting-between-formats","Converting Between Formats",[37,1063,1064,1077],{},[40,1065,1066],{},[43,1067,1068,1071,1074],{},[46,1069,1070],{},"From",[46,1072,1073],{},"To OKLCH",[46,1075,1076],{},"Method",[59,1078,1079,1096,1105],{},[43,1080,1081,1084,1086],{},[64,1082,1083],{},"Hex",[64,1085,188],{},[64,1087,1088,1089,658,1092,1095],{},"Use a color converter tool or library (",[121,1090,1091],{},"culori",[121,1093,1094],{},"colorjs.io",")",[43,1097,1098,1100,1102],{},[64,1099,239],{},[64,1101,188],{},[64,1103,1104],{},"Same — the math requires intermediate LAB conversion",[43,1106,1107,1109,1111],{},[64,1108,143],{},[64,1110,188],{},[64,1112,1113],{},"Direct conversion not possible; go HSL → RGB → OKLCH",[15,1115,1116,1117,1119],{},"For build-time conversion, ",[121,1118,1091],{}," works well:",[114,1121,1125],{"className":1122,"code":1123,"language":1124,"meta":123,"style":123},"language-javascript shiki shiki-themes github-light github-dark","import { converter } from 'culori'\n\nconst toOklch = converter('oklch')\ntoOklch('#3366ff') \u002F\u002F { mode: 'oklch', l: 0.55, c: 0.20, h: 260 }\n","javascript",[121,1126,1127,1142,1146,1168],{"__ignoreMap":123},[348,1128,1129,1132,1135,1138],{"class":350,"line":351},[348,1130,1131],{"class":651},"import",[348,1133,1134],{"class":358}," { converter } ",[348,1136,1137],{"class":651},"from",[348,1139,1141],{"class":1140},"sZZnC"," 'culori'\n",[348,1143,1144],{"class":350,"line":362},[348,1145,722],{"emptyLinePlaceholder":721},[348,1147,1148,1151,1154,1157,1160,1162,1165],{"class":350,"line":391},[348,1149,1150],{"class":651},"const",[348,1152,1153],{"class":372}," toOklch",[348,1155,1156],{"class":651}," =",[348,1158,1159],{"class":354}," converter",[348,1161,376],{"class":358},[348,1163,1164],{"class":1140},"'oklch'",[348,1166,1167],{"class":358},")\n",[348,1169,1170,1173,1175,1178,1181],{"class":350,"line":414},[348,1171,1172],{"class":354},"toOklch",[348,1174,376],{"class":358},[348,1176,1177],{"class":1140},"'#3366ff'",[348,1179,1180],{"class":358},") ",[348,1182,1183],{"class":711},"\u002F\u002F { mode: 'oklch', l: 0.55, c: 0.20, h: 260 }\n",[10,1185,1187],{"id":1186},"related-guides","Related Guides",[1189,1190,1191,1199,1205],"ul",{},[1192,1193,1194],"li",{},[1195,1196,1198],"a",{"href":1197},"\u002Fguides\u002Fcolor-code-formats","Color Code Formats",[1192,1200,1201],{},[1195,1202,1204],{"href":1203},"\u002Fguides\u002Fdesign-color-fundamentals","Design Color Fundamentals",[1192,1206,1207],{},[1195,1208,1210],{"href":1209},"\u002Fguides\u002Feyedropper-tool-web-design","Eyedropper Tools for Web Designers",[10,1212,1214],{"id":1213},"try-it-yourself","Try It Yourself",[15,1216,1217],{},"Convert any color to OKLCH and see the perceptually uniform difference. Our color picker supports hex, RGB, HSL, and OKLCH with live preview.",[15,1219,1220,1221],{},"👉 ",[1195,1222,1224],{"href":1223},"\u002Ftools\u002Fcolor-picker",[25,1225,1226],{},"Free Color Picker",[1228,1229,1230],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":123,"searchDepth":362,"depth":362,"links":1232},[1233,1234,1237,1240,1245,1246,1247,1248],{"id":12,"depth":362,"text":13},{"id":31,"depth":362,"text":32,"children":1235},[1236],{"id":127,"depth":391,"text":128},{"id":222,"depth":362,"text":223,"children":1238},[1239],{"id":320,"depth":391,"text":321},{"id":331,"depth":362,"text":332,"children":1241},[1242,1243,1244],{"id":335,"depth":391,"text":336},{"id":620,"depth":391,"text":621},{"id":786,"depth":391,"text":787},{"id":934,"depth":362,"text":935},{"id":1060,"depth":362,"text":1061},{"id":1186,"depth":362,"text":1187},{"id":1213,"depth":362,"text":1214},"2026-05-28","Why OKLCH is the future of CSS colors and how it solves perceived uniformity problems.","md",{"immutable":721},"\u002Fguides\u002Foklch-color-space-explained",{"title":5,"description":1250},"guides\u002Foklch-color-space-explained","dCjGR3980i_za8RplXhdJYXM5ZJHcriG-01Mg6fXXU0",1780401335520]