[{"data":1,"prerenderedAt":436},["ShallowReactive",2],{"\u002Ftailwind-color-palette\u002Fen":3},{"id":4,"title":5,"body":6,"description":212,"extension":429,"meta":430,"navigation":431,"path":432,"seo":433,"stem":434,"__hash__":435},"content\u002Ftailwind-color-palette\u002Fen.md","En",{"type":7,"value":8,"toc":416},"minimark",[9,14,18,30,34,78,82,87,90,94,109,113,143,147,150,186,190,206,356,370,374,397,401,412],[10,11,13],"h2",{"id":12},"what-is-tailwind-color-palette-generator","What is Tailwind Color Palette Generator?",[15,16,17],"p",{},"This tool generates an 11-step palette (50 to 950) from a single base color, using the same look as the official Tailwind palette. Use it when you want to bring a brand color into a Tailwind project or define a full set of design tokens at once.",[15,19,20,21,25,26,29],{},"The 11 swatches in the preview are clickable for individual copy, and the palette can be exported as a ",[22,23,24],"code",{},"@theme"," block (Tailwind v4) or a ",[22,27,28],{},"tailwind.config.js"," snippet (v3).",[10,31,33],{"id":32},"how-to-use","How to Use",[35,36,37,49,56,72],"ol",{},[38,39,40,41,44,45,48],"li",{},"Enter a base color in HEX \u002F OKLCH \u002F ",[22,42,43],{},"rgb()"," \u002F ",[22,46,47],{},"hsl()",", or pick one from the color picker.",[38,50,51,52,55],{},"Optionally change the palette name (the base name for CSS variables). The default is ",[22,53,54],{},"brand",".",[38,57,58,59,63,64,67,68,71],{},"Pick an output format: ",[60,61,62],"strong",{},"HEX"," or ",[60,65,66],{},"OKLCH",". Switch to the ",[60,69,70],{},"v3 config"," tab if you need Tailwind v3 output.",[38,73,74,75,77],{},"Review the 11 steps in the preview, then copy the ",[22,76,24],{}," block as a whole, or click an individual swatch to copy a single value.",[10,79,81],{"id":80},"main-settings","Main Settings",[83,84,86],"h3",{"id":85},"base-color","Base color",[15,88,89],{},"The color that seeds the whole palette. The tool picks the Tailwind family whose hue is closest to the input and applies that family's 11-step table. Click a swatch in the preview to copy that step's value.",[83,91,93],{"id":92},"css-variable-prefix","CSS variable prefix",[15,95,96,97,100,101,104,105,108],{},"With ",[22,98,99],{},"primary",", you get ",[22,102,103],{},"--color-primary-50"," through ",[22,106,107],{},"--color-primary-950"," as 11 CSS variables. The name is slugified (lowercased, non-alphanumerics stripped) into a safe identifier.",[83,110,112],{"id":111},"color-format","Color format",[114,115,116,122,127],"ul",{},[38,117,118,121],{},[60,119,120],{},"OKLCH (recommended)",": matches Tailwind v4's official notation and keeps lightness \u002F chroma information across the scale",[38,123,124,126],{},[60,125,62],{},": easy to drop into most CSS pipelines and consistent with traditional design tools",[38,128,129,132,133,136,137,139,140],{},[60,130,131],{},"v3 config tab",": produces a ",[22,134,135],{},"module.exports"," snippet for ",[22,138,28],{},"'s ",[22,141,142],{},"theme.extend.colors",[10,144,146],{"id":145},"why-the-official-tailwind-table","Why the Official Tailwind Table?",[15,148,149],{},"The tool uses Tailwind's own 22-family × 11-step OKLCH table as-is.",[114,151,152,164,170],{},[38,153,154,157,158,161,162],{},[60,155,156],{},"Same look as Tailwind",": a generated ",[22,159,160],{},"blue-500"," matches the official ",[22,163,160],{},[38,165,166,169],{},[60,167,168],{},"Hand-tuned curves",": each family's lightness and chroma curve is tuned by the Tailwind team for the right feel at each step (gentle at 50, vivid at 500, deep at 950)",[38,171,172,175,176,179,180,63,183,185],{},[60,173,174],{},"Hue-based auto mapping",": a ",[22,177,178],{},"cyan","-leaning input uses the ",[22,181,182],{},"sky",[22,184,178],{}," table rather than something arbitrary",[10,187,189],{"id":188},"input-and-output-example","Input and Output Example",[15,191,192,193,196,197,199,200,202,203,205],{},"With the base color ",[22,194,195],{},"#3b82f6"," (Tailwind's ",[22,198,160],{},") and the palette name ",[22,201,99],{},", the tool selects the blue family and outputs the following ",[22,204,24],{}," block in HEX:",[207,208,213],"pre",{"className":209,"code":210,"language":211,"meta":212,"style":212},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@theme {\n  --color-primary-50: #eff6ff;\n  --color-primary-100: #dbeafe;\n  --color-primary-200: #bfdbfe;\n  --color-primary-300: #93c5fd;\n  --color-primary-400: #60a5fa;\n  --color-primary-500: #3b82f6;\n  --color-primary-600: #2563eb;\n  --color-primary-700: #1d4ed8;\n  --color-primary-800: #1e40af;\n  --color-primary-900: #1e3a8a;\n  --color-primary-950: #172554;\n}\n","css","",[22,214,215,227,240,251,262,273,284,295,306,317,328,339,350],{"__ignoreMap":212},[216,217,220,223],"span",{"class":218,"line":219},"line",1,[216,221,24],{"class":222},"s7zQu",[216,224,226],{"class":225},"sMK4o"," {\n",[216,228,230,234,237],{"class":218,"line":229},2,[216,231,233],{"class":232},"sTEyZ","  --color-primary-50: ",[216,235,236],{"class":225},"#",[216,238,239],{"class":232},"eff6ff;\n",[216,241,243,246,248],{"class":218,"line":242},3,[216,244,245],{"class":232},"  --color-primary-100: ",[216,247,236],{"class":225},[216,249,250],{"class":232},"dbeafe;\n",[216,252,254,257,259],{"class":218,"line":253},4,[216,255,256],{"class":232},"  --color-primary-200: ",[216,258,236],{"class":225},[216,260,261],{"class":232},"bfdbfe;\n",[216,263,265,268,270],{"class":218,"line":264},5,[216,266,267],{"class":232},"  --color-primary-300: ",[216,269,236],{"class":225},[216,271,272],{"class":232},"93c5fd;\n",[216,274,276,279,281],{"class":218,"line":275},6,[216,277,278],{"class":232},"  --color-primary-400: ",[216,280,236],{"class":225},[216,282,283],{"class":232},"60a5fa;\n",[216,285,287,290,292],{"class":218,"line":286},7,[216,288,289],{"class":232},"  --color-primary-500: ",[216,291,236],{"class":225},[216,293,294],{"class":232},"3b82f6;\n",[216,296,298,301,303],{"class":218,"line":297},8,[216,299,300],{"class":232},"  --color-primary-600: ",[216,302,236],{"class":225},[216,304,305],{"class":232},"2563eb;\n",[216,307,309,312,314],{"class":218,"line":308},9,[216,310,311],{"class":232},"  --color-primary-700: ",[216,313,236],{"class":225},[216,315,316],{"class":232},"1d4ed8;\n",[216,318,320,323,325],{"class":218,"line":319},10,[216,321,322],{"class":232},"  --color-primary-800: ",[216,324,236],{"class":225},[216,326,327],{"class":232},"1e40af;\n",[216,329,331,334,336],{"class":218,"line":330},11,[216,332,333],{"class":232},"  --color-primary-900: ",[216,335,236],{"class":225},[216,337,338],{"class":232},"1e3a8a;\n",[216,340,342,345,347],{"class":218,"line":341},12,[216,343,344],{"class":232},"  --color-primary-950: ",[216,346,236],{"class":225},[216,348,349],{"class":232},"172554;\n",[216,351,353],{"class":218,"line":352},13,[216,354,355],{"class":232},"}\n",[15,357,358,359,361,362,364,365,367,368,55],{},"Switch the output format to ",[60,360,66],{}," to get the same scale in OKLCH notation with lightness and chroma preserved. Switch to the ",[60,363,70],{}," tab to get a ",[22,366,135],{}," snippet that drops straight into ",[22,369,28],{},[10,371,373],{"id":372},"use-cases","Use Cases",[114,375,376,379,391,394],{},[38,377,378],{},"Bringing brand colors into a Tailwind project with a consistent 50–950 scale",[38,380,381,382,44,384,44,387,390],{},"Defining semantic tokens (",[22,383,99],{},[22,385,386],{},"accent",[22,388,389],{},"surface",") across 11 steps at once",[38,392,393],{},"Reverse-engineering a full 50–950 scale from a single color in a design system",[38,395,396],{},"Exploring color proposals while switching between HEX \u002F OKLCH and Tailwind v4 \u002F v3",[10,398,400],{"id":399},"things-to-keep-in-mind","Things to Keep in Mind",[114,402,403,406,409],{},[38,404,405],{},"The family is selected by hue alone; subtle brightness or chroma differences do not switch families",[38,407,408],{},"The chroma is clamped to 0.4, so very high input saturation is bounded and the full input chroma may not appear in the output",[38,410,411],{},"The palette name is slugified, so spaces, uppercase letters, and symbols are removed",[413,414,415],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":212,"searchDepth":229,"depth":229,"links":417},[418,419,420,425,426,427,428],{"id":12,"depth":229,"text":13},{"id":32,"depth":229,"text":33},{"id":80,"depth":229,"text":81,"children":421},[422,423,424],{"id":85,"depth":242,"text":86},{"id":92,"depth":242,"text":93},{"id":111,"depth":242,"text":112},{"id":145,"depth":229,"text":146},{"id":188,"depth":229,"text":189},{"id":372,"depth":229,"text":373},{"id":399,"depth":229,"text":400},"md",{},true,"\u002Ftailwind-color-palette\u002Fen",{"description":212},"tailwind-color-palette\u002Fen","5SyOI3UzNYMeDyHXXS8Xmbhgru6ULhH6fliEChRo6-g",1784725211656]