[{"data":1,"prerenderedAt":2648},["ShallowReactive",2],{"guide-css-color-functions":3},{"id":4,"title":5,"body":6,"date":2640,"description":2641,"extension":2642,"meta":2643,"navigation":347,"path":2644,"readingTime":945,"seo":2645,"stem":2646,"__hash__":2647},"guides\u002Fguides\u002Fcss-color-functions.md","Modern CSS Color Functions: rgb(), hsl(), oklch(), and More",{"type":7,"value":8,"toc":2609},"minimark",[9,14,18,30,34,39,42,106,109,130,134,141,213,220,268,272,275,393,397,442,577,581,588,638,642,667,1010,1014,1023,1112,1116,1122,1170,1174,1192,1196,1230,1457,1461,1467,1592,1596,1622,1652,1817,1821,1824,1966,1973,1979,2126,2130,2134,2245,2249,2441,2445,2477,2591,2595,2605],[10,11,13],"h2",{"id":12},"the-evolution-of-css-color-syntax","The Evolution of CSS Color Syntax",[15,16,17],"p",{},"CSS color handling has undergone a remarkable transformation in recent years. Gone are the days when hex codes and named colors were our only options. Today's CSS provides a rich set of color functions that offer greater precision, better readability, and more powerful color manipulation capabilities.",[15,19,20,21,25,26,29],{},"The evolution has moved from the limited ",[22,23,24],"code",{},"color: red;"," and ",[22,27,28],{},"#FF0000"," syntax toward modern functions that separate hue, saturation, and lightness in intuitive ways. This progression isn't just about adding features—it's about making color in CSS more predictable, accessible, and powerful.",[10,31,33],{"id":32},"legacy-syntax-hex-and-rgb","Legacy Syntax: hex and rgb()",[35,36,38],"h3",{"id":37},"hexadecimal-colors","Hexadecimal Colors",[15,40,41],{},"Hex codes have been the backbone of web colors for decades:",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-css shiki shiki-themes github-light github-dark",".hero {\n  background-color: #3B82F6; \u002F* Blue *\u002F\n  color: #FFFFFF; \u002F* White *\u002F\n}\n","css","",[22,50,51,64,84,100],{"__ignoreMap":48},[52,53,56,60],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sScJk",".hero",[52,61,63],{"class":62},"sVt8B"," {\n",[52,65,67,71,74,77,80],{"class":54,"line":66},2,[52,68,70],{"class":69},"sj4cs","  background-color",[52,72,73],{"class":62},": ",[52,75,76],{"class":69},"#3B82F6",[52,78,79],{"class":62},"; ",[52,81,83],{"class":82},"sJ8bj","\u002F* Blue *\u002F\n",[52,85,87,90,92,95,97],{"class":54,"line":86},3,[52,88,89],{"class":69},"  color",[52,91,73],{"class":62},[52,93,94],{"class":69},"#FFFFFF",[52,96,79],{"class":62},[52,98,99],{"class":82},"\u002F* White *\u002F\n",[52,101,103],{"class":54,"line":102},4,[52,104,105],{"class":62},"}\n",[15,107,108],{},"Hex notation represents colors using three pairs of hexadecimal digits (00-FF) for red, green, and blue. While compact, hex has significant drawbacks:",[110,111,112,120,123],"ul",{},[113,114,115,116,119],"li",{},"Difficult to intuitively understand what color ",[22,117,118],{},"#E879F0"," represents",[113,121,122],{},"No built-in way to adjust lightness or saturation",[113,124,125,126,129],{},"No alpha\u002Ftransparency support without the ",[22,127,128],{},"#RRGGBBAA"," extension (which has poor browser support)",[35,131,133],{"id":132},"the-old-rgb-function","The Old rgb() Function",[15,135,136,137,140],{},"The traditional ",[22,138,139],{},"rgb()"," function required comma-separated values:",[43,142,144],{"className":45,"code":143,"language":47,"meta":48,"style":48},".button {\n  background-color: rgb(59, 130, 246); \u002F* Blue *\u002F\n  color: rgb(255, 255, 255); \u002F* White *\u002F\n}\n",[22,145,146,153,184,209],{"__ignoreMap":48},[52,147,148,151],{"class":54,"line":55},[52,149,150],{"class":58},".button",[52,152,63],{"class":62},[52,154,155,157,159,162,165,168,171,174,176,179,182],{"class":54,"line":66},[52,156,70],{"class":69},[52,158,73],{"class":62},[52,160,161],{"class":69},"rgb",[52,163,164],{"class":62},"(",[52,166,167],{"class":69},"59",[52,169,170],{"class":62},", ",[52,172,173],{"class":69},"130",[52,175,170],{"class":62},[52,177,178],{"class":69},"246",[52,180,181],{"class":62},"); ",[52,183,83],{"class":82},[52,185,186,188,190,192,194,197,199,201,203,205,207],{"class":54,"line":86},[52,187,89],{"class":69},[52,189,73],{"class":62},[52,191,161],{"class":69},[52,193,164],{"class":62},[52,195,196],{"class":69},"255",[52,198,170],{"class":62},[52,200,196],{"class":69},[52,202,170],{"class":62},[52,204,196],{"class":69},[52,206,181],{"class":62},[52,208,99],{"class":82},[52,210,211],{"class":54,"line":102},[52,212,105],{"class":62},[15,214,215,216,219],{},"With alpha transparency, you'd use ",[22,217,218],{},"rgba()",":",[43,221,223],{"className":45,"code":222,"language":47,"meta":48,"style":48},".overlay {\n  background-color: rgba(0, 0, 0, 0.5); \u002F* Semi-transparent black *\u002F\n}\n",[22,224,225,232,264],{"__ignoreMap":48},[52,226,227,230],{"class":54,"line":55},[52,228,229],{"class":58},".overlay",[52,231,63],{"class":62},[52,233,234,236,238,241,243,246,248,250,252,254,256,259,261],{"class":54,"line":66},[52,235,70],{"class":69},[52,237,73],{"class":62},[52,239,240],{"class":69},"rgba",[52,242,164],{"class":62},[52,244,245],{"class":69},"0",[52,247,170],{"class":62},[52,249,245],{"class":69},[52,251,170],{"class":62},[52,253,245],{"class":69},[52,255,170],{"class":62},[52,257,258],{"class":69},"0.5",[52,260,181],{"class":62},[52,262,263],{"class":82},"\u002F* Semi-transparent black *\u002F\n",[52,265,266],{"class":54,"line":86},[52,267,105],{"class":62},[10,269,271],{"id":270},"modern-rgb-and-rgba-syntax","Modern rgb() and rgba() Syntax",[15,273,274],{},"CSS Color Level 4 introduced a space-separated syntax that's more consistent with other color functions:",[43,276,278],{"className":45,"code":277,"language":47,"meta":48,"style":48},".modern-rgb {\n  background-color: rgb(59 130 246); \u002F* No commas! *\u002F\n  color: rgb(255 255 255 \u002F 0.9); \u002F* Alpha with slash syntax *\u002F\n}\n\n.modern-rgba {\n  background-color: rgba(59 130 246 \u002F 50%); \u002F* Percentage alpha *\u002F\n}\n",[22,279,280,287,310,338,342,349,357,388],{"__ignoreMap":48},[52,281,282,285],{"class":54,"line":55},[52,283,284],{"class":58},".modern-rgb",[52,286,63],{"class":62},[52,288,289,291,293,295,297,299,302,305,307],{"class":54,"line":66},[52,290,70],{"class":69},[52,292,73],{"class":62},[52,294,161],{"class":69},[52,296,164],{"class":62},[52,298,167],{"class":69},[52,300,301],{"class":69}," 130",[52,303,304],{"class":69}," 246",[52,306,181],{"class":62},[52,308,309],{"class":82},"\u002F* No commas! *\u002F\n",[52,311,312,314,316,318,320,322,325,327,330,333,335],{"class":54,"line":86},[52,313,89],{"class":69},[52,315,73],{"class":62},[52,317,161],{"class":69},[52,319,164],{"class":62},[52,321,196],{"class":69},[52,323,324],{"class":69}," 255",[52,326,324],{"class":69},[52,328,329],{"class":62}," \u002F ",[52,331,332],{"class":69},"0.9",[52,334,181],{"class":62},[52,336,337],{"class":82},"\u002F* Alpha with slash syntax *\u002F\n",[52,339,340],{"class":54,"line":102},[52,341,105],{"class":62},[52,343,345],{"class":54,"line":344},5,[52,346,348],{"emptyLinePlaceholder":347},true,"\n",[52,350,352,355],{"class":54,"line":351},6,[52,353,354],{"class":58},".modern-rgba",[52,356,63],{"class":62},[52,358,360,362,364,366,368,370,372,374,376,379,383,385],{"class":54,"line":359},7,[52,361,70],{"class":69},[52,363,73],{"class":62},[52,365,240],{"class":69},[52,367,164],{"class":62},[52,369,167],{"class":69},[52,371,301],{"class":69},[52,373,304],{"class":69},[52,375,329],{"class":62},[52,377,378],{"class":69},"50",[52,380,382],{"class":381},"szBVR","%",[52,384,181],{"class":62},[52,386,387],{"class":82},"\u002F* Percentage alpha *\u002F\n",[52,389,391],{"class":54,"line":390},8,[52,392,105],{"class":62},[35,394,396],{"id":395},"key-improvements","Key Improvements",[398,399,400,413,424,433],"ol",{},[113,401,402,73,406,409,410],{},[403,404,405],"strong",{},"Space separation",[22,407,408],{},"rgb(59 130 246)"," instead of ",[22,411,412],{},"rgb(59, 130, 246)",[113,414,415,73,418,421,422],{},[403,416,417],{},"Slash for alpha",[22,419,420],{},"rgb(255 255 255 \u002F 0.5)"," instead of needing ",[22,423,218],{},[113,425,426,73,429,432],{},[403,427,428],{},"Percentage values",[22,430,431],{},"rgb(50% 50% 100%)"," is now valid",[113,434,435,73,438,441],{},[403,436,437],{},"None keyword",[22,439,440],{},"rgb(none none none)"," for intentionally missing components",[43,443,445],{"className":45,"code":444,"language":47,"meta":48,"style":48},"\u002F* All these are now valid *\u002F\n.valid-examples {\n  color: rgb(255 0 0);\n  color: rgb(100% 0% 0%);\n  color: rgb(255 0 0 \u002F 0.5);\n  color: rgb(255 0 0 \u002F 50%);\n  color: rgb(none none none); \u002F* Resets to default *\u002F\n}\n",[22,446,447,452,459,479,504,526,550,573],{"__ignoreMap":48},[52,448,449],{"class":54,"line":55},[52,450,451],{"class":82},"\u002F* All these are now valid *\u002F\n",[52,453,454,457],{"class":54,"line":66},[52,455,456],{"class":58},".valid-examples",[52,458,63],{"class":62},[52,460,461,463,465,467,469,471,474,476],{"class":54,"line":86},[52,462,89],{"class":69},[52,464,73],{"class":62},[52,466,161],{"class":69},[52,468,164],{"class":62},[52,470,196],{"class":69},[52,472,473],{"class":69}," 0",[52,475,473],{"class":69},[52,477,478],{"class":62},");\n",[52,480,481,483,485,487,489,492,494,496,498,500,502],{"class":54,"line":102},[52,482,89],{"class":69},[52,484,73],{"class":62},[52,486,161],{"class":69},[52,488,164],{"class":62},[52,490,491],{"class":69},"100",[52,493,382],{"class":381},[52,495,473],{"class":69},[52,497,382],{"class":381},[52,499,473],{"class":69},[52,501,382],{"class":381},[52,503,478],{"class":62},[52,505,506,508,510,512,514,516,518,520,522,524],{"class":54,"line":344},[52,507,89],{"class":69},[52,509,73],{"class":62},[52,511,161],{"class":69},[52,513,164],{"class":62},[52,515,196],{"class":69},[52,517,473],{"class":69},[52,519,473],{"class":69},[52,521,329],{"class":62},[52,523,258],{"class":69},[52,525,478],{"class":62},[52,527,528,530,532,534,536,538,540,542,544,546,548],{"class":54,"line":351},[52,529,89],{"class":69},[52,531,73],{"class":62},[52,533,161],{"class":69},[52,535,164],{"class":62},[52,537,196],{"class":69},[52,539,473],{"class":69},[52,541,473],{"class":69},[52,543,329],{"class":62},[52,545,378],{"class":69},[52,547,382],{"class":381},[52,549,478],{"class":62},[52,551,552,554,556,558,560,563,566,568,570],{"class":54,"line":359},[52,553,89],{"class":69},[52,555,73],{"class":62},[52,557,161],{"class":69},[52,559,164],{"class":62},[52,561,562],{"class":69},"none",[52,564,565],{"class":69}," none",[52,567,565],{"class":69},[52,569,181],{"class":62},[52,571,572],{"class":82},"\u002F* Resets to default *\u002F\n",[52,574,575],{"class":54,"line":390},[52,576,105],{"class":62},[10,578,580],{"id":579},"hsl-hue-saturation-lightness","hsl(): Hue, Saturation, Lightness",[15,582,583,584,587],{},"The ",[22,585,586],{},"hsl()"," function represents colors using a cylindrical coordinate system that aligns better with human perception:",[43,589,591],{"className":45,"code":590,"language":47,"meta":48,"style":48},".hsl-example {\n  \u002F* hsl(hue saturation lightness) *\u002F\n  background-color: hsl(217 91% 60%); \u002F* Same blue as before *\u002F\n}\n",[22,592,593,600,605,634],{"__ignoreMap":48},[52,594,595,598],{"class":54,"line":55},[52,596,597],{"class":58},".hsl-example",[52,599,63],{"class":62},[52,601,602],{"class":54,"line":66},[52,603,604],{"class":82},"  \u002F* hsl(hue saturation lightness) *\u002F\n",[52,606,607,609,611,614,616,619,622,624,627,629,631],{"class":54,"line":86},[52,608,70],{"class":69},[52,610,73],{"class":62},[52,612,613],{"class":69},"hsl",[52,615,164],{"class":62},[52,617,618],{"class":69},"217",[52,620,621],{"class":69}," 91",[52,623,382],{"class":381},[52,625,626],{"class":69}," 60",[52,628,382],{"class":381},[52,630,181],{"class":62},[52,632,633],{"class":82},"\u002F* Same blue as before *\u002F\n",[52,635,636],{"class":54,"line":102},[52,637,105],{"class":62},[35,639,641],{"id":640},"understanding-hsl-components","Understanding HSL Components",[110,643,644,655,661],{},[113,645,646,649,650],{},[403,647,648],{},"Hue"," (0-360): The color type, measured in degrees on the color wheel\n",[110,651,652],{},[113,653,654],{},"0° = Red, 120° = Green, 240° = Blue",[113,656,657,660],{},[403,658,659],{},"Saturation"," (0-100%): Color intensity (0% = gray, 100% = vivid)",[113,662,663,666],{},[403,664,665],{},"Lightness"," (0-100%): Brightness (0% = black, 50% = normal, 100% = white)",[43,668,670],{"className":45,"code":669,"language":47,"meta":48,"style":48},".color-palette {\n  --primary-hue: 217;\n  \n  --primary-50: hsl(var(--primary-hue) 91% 95%);\n  --primary-100: hsl(var(--primary-hue) 91% 90%);\n  --primary-200: hsl(var(--primary-hue) 91% 80%);\n  --primary-300: hsl(var(--primary-hue) 91% 70%);\n  --primary-400: hsl(var(--primary-hue) 91% 60%);\n  --primary-500: hsl(var(--primary-hue) 91% 50%);\n  --primary-600: hsl(var(--primary-hue) 91% 40%);\n  --primary-700: hsl(var(--primary-hue) 91% 30%);\n  --primary-800: hsl(var(--primary-hue) 91% 20%);\n  --primary-900: hsl(var(--primary-hue) 91% 10%);\n}\n",[22,671,672,679,692,697,731,761,791,821,850,881,912,943,974,1005],{"__ignoreMap":48},[52,673,674,677],{"class":54,"line":55},[52,675,676],{"class":58},".color-palette",[52,678,63],{"class":62},[52,680,681,685,687,689],{"class":54,"line":66},[52,682,684],{"class":683},"s4XuR","  --primary-hue",[52,686,73],{"class":62},[52,688,618],{"class":69},[52,690,691],{"class":62},";\n",[52,693,694],{"class":54,"line":86},[52,695,696],{"class":62},"  \n",[52,698,699,702,704,706,708,711,713,716,719,722,724,727,729],{"class":54,"line":102},[52,700,701],{"class":683},"  --primary-50",[52,703,73],{"class":62},[52,705,613],{"class":69},[52,707,164],{"class":62},[52,709,710],{"class":69},"var",[52,712,164],{"class":62},[52,714,715],{"class":683},"--primary-hue",[52,717,718],{"class":62},") ",[52,720,721],{"class":69},"91",[52,723,382],{"class":381},[52,725,726],{"class":69}," 95",[52,728,382],{"class":381},[52,730,478],{"class":62},[52,732,733,736,738,740,742,744,746,748,750,752,754,757,759],{"class":54,"line":344},[52,734,735],{"class":683},"  --primary-100",[52,737,73],{"class":62},[52,739,613],{"class":69},[52,741,164],{"class":62},[52,743,710],{"class":69},[52,745,164],{"class":62},[52,747,715],{"class":683},[52,749,718],{"class":62},[52,751,721],{"class":69},[52,753,382],{"class":381},[52,755,756],{"class":69}," 90",[52,758,382],{"class":381},[52,760,478],{"class":62},[52,762,763,766,768,770,772,774,776,778,780,782,784,787,789],{"class":54,"line":351},[52,764,765],{"class":683},"  --primary-200",[52,767,73],{"class":62},[52,769,613],{"class":69},[52,771,164],{"class":62},[52,773,710],{"class":69},[52,775,164],{"class":62},[52,777,715],{"class":683},[52,779,718],{"class":62},[52,781,721],{"class":69},[52,783,382],{"class":381},[52,785,786],{"class":69}," 80",[52,788,382],{"class":381},[52,790,478],{"class":62},[52,792,793,796,798,800,802,804,806,808,810,812,814,817,819],{"class":54,"line":359},[52,794,795],{"class":683},"  --primary-300",[52,797,73],{"class":62},[52,799,613],{"class":69},[52,801,164],{"class":62},[52,803,710],{"class":69},[52,805,164],{"class":62},[52,807,715],{"class":683},[52,809,718],{"class":62},[52,811,721],{"class":69},[52,813,382],{"class":381},[52,815,816],{"class":69}," 70",[52,818,382],{"class":381},[52,820,478],{"class":62},[52,822,823,826,828,830,832,834,836,838,840,842,844,846,848],{"class":54,"line":390},[52,824,825],{"class":683},"  --primary-400",[52,827,73],{"class":62},[52,829,613],{"class":69},[52,831,164],{"class":62},[52,833,710],{"class":69},[52,835,164],{"class":62},[52,837,715],{"class":683},[52,839,718],{"class":62},[52,841,721],{"class":69},[52,843,382],{"class":381},[52,845,626],{"class":69},[52,847,382],{"class":381},[52,849,478],{"class":62},[52,851,853,856,858,860,862,864,866,868,870,872,874,877,879],{"class":54,"line":852},9,[52,854,855],{"class":683},"  --primary-500",[52,857,73],{"class":62},[52,859,613],{"class":69},[52,861,164],{"class":62},[52,863,710],{"class":69},[52,865,164],{"class":62},[52,867,715],{"class":683},[52,869,718],{"class":62},[52,871,721],{"class":69},[52,873,382],{"class":381},[52,875,876],{"class":69}," 50",[52,878,382],{"class":381},[52,880,478],{"class":62},[52,882,884,887,889,891,893,895,897,899,901,903,905,908,910],{"class":54,"line":883},10,[52,885,886],{"class":683},"  --primary-600",[52,888,73],{"class":62},[52,890,613],{"class":69},[52,892,164],{"class":62},[52,894,710],{"class":69},[52,896,164],{"class":62},[52,898,715],{"class":683},[52,900,718],{"class":62},[52,902,721],{"class":69},[52,904,382],{"class":381},[52,906,907],{"class":69}," 40",[52,909,382],{"class":381},[52,911,478],{"class":62},[52,913,915,918,920,922,924,926,928,930,932,934,936,939,941],{"class":54,"line":914},11,[52,916,917],{"class":683},"  --primary-700",[52,919,73],{"class":62},[52,921,613],{"class":69},[52,923,164],{"class":62},[52,925,710],{"class":69},[52,927,164],{"class":62},[52,929,715],{"class":683},[52,931,718],{"class":62},[52,933,721],{"class":69},[52,935,382],{"class":381},[52,937,938],{"class":69}," 30",[52,940,382],{"class":381},[52,942,478],{"class":62},[52,944,946,949,951,953,955,957,959,961,963,965,967,970,972],{"class":54,"line":945},12,[52,947,948],{"class":683},"  --primary-800",[52,950,73],{"class":62},[52,952,613],{"class":69},[52,954,164],{"class":62},[52,956,710],{"class":69},[52,958,164],{"class":62},[52,960,715],{"class":683},[52,962,718],{"class":62},[52,964,721],{"class":69},[52,966,382],{"class":381},[52,968,969],{"class":69}," 20",[52,971,382],{"class":381},[52,973,478],{"class":62},[52,975,977,980,982,984,986,988,990,992,994,996,998,1001,1003],{"class":54,"line":976},13,[52,978,979],{"class":683},"  --primary-900",[52,981,73],{"class":62},[52,983,613],{"class":69},[52,985,164],{"class":62},[52,987,710],{"class":69},[52,989,164],{"class":62},[52,991,715],{"class":683},[52,993,718],{"class":62},[52,995,721],{"class":69},[52,997,382],{"class":381},[52,999,1000],{"class":69}," 10",[52,1002,382],{"class":381},[52,1004,478],{"class":62},[52,1006,1008],{"class":54,"line":1007},14,[52,1009,105],{"class":62},[35,1011,1013],{"id":1012},"modern-hsl-syntax","Modern hsl() Syntax",[15,1015,1016,1017,1019,1020,1022],{},"Like ",[22,1018,139],{},", modern ",[22,1021,586],{}," uses space separation:",[43,1024,1026],{"className":45,"code":1025,"language":47,"meta":48,"style":48},".modern-hsl {\n  color: hsl(217 91% 60%);\n  color: hsl(217 91% 60% \u002F 0.8); \u002F* With alpha *\u002F\n  color: hsl(none none none); \u002F* Reset *\u002F\n}\n",[22,1027,1028,1035,1057,1087,1108],{"__ignoreMap":48},[52,1029,1030,1033],{"class":54,"line":55},[52,1031,1032],{"class":58},".modern-hsl",[52,1034,63],{"class":62},[52,1036,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055],{"class":54,"line":66},[52,1038,89],{"class":69},[52,1040,73],{"class":62},[52,1042,613],{"class":69},[52,1044,164],{"class":62},[52,1046,618],{"class":69},[52,1048,621],{"class":69},[52,1050,382],{"class":381},[52,1052,626],{"class":69},[52,1054,382],{"class":381},[52,1056,478],{"class":62},[52,1058,1059,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1082,1084],{"class":54,"line":86},[52,1060,89],{"class":69},[52,1062,73],{"class":62},[52,1064,613],{"class":69},[52,1066,164],{"class":62},[52,1068,618],{"class":69},[52,1070,621],{"class":69},[52,1072,382],{"class":381},[52,1074,626],{"class":69},[52,1076,382],{"class":381},[52,1078,329],{"class":62},[52,1080,1081],{"class":69},"0.8",[52,1083,181],{"class":62},[52,1085,1086],{"class":82},"\u002F* With alpha *\u002F\n",[52,1088,1089,1091,1093,1095,1097,1099,1101,1103,1105],{"class":54,"line":102},[52,1090,89],{"class":69},[52,1092,73],{"class":62},[52,1094,613],{"class":69},[52,1096,164],{"class":62},[52,1098,562],{"class":69},[52,1100,565],{"class":69},[52,1102,565],{"class":69},[52,1104,181],{"class":62},[52,1106,1107],{"class":82},"\u002F* Reset *\u002F\n",[52,1109,1110],{"class":54,"line":344},[52,1111,105],{"class":62},[10,1113,1115],{"id":1114},"oklch-the-perceptually-uniform-revolution","oklch(): The Perceptually Uniform Revolution",[15,1117,1118,1121],{},[22,1119,1120],{},"oklch()"," is the newest and most scientifically advanced CSS color function. It uses the Oklab color space, which is perceptually uniform—meaning equal numerical changes produce equal perceived color differences.",[43,1123,1125],{"className":45,"code":1124,"language":47,"meta":48,"style":48},".oklch-example {\n  \u002F* oklch(lightness chroma hue) *\u002F\n  background-color: oklch(60% 0.2 264); \u002F* Perceptually pleasing blue *\u002F\n}\n",[22,1126,1127,1134,1139,1166],{"__ignoreMap":48},[52,1128,1129,1132],{"class":54,"line":55},[52,1130,1131],{"class":58},".oklch-example",[52,1133,63],{"class":62},[52,1135,1136],{"class":54,"line":66},[52,1137,1138],{"class":82},"  \u002F* oklch(lightness chroma hue) *\u002F\n",[52,1140,1141,1143,1145,1148,1150,1153,1155,1158,1161,1163],{"class":54,"line":86},[52,1142,70],{"class":69},[52,1144,73],{"class":62},[52,1146,1147],{"class":69},"oklch",[52,1149,164],{"class":62},[52,1151,1152],{"class":69},"60",[52,1154,382],{"class":381},[52,1156,1157],{"class":69}," 0.2",[52,1159,1160],{"class":69}," 264",[52,1162,181],{"class":62},[52,1164,1165],{"class":82},"\u002F* Perceptually pleasing blue *\u002F\n",[52,1167,1168],{"class":54,"line":102},[52,1169,105],{"class":62},[35,1171,1173],{"id":1172},"components-of-oklch","Components of oklch()",[110,1175,1176,1181,1187],{},[113,1177,1178,1180],{},[403,1179,665],{}," (0-100%): Perceptually uniform lightness (0% = black, 50% = middle gray, 100% = white)",[113,1182,1183,1186],{},[403,1184,1185],{},"Chroma"," (0-0.4+): Colorfulness\u002Fsaturation (0 = gray, higher = more vivid)",[113,1188,1189,1191],{},[403,1190,648],{}," (0-360): Same as hsl()—the color wheel position",[35,1193,1195],{"id":1194},"why-oklch-is-superior","Why oklch() is Superior",[398,1197,1198,1207,1218,1224],{},[113,1199,1200,73,1203,1206],{},[403,1201,1202],{},"Predictable lightness",[22,1204,1205],{},"oklch(60% ...)"," always appears at the same perceptual lightness regardless of hue",[113,1208,1209,73,1212,1214,1215,1217],{},[403,1210,1211],{},"Better gradients",[22,1213,586],{}," gradients can look muddy in the middle; ",[22,1216,1120],{}," stays vibrant",[113,1219,1220,1223],{},[403,1221,1222],{},"Accessibility",": Easier to create accessible color pairs with consistent contrast ratios",[113,1225,1226,1229],{},[403,1227,1228],{},"Wide gamut",": Supports colors beyond sRGB (P3, Rec.2020)",[43,1231,1233],{"className":45,"code":1232,"language":47,"meta":48,"style":48},"\u002F* Compare these gradients *\u002F\n.hsl-gradient {\n  background: linear-gradient(\n    to right,\n    hsl(0 100% 50%),\n    hsl(120 100% 50%),\n    hsl(240 100% 50%)\n  );\n  \u002F* Notice the dark, muddy center *\u002F\n}\n\n.oklch-gradient {\n  background: linear-gradient(\n    to right,\n    oklch(65% 0.25 29),   \u002F* Red *\u002F\n    oklch(65% 0.25 142),  \u002F* Green *\u002F\n    oklch(65% 0.25 264)   \u002F* Blue *\u002F\n  );\n  \u002F* Consistent perceptual lightness throughout *\u002F\n}\n",[22,1234,1235,1240,1247,1260,1271,1292,1311,1331,1336,1341,1345,1349,1356,1366,1374,1399,1421,1441,1446,1452],{"__ignoreMap":48},[52,1236,1237],{"class":54,"line":55},[52,1238,1239],{"class":82},"\u002F* Compare these gradients *\u002F\n",[52,1241,1242,1245],{"class":54,"line":66},[52,1243,1244],{"class":58},".hsl-gradient",[52,1246,63],{"class":62},[52,1248,1249,1252,1254,1257],{"class":54,"line":86},[52,1250,1251],{"class":69},"  background",[52,1253,73],{"class":62},[52,1255,1256],{"class":69},"linear-gradient",[52,1258,1259],{"class":62},"(\n",[52,1261,1262,1265,1268],{"class":54,"line":102},[52,1263,1264],{"class":381},"    to",[52,1266,1267],{"class":69}," right",[52,1269,1270],{"class":62},",\n",[52,1272,1273,1276,1278,1280,1283,1285,1287,1289],{"class":54,"line":344},[52,1274,1275],{"class":69},"    hsl",[52,1277,164],{"class":62},[52,1279,245],{"class":69},[52,1281,1282],{"class":69}," 100",[52,1284,382],{"class":381},[52,1286,876],{"class":69},[52,1288,382],{"class":381},[52,1290,1291],{"class":62},"),\n",[52,1293,1294,1296,1298,1301,1303,1305,1307,1309],{"class":54,"line":351},[52,1295,1275],{"class":69},[52,1297,164],{"class":62},[52,1299,1300],{"class":69},"120",[52,1302,1282],{"class":69},[52,1304,382],{"class":381},[52,1306,876],{"class":69},[52,1308,382],{"class":381},[52,1310,1291],{"class":62},[52,1312,1313,1315,1317,1320,1322,1324,1326,1328],{"class":54,"line":359},[52,1314,1275],{"class":69},[52,1316,164],{"class":62},[52,1318,1319],{"class":69},"240",[52,1321,1282],{"class":69},[52,1323,382],{"class":381},[52,1325,876],{"class":69},[52,1327,382],{"class":381},[52,1329,1330],{"class":62},")\n",[52,1332,1333],{"class":54,"line":390},[52,1334,1335],{"class":62},"  );\n",[52,1337,1338],{"class":54,"line":852},[52,1339,1340],{"class":82},"  \u002F* Notice the dark, muddy center *\u002F\n",[52,1342,1343],{"class":54,"line":883},[52,1344,105],{"class":62},[52,1346,1347],{"class":54,"line":914},[52,1348,348],{"emptyLinePlaceholder":347},[52,1350,1351,1354],{"class":54,"line":945},[52,1352,1353],{"class":58},".oklch-gradient",[52,1355,63],{"class":62},[52,1357,1358,1360,1362,1364],{"class":54,"line":976},[52,1359,1251],{"class":69},[52,1361,73],{"class":62},[52,1363,1256],{"class":69},[52,1365,1259],{"class":62},[52,1367,1368,1370,1372],{"class":54,"line":1007},[52,1369,1264],{"class":381},[52,1371,1267],{"class":69},[52,1373,1270],{"class":62},[52,1375,1377,1380,1382,1385,1387,1390,1393,1396],{"class":54,"line":1376},15,[52,1378,1379],{"class":69},"    oklch",[52,1381,164],{"class":62},[52,1383,1384],{"class":69},"65",[52,1386,382],{"class":381},[52,1388,1389],{"class":69}," 0.25",[52,1391,1392],{"class":69}," 29",[52,1394,1395],{"class":62},"),   ",[52,1397,1398],{"class":82},"\u002F* Red *\u002F\n",[52,1400,1402,1404,1406,1408,1410,1412,1415,1418],{"class":54,"line":1401},16,[52,1403,1379],{"class":69},[52,1405,164],{"class":62},[52,1407,1384],{"class":69},[52,1409,382],{"class":381},[52,1411,1389],{"class":69},[52,1413,1414],{"class":69}," 142",[52,1416,1417],{"class":62},"),  ",[52,1419,1420],{"class":82},"\u002F* Green *\u002F\n",[52,1422,1424,1426,1428,1430,1432,1434,1436,1439],{"class":54,"line":1423},17,[52,1425,1379],{"class":69},[52,1427,164],{"class":62},[52,1429,1384],{"class":69},[52,1431,382],{"class":381},[52,1433,1389],{"class":69},[52,1435,1160],{"class":69},[52,1437,1438],{"class":62},")   ",[52,1440,83],{"class":82},[52,1442,1444],{"class":54,"line":1443},18,[52,1445,1335],{"class":62},[52,1447,1449],{"class":54,"line":1448},19,[52,1450,1451],{"class":82},"  \u002F* Consistent perceptual lightness throughout *\u002F\n",[52,1453,1455],{"class":54,"line":1454},20,[52,1456,105],{"class":62},[10,1458,1460],{"id":1459},"color-mix-blending-colors-in-css","color-mix(): Blending Colors in CSS",[15,1462,583,1463,1466],{},[22,1464,1465],{},"color-mix()"," function allows you to blend two colors directly in CSS, similar to mixing paint:",[43,1468,1470],{"className":45,"code":1469,"language":47,"meta":48,"style":48},".mixed-colors {\n  \u002F* Mix 50% blue with 50% white in sRGB *\u002F\n  background-color: color-mix(in srgb, blue, white);\n  \n  \u002F* 75% red, 25% black *\u002F\n  color: color-mix(in srgb, red 75%, black);\n  \n  \u002F* Mix in different color spaces *\u002F\n  border-color: color-mix(in oklch, blue, white);\n}\n",[22,1471,1472,1479,1484,1513,1517,1522,1553,1557,1562,1588],{"__ignoreMap":48},[52,1473,1474,1477],{"class":54,"line":55},[52,1475,1476],{"class":58},".mixed-colors",[52,1478,63],{"class":62},[52,1480,1481],{"class":54,"line":66},[52,1482,1483],{"class":82},"  \u002F* Mix 50% blue with 50% white in sRGB *\u002F\n",[52,1485,1486,1488,1490,1493,1495,1498,1501,1503,1506,1508,1511],{"class":54,"line":86},[52,1487,70],{"class":69},[52,1489,73],{"class":62},[52,1491,1492],{"class":69},"color-mix",[52,1494,164],{"class":62},[52,1496,1497],{"class":683},"in",[52,1499,1500],{"class":69}," srgb",[52,1502,170],{"class":62},[52,1504,1505],{"class":69},"blue",[52,1507,170],{"class":62},[52,1509,1510],{"class":69},"white",[52,1512,478],{"class":62},[52,1514,1515],{"class":54,"line":102},[52,1516,696],{"class":62},[52,1518,1519],{"class":54,"line":344},[52,1520,1521],{"class":82},"  \u002F* 75% red, 25% black *\u002F\n",[52,1523,1524,1526,1528,1530,1532,1534,1536,1538,1541,1544,1546,1548,1551],{"class":54,"line":351},[52,1525,89],{"class":69},[52,1527,73],{"class":62},[52,1529,1492],{"class":69},[52,1531,164],{"class":62},[52,1533,1497],{"class":683},[52,1535,1500],{"class":69},[52,1537,170],{"class":62},[52,1539,1540],{"class":69},"red",[52,1542,1543],{"class":69}," 75",[52,1545,382],{"class":381},[52,1547,170],{"class":62},[52,1549,1550],{"class":69},"black",[52,1552,478],{"class":62},[52,1554,1555],{"class":54,"line":359},[52,1556,696],{"class":62},[52,1558,1559],{"class":54,"line":390},[52,1560,1561],{"class":82},"  \u002F* Mix in different color spaces *\u002F\n",[52,1563,1564,1567,1569,1571,1573,1575,1578,1580,1582,1584,1586],{"class":54,"line":852},[52,1565,1566],{"class":69},"  border-color",[52,1568,73],{"class":62},[52,1570,1492],{"class":69},[52,1572,164],{"class":62},[52,1574,1497],{"class":683},[52,1576,1577],{"class":683}," oklch",[52,1579,170],{"class":62},[52,1581,1505],{"class":69},[52,1583,170],{"class":62},[52,1585,1510],{"class":69},[52,1587,478],{"class":62},[52,1589,1590],{"class":54,"line":883},[52,1591,105],{"class":62},[35,1593,1595],{"id":1594},"syntax-breakdown","Syntax Breakdown",[43,1597,1599],{"className":45,"code":1598,"language":47,"meta":48,"style":48},"color-mix(in \u003Ccolorspace>, \u003Ccolor1> [\u003Cpercentage>], \u003Ccolor2> [\u003Cpercentage>])\n",[22,1600,1601],{"__ignoreMap":48},[52,1602,1603,1606,1609,1612,1614,1617,1619],{"class":54,"line":55},[52,1604,1605],{"class":62},"color-mix(in \u003Ccolorspace",[52,1607,1608],{"class":381},">",[52,1610,1611],{"class":62},", \u003Ccolor1",[52,1613,1608],{"class":381},[52,1615,1616],{"class":62}," [\u003Cpercentage>], \u003Ccolor2",[52,1618,1608],{"class":381},[52,1620,1621],{"class":62}," [\u003Cpercentage>])\n",[110,1623,1624,1640,1646],{},[113,1625,1626,73,1629,170,1632,170,1634,170,1636,1639],{},[22,1627,1628],{},"\u003Ccolorspace>",[22,1630,1631],{},"srgb",[22,1633,1147],{},[22,1635,613],{},[22,1637,1638],{},"lab",", etc.",[113,1641,1642,1645],{},[22,1643,1644],{},"\u003Ccolor>",": Any valid CSS color",[113,1647,1648,1651],{},[22,1649,1650],{},"\u003Cpercentage>",": How much of that color to use (defaults to 50%)",[43,1653,1655],{"className":45,"code":1654,"language":47,"meta":48,"style":48},".practical-mixing {\n  --brand-color: oklch(60% 0.2 264);\n  \n  \u002F* Create hover state by mixing with white *\u002F\n  --brand-hover: color-mix(in oklch, var(--brand-color), white 20%);\n  \n  \u002F* Create active state by mixing with black *\u002F\n  --brand-active: color-mix(in oklch, var(--brand-color), black 20%);\n  \n  \u002F* Create disabled state *\u002F\n  --brand-disabled: color-mix(in oklch, var(--brand-color), white 60%);\n}\n",[22,1656,1657,1664,1685,1689,1694,1729,1733,1738,1771,1775,1780,1813],{"__ignoreMap":48},[52,1658,1659,1662],{"class":54,"line":55},[52,1660,1661],{"class":58},".practical-mixing",[52,1663,63],{"class":62},[52,1665,1666,1669,1671,1673,1675,1677,1679,1681,1683],{"class":54,"line":66},[52,1667,1668],{"class":683},"  --brand-color",[52,1670,73],{"class":62},[52,1672,1147],{"class":69},[52,1674,164],{"class":62},[52,1676,1152],{"class":69},[52,1678,382],{"class":381},[52,1680,1157],{"class":69},[52,1682,1160],{"class":69},[52,1684,478],{"class":62},[52,1686,1687],{"class":54,"line":86},[52,1688,696],{"class":62},[52,1690,1691],{"class":54,"line":102},[52,1692,1693],{"class":82},"  \u002F* Create hover state by mixing with white *\u002F\n",[52,1695,1696,1699,1701,1703,1705,1707,1709,1711,1713,1715,1718,1721,1723,1725,1727],{"class":54,"line":344},[52,1697,1698],{"class":683},"  --brand-hover",[52,1700,73],{"class":62},[52,1702,1492],{"class":69},[52,1704,164],{"class":62},[52,1706,1497],{"class":683},[52,1708,1577],{"class":683},[52,1710,170],{"class":62},[52,1712,710],{"class":69},[52,1714,164],{"class":62},[52,1716,1717],{"class":683},"--brand-color",[52,1719,1720],{"class":62},"), ",[52,1722,1510],{"class":69},[52,1724,969],{"class":69},[52,1726,382],{"class":381},[52,1728,478],{"class":62},[52,1730,1731],{"class":54,"line":351},[52,1732,696],{"class":62},[52,1734,1735],{"class":54,"line":359},[52,1736,1737],{"class":82},"  \u002F* Create active state by mixing with black *\u002F\n",[52,1739,1740,1743,1745,1747,1749,1751,1753,1755,1757,1759,1761,1763,1765,1767,1769],{"class":54,"line":390},[52,1741,1742],{"class":683},"  --brand-active",[52,1744,73],{"class":62},[52,1746,1492],{"class":69},[52,1748,164],{"class":62},[52,1750,1497],{"class":683},[52,1752,1577],{"class":683},[52,1754,170],{"class":62},[52,1756,710],{"class":69},[52,1758,164],{"class":62},[52,1760,1717],{"class":683},[52,1762,1720],{"class":62},[52,1764,1550],{"class":69},[52,1766,969],{"class":69},[52,1768,382],{"class":381},[52,1770,478],{"class":62},[52,1772,1773],{"class":54,"line":852},[52,1774,696],{"class":62},[52,1776,1777],{"class":54,"line":883},[52,1778,1779],{"class":82},"  \u002F* Create disabled state *\u002F\n",[52,1781,1782,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811],{"class":54,"line":914},[52,1783,1784],{"class":683},"  --brand-disabled",[52,1786,73],{"class":62},[52,1788,1492],{"class":69},[52,1790,164],{"class":62},[52,1792,1497],{"class":683},[52,1794,1577],{"class":683},[52,1796,170],{"class":62},[52,1798,710],{"class":69},[52,1800,164],{"class":62},[52,1802,1717],{"class":683},[52,1804,1720],{"class":62},[52,1806,1510],{"class":69},[52,1808,626],{"class":69},[52,1810,382],{"class":381},[52,1812,478],{"class":62},[52,1814,1815],{"class":54,"line":945},[52,1816,105],{"class":62},[10,1818,1820],{"id":1819},"relative-color-syntax","Relative Color Syntax",[15,1822,1823],{},"Relative color syntax lets you transform existing colors mathematically:",[43,1825,1827],{"className":45,"code":1826,"language":47,"meta":48,"style":48},".relative-example {\n  --base-color: oklch(60% 0.2 264);\n  \n  \u002F* Increase lightness by 10% *\u002F\n  background-color: oklch(from var(--base-color) l+10% c h);\n  \n  \u002F* Reduce saturation to half *\u002F\n  color: oklch(from var(--base-color) l c\u002F2 h);\n  \n  \u002F* Rotate hue by 180 degrees (complementary) *\u002F\n  border-color: oklch(from var(--base-color) l c h+180);\n}\n",[22,1828,1829,1836,1857,1861,1866,1895,1899,1904,1929,1933,1938,1962],{"__ignoreMap":48},[52,1830,1831,1834],{"class":54,"line":55},[52,1832,1833],{"class":58},".relative-example",[52,1835,63],{"class":62},[52,1837,1838,1841,1843,1845,1847,1849,1851,1853,1855],{"class":54,"line":66},[52,1839,1840],{"class":683},"  --base-color",[52,1842,73],{"class":62},[52,1844,1147],{"class":69},[52,1846,164],{"class":62},[52,1848,1152],{"class":69},[52,1850,382],{"class":381},[52,1852,1157],{"class":69},[52,1854,1160],{"class":69},[52,1856,478],{"class":62},[52,1858,1859],{"class":54,"line":86},[52,1860,696],{"class":62},[52,1862,1863],{"class":54,"line":102},[52,1864,1865],{"class":82},"  \u002F* Increase lightness by 10% *\u002F\n",[52,1867,1868,1870,1872,1874,1877,1879,1881,1884,1887,1890,1892],{"class":54,"line":344},[52,1869,70],{"class":69},[52,1871,73],{"class":62},[52,1873,1147],{"class":69},[52,1875,1876],{"class":62},"(from ",[52,1878,710],{"class":69},[52,1880,164],{"class":62},[52,1882,1883],{"class":683},"--base-color",[52,1885,1886],{"class":62},") l+",[52,1888,1889],{"class":69},"10",[52,1891,382],{"class":381},[52,1893,1894],{"class":62}," c h);\n",[52,1896,1897],{"class":54,"line":351},[52,1898,696],{"class":62},[52,1900,1901],{"class":54,"line":359},[52,1902,1903],{"class":82},"  \u002F* Reduce saturation to half *\u002F\n",[52,1905,1906,1908,1910,1912,1914,1916,1918,1920,1923,1926],{"class":54,"line":390},[52,1907,89],{"class":69},[52,1909,73],{"class":62},[52,1911,1147],{"class":69},[52,1913,1876],{"class":62},[52,1915,710],{"class":69},[52,1917,164],{"class":62},[52,1919,1883],{"class":683},[52,1921,1922],{"class":62},") l c\u002F",[52,1924,1925],{"class":69},"2",[52,1927,1928],{"class":62}," h);\n",[52,1930,1931],{"class":54,"line":852},[52,1932,696],{"class":62},[52,1934,1935],{"class":54,"line":883},[52,1936,1937],{"class":82},"  \u002F* Rotate hue by 180 degrees (complementary) *\u002F\n",[52,1939,1940,1942,1944,1946,1948,1950,1952,1954,1957,1960],{"class":54,"line":914},[52,1941,1566],{"class":69},[52,1943,73],{"class":62},[52,1945,1147],{"class":69},[52,1947,1876],{"class":62},[52,1949,710],{"class":69},[52,1951,164],{"class":62},[52,1953,1883],{"class":683},[52,1955,1956],{"class":62},") l c h+",[52,1958,1959],{"class":69},"180",[52,1961,478],{"class":62},[52,1963,1964],{"class":54,"line":945},[52,1965,105],{"class":62},[35,1967,583,1969,1972],{"id":1968},"the-from-keyword",[22,1970,1971],{},"from"," Keyword",[15,1974,583,1975,1978],{},[22,1976,1977],{},"from \u003Ccolor>"," syntax extracts components into variables you can modify:",[43,1980,1982],{"className":45,"code":1981,"language":47,"meta":48,"style":48},".component {\n  --input: oklch(70% 0.1 264);\n  \n  \u002F* Create a palette from one base color *\u002F\n  --input-bg: oklch(from var(--input) l+20% c h);\n  --input-border: oklch(from var(--input) l-10% c h);\n  --input-focus: oklch(from var(--input) l c+0.1 h);\n  --input-error: oklch(from var(--input) l c h+30); \u002F* Shift hue slightly *\u002F\n}\n",[22,1983,1984,1991,2014,2018,2023,2050,2070,2095,2122],{"__ignoreMap":48},[52,1985,1986,1989],{"class":54,"line":55},[52,1987,1988],{"class":58},".component",[52,1990,63],{"class":62},[52,1992,1993,1996,1998,2000,2002,2005,2007,2010,2012],{"class":54,"line":66},[52,1994,1995],{"class":683},"  --input",[52,1997,73],{"class":62},[52,1999,1147],{"class":69},[52,2001,164],{"class":62},[52,2003,2004],{"class":69},"70",[52,2006,382],{"class":381},[52,2008,2009],{"class":69}," 0.1",[52,2011,1160],{"class":69},[52,2013,478],{"class":62},[52,2015,2016],{"class":54,"line":86},[52,2017,696],{"class":62},[52,2019,2020],{"class":54,"line":102},[52,2021,2022],{"class":82},"  \u002F* Create a palette from one base color *\u002F\n",[52,2024,2025,2028,2030,2032,2034,2036,2038,2041,2043,2046,2048],{"class":54,"line":344},[52,2026,2027],{"class":683},"  --input-bg",[52,2029,73],{"class":62},[52,2031,1147],{"class":69},[52,2033,1876],{"class":62},[52,2035,710],{"class":69},[52,2037,164],{"class":62},[52,2039,2040],{"class":683},"--input",[52,2042,1886],{"class":62},[52,2044,2045],{"class":69},"20",[52,2047,382],{"class":381},[52,2049,1894],{"class":62},[52,2051,2052,2055,2057,2059,2061,2063,2065,2067],{"class":54,"line":351},[52,2053,2054],{"class":683},"  --input-border",[52,2056,73],{"class":62},[52,2058,1147],{"class":69},[52,2060,1876],{"class":62},[52,2062,710],{"class":69},[52,2064,164],{"class":62},[52,2066,2040],{"class":683},[52,2068,2069],{"class":62},") l-10% c h);\n",[52,2071,2072,2075,2077,2079,2081,2083,2085,2087,2090,2093],{"class":54,"line":359},[52,2073,2074],{"class":683},"  --input-focus",[52,2076,73],{"class":62},[52,2078,1147],{"class":69},[52,2080,1876],{"class":62},[52,2082,710],{"class":69},[52,2084,164],{"class":62},[52,2086,2040],{"class":683},[52,2088,2089],{"class":62},") l c+",[52,2091,2092],{"class":69},"0.1",[52,2094,1928],{"class":62},[52,2096,2097,2100,2102,2104,2106,2108,2110,2112,2114,2117,2119],{"class":54,"line":390},[52,2098,2099],{"class":683},"  --input-error",[52,2101,73],{"class":62},[52,2103,1147],{"class":69},[52,2105,1876],{"class":62},[52,2107,710],{"class":69},[52,2109,164],{"class":62},[52,2111,2040],{"class":683},[52,2113,1956],{"class":62},[52,2115,2116],{"class":69},"30",[52,2118,181],{"class":62},[52,2120,2121],{"class":82},"\u002F* Shift hue slightly *\u002F\n",[52,2123,2124],{"class":54,"line":852},[52,2125,105],{"class":62},[10,2127,2129],{"id":2128},"browser-support-and-fallbacks","Browser Support and Fallbacks",[35,2131,2133],{"id":2132},"current-support-as-of-2026","Current Support (as of 2026)",[2135,2136,2137,2159],"table",{},[2138,2139,2140],"thead",{},[2141,2142,2143,2147,2150,2153,2156],"tr",{},[2144,2145,2146],"th",{},"Function",[2144,2148,2149],{},"Chrome\u002FEdge",[2144,2151,2152],{},"Firefox",[2144,2154,2155],{},"Safari",[2144,2157,2158],{},"Notes",[2160,2161,2162,2182,2196,2214,2228],"tbody",{},[2141,2163,2164,2170,2173,2176,2179],{},[2165,2166,2167,2169],"td",{},[22,2168,139],{}," modern syntax",[2165,2171,2172],{},"✅ 90+",[2165,2174,2175],{},"✅ 103+",[2165,2177,2178],{},"✅ 15+",[2165,2180,2181],{},"Widely supported",[2141,2183,2184,2188,2190,2192,2194],{},[2165,2185,2186,2169],{},[22,2187,586],{},[2165,2189,2172],{},[2165,2191,2175],{},[2165,2193,2178],{},[2165,2195,2181],{},[2141,2197,2198,2202,2205,2208,2211],{},[2165,2199,2200],{},[22,2201,1120],{},[2165,2203,2204],{},"✅ 111+",[2165,2206,2207],{},"✅ 113+",[2165,2209,2210],{},"✅ 16.4+",[2165,2212,2213],{},"Modern browsers",[2141,2215,2216,2220,2222,2224,2226],{},[2165,2217,2218],{},[22,2219,1465],{},[2165,2221,2204],{},[2165,2223,2207],{},[2165,2225,2210],{},[2165,2227,2213],{},[2141,2229,2230,2233,2236,2239,2242],{},[2165,2231,2232],{},"Relative color syntax",[2165,2234,2235],{},"✅ 119+",[2165,2237,2238],{},"✅ 118+",[2165,2240,2241],{},"✅ 17+",[2165,2243,2244],{},"Very new",[35,2246,2248],{"id":2247},"providing-fallbacks","Providing Fallbacks",[43,2250,2252],{"className":45,"code":2251,"language":47,"meta":48,"style":48},".with-fallbacks {\n  \u002F* Start with hex fallback *\u002F\n  background-color: #3B82F6;\n  \n  \u002F* Modern rgb() *\u002F\n  background-color: rgb(59 130 246);\n  \n  \u002F* Modern hsl() *\u002F\n  background-color: hsl(217 91% 60%);\n  \n  \u002F* Cutting-edge oklch() *\u002F\n  background-color: oklch(60% 0.2 264);\n}\n\n\u002F* Or use @supports *\u002F\n@supports (background-color: oklch(0% 0 0)) {\n  .modern-only {\n    background-color: oklch(60% 0.2 264);\n  }\n}\n",[22,2253,2254,2261,2266,2276,2280,2285,2303,2307,2312,2334,2338,2343,2363,2367,2371,2376,2404,2411,2432,2437],{"__ignoreMap":48},[52,2255,2256,2259],{"class":54,"line":55},[52,2257,2258],{"class":58},".with-fallbacks",[52,2260,63],{"class":62},[52,2262,2263],{"class":54,"line":66},[52,2264,2265],{"class":82},"  \u002F* Start with hex fallback *\u002F\n",[52,2267,2268,2270,2272,2274],{"class":54,"line":86},[52,2269,70],{"class":69},[52,2271,73],{"class":62},[52,2273,76],{"class":69},[52,2275,691],{"class":62},[52,2277,2278],{"class":54,"line":102},[52,2279,696],{"class":62},[52,2281,2282],{"class":54,"line":344},[52,2283,2284],{"class":82},"  \u002F* Modern rgb() *\u002F\n",[52,2286,2287,2289,2291,2293,2295,2297,2299,2301],{"class":54,"line":351},[52,2288,70],{"class":69},[52,2290,73],{"class":62},[52,2292,161],{"class":69},[52,2294,164],{"class":62},[52,2296,167],{"class":69},[52,2298,301],{"class":69},[52,2300,304],{"class":69},[52,2302,478],{"class":62},[52,2304,2305],{"class":54,"line":359},[52,2306,696],{"class":62},[52,2308,2309],{"class":54,"line":390},[52,2310,2311],{"class":82},"  \u002F* Modern hsl() *\u002F\n",[52,2313,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332],{"class":54,"line":852},[52,2315,70],{"class":69},[52,2317,73],{"class":62},[52,2319,613],{"class":69},[52,2321,164],{"class":62},[52,2323,618],{"class":69},[52,2325,621],{"class":69},[52,2327,382],{"class":381},[52,2329,626],{"class":69},[52,2331,382],{"class":381},[52,2333,478],{"class":62},[52,2335,2336],{"class":54,"line":883},[52,2337,696],{"class":62},[52,2339,2340],{"class":54,"line":914},[52,2341,2342],{"class":82},"  \u002F* Cutting-edge oklch() *\u002F\n",[52,2344,2345,2347,2349,2351,2353,2355,2357,2359,2361],{"class":54,"line":945},[52,2346,70],{"class":69},[52,2348,73],{"class":62},[52,2350,1147],{"class":69},[52,2352,164],{"class":62},[52,2354,1152],{"class":69},[52,2356,382],{"class":381},[52,2358,1157],{"class":69},[52,2360,1160],{"class":69},[52,2362,478],{"class":62},[52,2364,2365],{"class":54,"line":976},[52,2366,105],{"class":62},[52,2368,2369],{"class":54,"line":1007},[52,2370,348],{"emptyLinePlaceholder":347},[52,2372,2373],{"class":54,"line":1376},[52,2374,2375],{"class":82},"\u002F* Or use @supports *\u002F\n",[52,2377,2378,2381,2384,2387,2389,2391,2393,2395,2397,2399,2401],{"class":54,"line":1401},[52,2379,2380],{"class":381},"@supports",[52,2382,2383],{"class":62}," (",[52,2385,2386],{"class":69},"background-color",[52,2388,73],{"class":62},[52,2390,1147],{"class":69},[52,2392,164],{"class":62},[52,2394,245],{"class":69},[52,2396,382],{"class":381},[52,2398,473],{"class":69},[52,2400,473],{"class":69},[52,2402,2403],{"class":62},")) {\n",[52,2405,2406,2409],{"class":54,"line":1423},[52,2407,2408],{"class":58},"  .modern-only",[52,2410,63],{"class":62},[52,2412,2413,2416,2418,2420,2422,2424,2426,2428,2430],{"class":54,"line":1443},[52,2414,2415],{"class":69},"    background-color",[52,2417,73],{"class":62},[52,2419,1147],{"class":69},[52,2421,164],{"class":62},[52,2423,1152],{"class":69},[52,2425,382],{"class":381},[52,2427,1157],{"class":69},[52,2429,1160],{"class":69},[52,2431,478],{"class":62},[52,2433,2434],{"class":54,"line":1448},[52,2435,2436],{"class":62},"  }\n",[52,2438,2439],{"class":54,"line":1454},[52,2440,105],{"class":62},[10,2442,2444],{"id":2443},"practical-tips-for-adoption","Practical Tips for Adoption",[398,2446,2447,2453,2459,2465,2471],{},[113,2448,2449,2452],{},[403,2450,2451],{},"Use CSS custom properties",": Define colors once and reference them everywhere",[113,2454,2455,2458],{},[403,2456,2457],{},"Start with hsl()",": It's well-supported and intuitive for creating palettes",[113,2460,2461,2464],{},[403,2462,2463],{},"Experiment with oklch()",": Use for new projects where browser support allows",[113,2466,2467,2470],{},[403,2468,2469],{},"Leverage color-mix()",": Great for hover\u002Factive states without defining new variables",[113,2472,2473,2476],{},[403,2474,2475],{},"Test in both light and dark modes",": Modern color functions make this much easier",[43,2478,2480],{"className":45,"code":2479,"language":47,"meta":48,"style":48},":root {\n  --hue: 217;\n  --primary: hsl(var(--hue) 91% 60%);\n}\n\n[data-theme=\"dark\"] {\n  --primary: hsl(var(--hue) 91% 70%); \u002F* Lighter for dark mode *\u002F\n}\n",[22,2481,2482,2489,2500,2530,2534,2538,2556,2587],{"__ignoreMap":48},[52,2483,2484,2487],{"class":54,"line":55},[52,2485,2486],{"class":58},":root",[52,2488,63],{"class":62},[52,2490,2491,2494,2496,2498],{"class":54,"line":66},[52,2492,2493],{"class":683},"  --hue",[52,2495,73],{"class":62},[52,2497,618],{"class":69},[52,2499,691],{"class":62},[52,2501,2502,2505,2507,2509,2511,2513,2515,2518,2520,2522,2524,2526,2528],{"class":54,"line":86},[52,2503,2504],{"class":683},"  --primary",[52,2506,73],{"class":62},[52,2508,613],{"class":69},[52,2510,164],{"class":62},[52,2512,710],{"class":69},[52,2514,164],{"class":62},[52,2516,2517],{"class":683},"--hue",[52,2519,718],{"class":62},[52,2521,721],{"class":69},[52,2523,382],{"class":381},[52,2525,626],{"class":69},[52,2527,382],{"class":381},[52,2529,478],{"class":62},[52,2531,2532],{"class":54,"line":102},[52,2533,105],{"class":62},[52,2535,2536],{"class":54,"line":344},[52,2537,348],{"emptyLinePlaceholder":347},[52,2539,2540,2543,2546,2549,2553],{"class":54,"line":351},[52,2541,2542],{"class":62},"[",[52,2544,2545],{"class":58},"data-theme",[52,2547,2548],{"class":381},"=",[52,2550,2552],{"class":2551},"sZZnC","\"dark\"",[52,2554,2555],{"class":62},"] {\n",[52,2557,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582,2584],{"class":54,"line":359},[52,2559,2504],{"class":683},[52,2561,73],{"class":62},[52,2563,613],{"class":69},[52,2565,164],{"class":62},[52,2567,710],{"class":69},[52,2569,164],{"class":62},[52,2571,2517],{"class":683},[52,2573,718],{"class":62},[52,2575,721],{"class":69},[52,2577,382],{"class":381},[52,2579,816],{"class":69},[52,2581,382],{"class":381},[52,2583,181],{"class":62},[52,2585,2586],{"class":82},"\u002F* Lighter for dark mode *\u002F\n",[52,2588,2589],{"class":54,"line":390},[52,2590,105],{"class":62},[10,2592,2594],{"id":2593},"related-tools","Related Tools",[110,2596,2597],{},[113,2598,2599,2604],{},[2600,2601,2603],"a",{"href":2602},"\u002Ftools\u002Fcolor-converter","Color Converter"," - Convert between HEX, RGB, and HSL formats",[2606,2607,2608],"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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":48,"searchDepth":66,"depth":66,"links":2610},[2611,2612,2616,2619,2623,2627,2630,2634,2638,2639],{"id":12,"depth":66,"text":13},{"id":32,"depth":66,"text":33,"children":2613},[2614,2615],{"id":37,"depth":86,"text":38},{"id":132,"depth":86,"text":133},{"id":270,"depth":66,"text":271,"children":2617},[2618],{"id":395,"depth":86,"text":396},{"id":579,"depth":66,"text":580,"children":2620},[2621,2622],{"id":640,"depth":86,"text":641},{"id":1012,"depth":86,"text":1013},{"id":1114,"depth":66,"text":1115,"children":2624},[2625,2626],{"id":1172,"depth":86,"text":1173},{"id":1194,"depth":86,"text":1195},{"id":1459,"depth":66,"text":1460,"children":2628},[2629],{"id":1594,"depth":86,"text":1595},{"id":1819,"depth":66,"text":1820,"children":2631},[2632],{"id":1968,"depth":86,"text":2633},"The from Keyword",{"id":2128,"depth":66,"text":2129,"children":2635},[2636,2637],{"id":2132,"depth":86,"text":2133},{"id":2247,"depth":86,"text":2248},{"id":2443,"depth":66,"text":2444},{"id":2593,"depth":66,"text":2594},"2026-05-26","Master modern CSS color functions including rgb(), hsl(), oklch(), color-mix(), and relative color syntax. Learn browser support and practical use cases.","md",{"immutable":347},"\u002Fguides\u002Fcss-color-functions",{"title":5,"description":2641},"guides\u002Fcss-color-functions","kW1iVFoHo2Th8Kki9OBL0G8fUXZ_NFMiGPBxVA7tMLo",1780401323589]