[{"data":1,"prerenderedAt":1313},["ShallowReactive",2],{"guide-tailwind-custom-palette-design":3},{"id":4,"title":5,"body":6,"date":1305,"description":1306,"extension":1307,"meta":1308,"navigation":896,"path":1309,"readingTime":80,"seo":1310,"stem":1311,"__hash__":1312},"guides\u002Fguides\u002Ftailwind-custom-palette-design.md","Designing Custom Tailwind Palettes",{"type":7,"value":8,"toc":1286},"minimark",[9,14,18,22,27,262,276,280,283,398,402,405,409,412,461,464,607,745,749,752,804,808,812,1015,1019,1152,1156,1159,1191,1195,1198,1241,1245,1266,1270,1273,1282],[10,11,13],"h2",{"id":12},"why-custom-palettes-matter","Why Custom Palettes Matter",[15,16,17],"p",{},"Tailwind's default palette is excellent for prototyping, but production products need brand-specific colors. A custom palette ensures visual consistency across your entire application and makes your product recognizable. Rather than overriding Tailwind utilities ad hoc, define a complete palette that integrates with Tailwind's token system.",[10,19,21],{"id":20},"tailwind-color-configuration","Tailwind Color Configuration",[23,24,26],"h3",{"id":25},"basic-custom-colors","Basic Custom Colors",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F tailwind.config.ts\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        brand: {\n          50:  '#f0f5ff',\n          100: '#e0ebff',\n          200: '#c2d6ff',\n          300: '#94b8ff',\n          400: '#6699ff',\n          500: '#3366ff',\n          600: '#1a4fff',\n          700: '#0033cc',\n          800: '#002699',\n          900: '#001a66',\n          950: '#000d33',\n        },\n      },\n    },\n  },\n}\n","javascript","",[35,36,37,46,60,66,72,78,84,101,115,128,141,154,167,180,193,206,219,232,238,244,250,256],"code",{"__ignoreMap":33},[38,39,42],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"sJ8bj","\u002F\u002F tailwind.config.ts\n",[38,47,49,53,56],{"class":40,"line":48},2,[38,50,52],{"class":51},"szBVR","export",[38,54,55],{"class":51}," default",[38,57,59],{"class":58},"sVt8B"," {\n",[38,61,63],{"class":40,"line":62},3,[38,64,65],{"class":58},"  theme: {\n",[38,67,69],{"class":40,"line":68},4,[38,70,71],{"class":58},"    extend: {\n",[38,73,75],{"class":40,"line":74},5,[38,76,77],{"class":58},"      colors: {\n",[38,79,81],{"class":40,"line":80},6,[38,82,83],{"class":58},"        brand: {\n",[38,85,87,91,94,98],{"class":40,"line":86},7,[38,88,90],{"class":89},"sj4cs","          50",[38,92,93],{"class":58},":  ",[38,95,97],{"class":96},"sZZnC","'#f0f5ff'",[38,99,100],{"class":58},",\n",[38,102,104,107,110,113],{"class":40,"line":103},8,[38,105,106],{"class":89},"          100",[38,108,109],{"class":58},": ",[38,111,112],{"class":96},"'#e0ebff'",[38,114,100],{"class":58},[38,116,118,121,123,126],{"class":40,"line":117},9,[38,119,120],{"class":89},"          200",[38,122,109],{"class":58},[38,124,125],{"class":96},"'#c2d6ff'",[38,127,100],{"class":58},[38,129,131,134,136,139],{"class":40,"line":130},10,[38,132,133],{"class":89},"          300",[38,135,109],{"class":58},[38,137,138],{"class":96},"'#94b8ff'",[38,140,100],{"class":58},[38,142,144,147,149,152],{"class":40,"line":143},11,[38,145,146],{"class":89},"          400",[38,148,109],{"class":58},[38,150,151],{"class":96},"'#6699ff'",[38,153,100],{"class":58},[38,155,157,160,162,165],{"class":40,"line":156},12,[38,158,159],{"class":89},"          500",[38,161,109],{"class":58},[38,163,164],{"class":96},"'#3366ff'",[38,166,100],{"class":58},[38,168,170,173,175,178],{"class":40,"line":169},13,[38,171,172],{"class":89},"          600",[38,174,109],{"class":58},[38,176,177],{"class":96},"'#1a4fff'",[38,179,100],{"class":58},[38,181,183,186,188,191],{"class":40,"line":182},14,[38,184,185],{"class":89},"          700",[38,187,109],{"class":58},[38,189,190],{"class":96},"'#0033cc'",[38,192,100],{"class":58},[38,194,196,199,201,204],{"class":40,"line":195},15,[38,197,198],{"class":89},"          800",[38,200,109],{"class":58},[38,202,203],{"class":96},"'#002699'",[38,205,100],{"class":58},[38,207,209,212,214,217],{"class":40,"line":208},16,[38,210,211],{"class":89},"          900",[38,213,109],{"class":58},[38,215,216],{"class":96},"'#001a66'",[38,218,100],{"class":58},[38,220,222,225,227,230],{"class":40,"line":221},17,[38,223,224],{"class":89},"          950",[38,226,109],{"class":58},[38,228,229],{"class":96},"'#000d33'",[38,231,100],{"class":58},[38,233,235],{"class":40,"line":234},18,[38,236,237],{"class":58},"        },\n",[38,239,241],{"class":40,"line":240},19,[38,242,243],{"class":58},"      },\n",[38,245,247],{"class":40,"line":246},20,[38,248,249],{"class":58},"    },\n",[38,251,253],{"class":40,"line":252},21,[38,254,255],{"class":58},"  },\n",[38,257,259],{"class":40,"line":258},22,[38,260,261],{"class":58},"}\n",[15,263,264,265,268,269,268,272,275],{},"This gives you ",[35,266,267],{},"bg-brand-500",", ",[35,270,271],{},"text-brand-700",[35,273,274],{},"border-brand-200",", and every other Tailwind color utility — automatically.",[23,277,279],{"id":278},"multi-brand-palettes","Multi-Brand Palettes",[15,281,282],{},"For products with distinct color families:",[28,284,286],{"className":30,"code":285,"language":32,"meta":33,"style":33},"colors: {\n  brand: { \u002F* primary blue *\u002F },\n  accent: { \u002F* secondary orange *\u002F },\n  surface: { \u002F* neutral backgrounds *\u002F },\n  feedback: {\n    success: '#16a34a',\n    warning: '#d97706',\n    error: '#dc2626',\n    info: '#2563eb',\n  },\n}\n",[35,287,288,297,311,323,335,342,354,366,378,390,394],{"__ignoreMap":33},[38,289,290,294],{"class":40,"line":41},[38,291,293],{"class":292},"sScJk","colors",[38,295,296],{"class":58},": {\n",[38,298,299,302,305,308],{"class":40,"line":48},[38,300,301],{"class":292},"  brand",[38,303,304],{"class":58},": { ",[38,306,307],{"class":44},"\u002F* primary blue *\u002F",[38,309,310],{"class":58}," },\n",[38,312,313,316,318,321],{"class":40,"line":62},[38,314,315],{"class":292},"  accent",[38,317,304],{"class":58},[38,319,320],{"class":44},"\u002F* secondary orange *\u002F",[38,322,310],{"class":58},[38,324,325,328,330,333],{"class":40,"line":68},[38,326,327],{"class":292},"  surface",[38,329,304],{"class":58},[38,331,332],{"class":44},"\u002F* neutral backgrounds *\u002F",[38,334,310],{"class":58},[38,336,337,340],{"class":40,"line":74},[38,338,339],{"class":292},"  feedback",[38,341,296],{"class":58},[38,343,344,347,349,352],{"class":40,"line":80},[38,345,346],{"class":292},"    success",[38,348,109],{"class":58},[38,350,351],{"class":96},"'#16a34a'",[38,353,100],{"class":58},[38,355,356,359,361,364],{"class":40,"line":86},[38,357,358],{"class":292},"    warning",[38,360,109],{"class":58},[38,362,363],{"class":96},"'#d97706'",[38,365,100],{"class":58},[38,367,368,371,373,376],{"class":40,"line":103},[38,369,370],{"class":292},"    error",[38,372,109],{"class":58},[38,374,375],{"class":96},"'#dc2626'",[38,377,100],{"class":58},[38,379,380,383,385,388],{"class":40,"line":117},[38,381,382],{"class":292},"    info",[38,384,109],{"class":58},[38,386,387],{"class":96},"'#2563eb'",[38,389,100],{"class":58},[38,391,392],{"class":40,"line":130},[38,393,255],{"class":58},[38,395,396],{"class":40,"line":143},[38,397,261],{"class":58},[10,399,401],{"id":400},"generating-shade-scales","Generating Shade Scales",[15,403,404],{},"The hardest part of custom palettes is generating consistent shade scales. A good scale progresses smoothly from very light to very dark while maintaining the same hue identity.",[23,406,408],{"id":407},"the-oklch-approach","The OKLCH Approach",[15,410,411],{},"OKLCH is a perceptually uniform color space — equal numeric steps produce equal visual steps. This makes it ideal for generating shade scales:",[28,413,417],{"className":414,"code":415,"language":416,"meta":33,"style":33},"language-css shiki shiki-themes github-light github-dark","\u002F* Define your brand color in oklch *\u002F\n:root {\n  --brand-500: oklch(0.55 0.2 260);\n}\n","css",[35,418,419,424,431,457],{"__ignoreMap":33},[38,420,421],{"class":40,"line":41},[38,422,423],{"class":44},"\u002F* Define your brand color in oklch *\u002F\n",[38,425,426,429],{"class":40,"line":48},[38,427,428],{"class":292},":root",[38,430,59],{"class":58},[38,432,433,437,439,442,445,448,451,454],{"class":40,"line":62},[38,434,436],{"class":435},"s4XuR","  --brand-500",[38,438,109],{"class":58},[38,440,441],{"class":89},"oklch",[38,443,444],{"class":58},"(",[38,446,447],{"class":89},"0.55",[38,449,450],{"class":89}," 0.2",[38,452,453],{"class":89}," 260",[38,455,456],{"class":58},");\n",[38,458,459],{"class":40,"line":68},[38,460,261],{"class":58},[15,462,463],{},"From a single oklch anchor, you can derive a full scale by adjusting lightness while keeping chroma and hue constant:",[465,466,467,483],"table",{},[468,469,470],"thead",{},[471,472,473,477,480],"tr",{},[474,475,476],"th",{},"Shade",[474,478,479],{},"Lightness",[474,481,482],{},"Result",[484,485,486,498,509,520,531,542,552,563,574,585,596],"tbody",{},[471,487,488,492,495],{},[489,490,491],"td",{},"50",[489,493,494],{},"0.97",[489,496,497],{},"Very light tint",[471,499,500,503,506],{},[489,501,502],{},"100",[489,504,505],{},"0.93",[489,507,508],{},"Light tint",[471,510,511,514,517],{},[489,512,513],{},"200",[489,515,516],{},"0.85",[489,518,519],{},"Soft shade",[471,521,522,525,528],{},[489,523,524],{},"300",[489,526,527],{},"0.75",[489,529,530],{},"Medium-light",[471,532,533,536,539],{},[489,534,535],{},"400",[489,537,538],{},"0.65",[489,540,541],{},"Medium",[471,543,544,547,549],{},[489,545,546],{},"500",[489,548,447],{},[489,550,551],{},"Base color",[471,553,554,557,560],{},[489,555,556],{},"600",[489,558,559],{},"0.45",[489,561,562],{},"Medium-dark",[471,564,565,568,571],{},[489,566,567],{},"700",[489,569,570],{},"0.37",[489,572,573],{},"Dark",[471,575,576,579,582],{},[489,577,578],{},"800",[489,580,581],{},"0.28",[489,583,584],{},"Very dark",[471,586,587,590,593],{},[489,588,589],{},"900",[489,591,592],{},"0.22",[489,594,595],{},"Near black",[471,597,598,601,604],{},[489,599,600],{},"950",[489,602,603],{},"0.15",[489,605,606],{},"Deepest shade",[28,608,610],{"className":30,"code":609,"language":32,"meta":33,"style":33},"\u002F\u002F Generate shades from an oklch base\nfunction generateShades(L, C, H) {\n  const lightnesses = [0.97, 0.93, 0.85, 0.75, 0.65, 0.55, 0.45, 0.37, 0.28, 0.22, 0.15]\n  return lightnesses.map(l => `oklch(${l} ${C} ${H})`)\n}\n",[35,611,612,617,643,702,741],{"__ignoreMap":33},[38,613,614],{"class":40,"line":41},[38,615,616],{"class":44},"\u002F\u002F Generate shades from an oklch base\n",[38,618,619,622,625,627,630,632,635,637,640],{"class":40,"line":48},[38,620,621],{"class":51},"function",[38,623,624],{"class":292}," generateShades",[38,626,444],{"class":58},[38,628,629],{"class":435},"L",[38,631,268],{"class":58},[38,633,634],{"class":435},"C",[38,636,268],{"class":58},[38,638,639],{"class":435},"H",[38,641,642],{"class":58},") {\n",[38,644,645,648,651,654,657,659,661,663,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697,699],{"class":40,"line":62},[38,646,647],{"class":51},"  const",[38,649,650],{"class":89}," lightnesses",[38,652,653],{"class":51}," =",[38,655,656],{"class":58}," [",[38,658,494],{"class":89},[38,660,268],{"class":58},[38,662,505],{"class":89},[38,664,268],{"class":58},[38,666,516],{"class":89},[38,668,268],{"class":58},[38,670,527],{"class":89},[38,672,268],{"class":58},[38,674,538],{"class":89},[38,676,268],{"class":58},[38,678,447],{"class":89},[38,680,268],{"class":58},[38,682,559],{"class":89},[38,684,268],{"class":58},[38,686,570],{"class":89},[38,688,268],{"class":58},[38,690,581],{"class":89},[38,692,268],{"class":58},[38,694,592],{"class":89},[38,696,268],{"class":58},[38,698,603],{"class":89},[38,700,701],{"class":58},"]\n",[38,703,704,707,710,713,715,718,721,724,726,729,731,733,735,738],{"class":40,"line":68},[38,705,706],{"class":51},"  return",[38,708,709],{"class":58}," lightnesses.",[38,711,712],{"class":292},"map",[38,714,444],{"class":58},[38,716,717],{"class":435},"l",[38,719,720],{"class":51}," =>",[38,722,723],{"class":96}," `oklch(${",[38,725,717],{"class":58},[38,727,728],{"class":96},"} ${",[38,730,634],{"class":89},[38,732,728],{"class":96},[38,734,639],{"class":89},[38,736,737],{"class":96},"})`",[38,739,740],{"class":58},")\n",[38,742,743],{"class":40,"line":74},[38,744,261],{"class":58},[23,746,748],{"id":747},"hex-fallbacks","Hex Fallbacks",[15,750,751],{},"OKLCH browser support is growing but not universal. Generate hex values for your Tailwind config and deliver oklch via CSS custom properties for progressive enhancement:",[28,753,755],{"className":414,"code":754,"language":416,"meta":33,"style":33},":root {\n  --brand-500: #3366ff;           \u002F* Fallback *\u002F\n  --brand-500: oklch(0.55 0.2 260); \u002F* Modern browsers override *\u002F\n}\n",[35,756,757,763,778,800],{"__ignoreMap":33},[38,758,759,761],{"class":40,"line":41},[38,760,428],{"class":292},[38,762,59],{"class":58},[38,764,765,767,769,772,775],{"class":40,"line":48},[38,766,436],{"class":435},[38,768,109],{"class":58},[38,770,771],{"class":89},"#3366ff",[38,773,774],{"class":58},";           ",[38,776,777],{"class":44},"\u002F* Fallback *\u002F\n",[38,779,780,782,784,786,788,790,792,794,797],{"class":40,"line":62},[38,781,436],{"class":435},[38,783,109],{"class":58},[38,785,441],{"class":89},[38,787,444],{"class":58},[38,789,447],{"class":89},[38,791,450],{"class":89},[38,793,453],{"class":89},[38,795,796],{"class":58},"); ",[38,798,799],{"class":44},"\u002F* Modern browsers override *\u002F\n",[38,801,802],{"class":40,"line":68},[38,803,261],{"class":58},[10,805,807],{"id":806},"design-token-architecture","Design Token Architecture",[23,809,811],{"id":810},"css-custom-properties-as-source-of-truth","CSS Custom Properties as Source of Truth",[28,813,815],{"className":414,"code":814,"language":416,"meta":33,"style":33},"\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n:root {\n  \u002F* Brand palette *\u002F\n  --color-brand-50: oklch(0.97 0.02 260);\n  --color-brand-500: oklch(0.55 0.2 260);\n  --color-brand-900: oklch(0.22 0.15 260);\n\n  \u002F* Semantic tokens *\u002F\n  --color-bg-primary: var(--color-brand-50);\n  --color-text-primary: var(--color-brand-900);\n  --color-interactive: var(--color-brand-500);\n}\n\n.dark {\n  --color-bg-primary: var(--color-brand-950);\n  --color-text-primary: var(--color-brand-50);\n  --color-interactive: var(--color-brand-400);\n}\n",[35,816,817,822,828,833,853,872,892,898,903,920,936,952,956,960,967,982,996,1011],{"__ignoreMap":33},[38,818,819],{"class":40,"line":41},[38,820,821],{"class":44},"\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n",[38,823,824,826],{"class":40,"line":48},[38,825,428],{"class":292},[38,827,59],{"class":58},[38,829,830],{"class":40,"line":62},[38,831,832],{"class":44},"  \u002F* Brand palette *\u002F\n",[38,834,835,838,840,842,844,846,849,851],{"class":40,"line":68},[38,836,837],{"class":435},"  --color-brand-50",[38,839,109],{"class":58},[38,841,441],{"class":89},[38,843,444],{"class":58},[38,845,494],{"class":89},[38,847,848],{"class":89}," 0.02",[38,850,453],{"class":89},[38,852,456],{"class":58},[38,854,855,858,860,862,864,866,868,870],{"class":40,"line":74},[38,856,857],{"class":435},"  --color-brand-500",[38,859,109],{"class":58},[38,861,441],{"class":89},[38,863,444],{"class":58},[38,865,447],{"class":89},[38,867,450],{"class":89},[38,869,453],{"class":89},[38,871,456],{"class":58},[38,873,874,877,879,881,883,885,888,890],{"class":40,"line":80},[38,875,876],{"class":435},"  --color-brand-900",[38,878,109],{"class":58},[38,880,441],{"class":89},[38,882,444],{"class":58},[38,884,592],{"class":89},[38,886,887],{"class":89}," 0.15",[38,889,453],{"class":89},[38,891,456],{"class":58},[38,893,894],{"class":40,"line":86},[38,895,897],{"emptyLinePlaceholder":896},true,"\n",[38,899,900],{"class":40,"line":103},[38,901,902],{"class":44},"  \u002F* Semantic tokens *\u002F\n",[38,904,905,908,910,913,915,918],{"class":40,"line":117},[38,906,907],{"class":435},"  --color-bg-primary",[38,909,109],{"class":58},[38,911,912],{"class":89},"var",[38,914,444],{"class":58},[38,916,917],{"class":435},"--color-brand-50",[38,919,456],{"class":58},[38,921,922,925,927,929,931,934],{"class":40,"line":130},[38,923,924],{"class":435},"  --color-text-primary",[38,926,109],{"class":58},[38,928,912],{"class":89},[38,930,444],{"class":58},[38,932,933],{"class":435},"--color-brand-900",[38,935,456],{"class":58},[38,937,938,941,943,945,947,950],{"class":40,"line":143},[38,939,940],{"class":435},"  --color-interactive",[38,942,109],{"class":58},[38,944,912],{"class":89},[38,946,444],{"class":58},[38,948,949],{"class":435},"--color-brand-500",[38,951,456],{"class":58},[38,953,954],{"class":40,"line":156},[38,955,261],{"class":58},[38,957,958],{"class":40,"line":169},[38,959,897],{"emptyLinePlaceholder":896},[38,961,962,965],{"class":40,"line":182},[38,963,964],{"class":292},".dark",[38,966,59],{"class":58},[38,968,969,971,973,975,977,980],{"class":40,"line":195},[38,970,907],{"class":435},[38,972,109],{"class":58},[38,974,912],{"class":89},[38,976,444],{"class":58},[38,978,979],{"class":435},"--color-brand-950",[38,981,456],{"class":58},[38,983,984,986,988,990,992,994],{"class":40,"line":208},[38,985,924],{"class":435},[38,987,109],{"class":58},[38,989,912],{"class":89},[38,991,444],{"class":58},[38,993,917],{"class":435},[38,995,456],{"class":58},[38,997,998,1000,1002,1004,1006,1009],{"class":40,"line":221},[38,999,940],{"class":435},[38,1001,109],{"class":58},[38,1003,912],{"class":89},[38,1005,444],{"class":58},[38,1007,1008],{"class":435},"--color-brand-400",[38,1010,456],{"class":58},[38,1012,1013],{"class":40,"line":234},[38,1014,261],{"class":58},[23,1016,1018],{"id":1017},"mapping-tokens-to-tailwind","Mapping Tokens to Tailwind",[28,1020,1022],{"className":30,"code":1021,"language":32,"meta":33,"style":33},"\u002F\u002F tailwind.config.ts\nexport default {\n  theme: {\n    extend: {\n      colors: {\n        bg: {\n          primary: 'var(--color-bg-primary)',\n        },\n        text: {\n          primary: 'var(--color-text-primary)',\n        },\n        interactive: 'var(--color-interactive)',\n        brand: {\n          50: 'var(--color-brand-50)',\n          500: 'var(--color-brand-500)',\n          900: 'var(--color-brand-900)',\n        },\n      },\n    },\n  },\n}\n",[35,1023,1024,1028,1036,1040,1044,1048,1053,1063,1067,1072,1081,1085,1095,1099,1110,1121,1132,1136,1140,1144,1148],{"__ignoreMap":33},[38,1025,1026],{"class":40,"line":41},[38,1027,45],{"class":44},[38,1029,1030,1032,1034],{"class":40,"line":48},[38,1031,52],{"class":51},[38,1033,55],{"class":51},[38,1035,59],{"class":58},[38,1037,1038],{"class":40,"line":62},[38,1039,65],{"class":58},[38,1041,1042],{"class":40,"line":68},[38,1043,71],{"class":58},[38,1045,1046],{"class":40,"line":74},[38,1047,77],{"class":58},[38,1049,1050],{"class":40,"line":80},[38,1051,1052],{"class":58},"        bg: {\n",[38,1054,1055,1058,1061],{"class":40,"line":86},[38,1056,1057],{"class":58},"          primary: ",[38,1059,1060],{"class":96},"'var(--color-bg-primary)'",[38,1062,100],{"class":58},[38,1064,1065],{"class":40,"line":103},[38,1066,237],{"class":58},[38,1068,1069],{"class":40,"line":117},[38,1070,1071],{"class":58},"        text: {\n",[38,1073,1074,1076,1079],{"class":40,"line":130},[38,1075,1057],{"class":58},[38,1077,1078],{"class":96},"'var(--color-text-primary)'",[38,1080,100],{"class":58},[38,1082,1083],{"class":40,"line":143},[38,1084,237],{"class":58},[38,1086,1087,1090,1093],{"class":40,"line":156},[38,1088,1089],{"class":58},"        interactive: ",[38,1091,1092],{"class":96},"'var(--color-interactive)'",[38,1094,100],{"class":58},[38,1096,1097],{"class":40,"line":169},[38,1098,83],{"class":58},[38,1100,1101,1103,1105,1108],{"class":40,"line":182},[38,1102,90],{"class":89},[38,1104,109],{"class":58},[38,1106,1107],{"class":96},"'var(--color-brand-50)'",[38,1109,100],{"class":58},[38,1111,1112,1114,1116,1119],{"class":40,"line":195},[38,1113,159],{"class":89},[38,1115,109],{"class":58},[38,1117,1118],{"class":96},"'var(--color-brand-500)'",[38,1120,100],{"class":58},[38,1122,1123,1125,1127,1130],{"class":40,"line":208},[38,1124,211],{"class":89},[38,1126,109],{"class":58},[38,1128,1129],{"class":96},"'var(--color-brand-900)'",[38,1131,100],{"class":58},[38,1133,1134],{"class":40,"line":221},[38,1135,237],{"class":58},[38,1137,1138],{"class":40,"line":234},[38,1139,243],{"class":58},[38,1141,1142],{"class":40,"line":240},[38,1143,249],{"class":58},[38,1145,1146],{"class":40,"line":246},[38,1147,255],{"class":58},[38,1149,1150],{"class":40,"line":252},[38,1151,261],{"class":58},[10,1153,1155],{"id":1154},"dark-mode-palette-design","Dark Mode Palette Design",[15,1157,1158],{},"Dark mode is not just inverted light mode. Key principles:",[1160,1161,1162,1173,1179,1185],"ul",{},[1163,1164,1165,1169,1170],"li",{},[1166,1167,1168],"strong",{},"Don't switch to pure black"," — use your darkest brand shade or a dark neutral like ",[35,1171,1172],{},"slate-900",[1163,1174,1175,1178],{},[1166,1176,1177],{},"Reduce chroma"," — saturated colors appear to vibrate on dark backgrounds. Drop chroma by 15–20% in dark mode",[1163,1180,1181,1184],{},[1166,1182,1183],{},"Increase lightness gap"," — on dark backgrounds, you need more contrast between text and surface than on light backgrounds",[1163,1186,1187,1190],{},[1166,1188,1189],{},"Test both themes simultaneously"," — design components that look correct in both modes",[10,1192,1194],{"id":1193},"validation-checklist","Validation Checklist",[15,1196,1197],{},"Before shipping a custom palette:",[1160,1199,1202,1211,1217,1223,1229,1235],{"className":1200},[1201],"contains-task-list",[1163,1203,1206,1210],{"className":1204},[1205],"task-list-item",[1207,1208],"input",{"disabled":896,"type":1209},"checkbox"," Every text color meets 4.5:1 contrast against its background (both themes)",[1163,1212,1214,1216],{"className":1213},[1205],[1207,1215],{"disabled":896,"type":1209}," The scale steps are perceptually even (no jarring jumps)",[1163,1218,1220,1222],{"className":1219},[1205],[1207,1221],{"disabled":896,"type":1209}," Brand colors are distinguishable under color vision deficiency simulation",[1163,1224,1226,1228],{"className":1225},[1205],[1207,1227],{"disabled":896,"type":1209}," Dark mode palette doesn't cause eye strain (no saturated-on-dark combinations)",[1163,1230,1232,1234],{"className":1231},[1205],[1207,1233],{"disabled":896,"type":1209}," All shades are used — if 100 and 200 are too similar, collapse them",[1163,1236,1238,1240],{"className":1237},[1205],[1207,1239],{"disabled":896,"type":1209}," CSS custom properties and Tailwind config values stay in sync",[10,1242,1244],{"id":1243},"related-guides","Related Guides",[1160,1246,1247,1254,1260],{},[1163,1248,1249],{},[1250,1251,1253],"a",{"href":1252},"\u002Fguides\u002Fcolor-palette-guide","Color Palette Guide",[1163,1255,1256],{},[1250,1257,1259],{"href":1258},"\u002Fguides\u002Fdesign-color-systems","Design Color Systems",[1163,1261,1262],{},[1250,1263,1265],{"href":1264},"\u002Fguides\u002Faccessible-color-palettes","Building Accessible Color Palettes",[10,1267,1269],{"id":1268},"try-it-yourself","Try It Yourself",[15,1271,1272],{},"Design and preview custom color palettes with live shade generation. Export directly to Tailwind config or CSS custom properties.",[15,1274,1275,1276],{},"👉 ",[1250,1277,1279],{"href":1278},"\u002Ftools\u002Fcolor-palette",[1166,1280,1281],{},"Color Palette Generator",[1283,1284,1285],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":33,"searchDepth":48,"depth":48,"links":1287},[1288,1289,1293,1297,1301,1302,1303,1304],{"id":12,"depth":48,"text":13},{"id":20,"depth":48,"text":21,"children":1290},[1291,1292],{"id":25,"depth":62,"text":26},{"id":278,"depth":62,"text":279},{"id":400,"depth":48,"text":401,"children":1294},[1295,1296],{"id":407,"depth":62,"text":408},{"id":747,"depth":62,"text":748},{"id":806,"depth":48,"text":807,"children":1298},[1299,1300],{"id":810,"depth":62,"text":811},{"id":1017,"depth":62,"text":1018},{"id":1154,"depth":48,"text":1155},{"id":1193,"depth":48,"text":1194},{"id":1243,"depth":48,"text":1244},{"id":1268,"depth":48,"text":1269},"2026-05-28","How to extend Tailwind CSS with a custom brand color palette using oklch and design tokens.","md",{"immutable":896},"\u002Fguides\u002Ftailwind-custom-palette-design",{"title":5,"description":1306},"guides\u002Ftailwind-custom-palette-design","Ug1H7Z0tH-xIiDbTE8X-8RI9dQNpHoUVdzrN-t8LxEQ",1780401337341]