[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"tool-content-en-palette-generator":3},{"id":4,"title":5,"body":6,"description":119,"extension":120,"locale":121,"meta":122,"navigation":123,"path":124,"seo":125,"stem":126,"toolId":127,"__hash__":128},"tools\u002Ftools\u002Fen\u002Fpalette-generator.md","Color Palette Generator",{"type":7,"value":8,"toc":113},"minimark",[9,13,22,39,46,58,62,110],[10,11,5],"h2",{"id":12},"color-palette-generator",[14,15,16,17,21],"p",{},"Pick one base color and get a complete ",[18,19,20],"strong",{},"Tailwind-style shade scale"," — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — computed in the OKLCH color space so light ends stay vivid, dark ends keep the hue, and the mid tone never drifts.",[23,24,25,33,36],"ul",{},[26,27,28,29,32],"li",{},"The ",[18,30,31],{},"500 step always equals your input color",", so the scale is anchored to what you picked.",[26,34,35],{},"Lightness steps follow a fixed perceptual curve; chroma is scaled per step and clamped to stay inside sRGB.",[26,37,38],{},"The hue gains a slight warm shift on light steps and a cool shift on dark steps, matching how hand-tuned palettes behave.",[14,40,41,42,45],{},"An optional ",[18,43,44],{},"neutral row"," generates a gray scale that carries a hint of the base hue — the same idea as Tailwind's slate or zinc. The tint slider controls how much hue survives: 0% is pure gray, 100% is a clearly colored neutral.",[14,47,48,49,53,54,57],{},"Click any swatch to copy its hex value. Names are sanitized into URL-friendly tokens (",[50,51,52],"code",{},"My Brand!"," becomes ",[50,55,56],{},"my-brand",").",[10,59,61],{"id":60},"export","Export",[23,63,64,86,104],{},[26,65,66,69,70,73,74,77,78,81,82,85],{},[18,67,68],{},"CSS variables",": ",[50,71,72],{},"--color-brand-50"," through ",[50,75,76],{},"--color-brand-950",", plus a ",[50,79,80],{},"*-neutral"," block when enabled, wrapped in ",[50,83,84],{},":root",".",[26,87,88,91,92,95,96,99,100,103],{},[18,89,90],{},"Tailwind config",": a ",[50,93,94],{},"colors.brand"," snippet with every step, ready for ",[50,97,98],{},"tailwind.config.js"," or the CSS ",[50,101,102],{},"@theme"," block.",[26,105,106,109],{},[18,107,108],{},"JSON",": both rows keyed by step for design-token pipelines.",[14,111,112],{},"The random button picks a new mid-tone base color. Everything runs locally in your browser.",{"title":114,"searchDepth":115,"depth":115,"links":116},"",2,[117,118],{"id":12,"depth":115,"text":5},{"id":60,"depth":115,"text":61},"Turn one base color into a full 50–950 shade scale with an optional tinted neutral row, then export CSS variables, Tailwind config, or JSON.","md","en",{},true,"\u002Ftools\u002Fen\u002Fpalette-generator",{"title":5,"description":119},"tools\u002Fen\u002Fpalette-generator","palette-generator","h7JeZFFToU-KxZOb6YPA45Ul4U7q926Xge-vt5ACX88",1792391419714]