[{"data":1,"prerenderedAt":436},["ShallowReactive",2],{"\u002Ftailwind-color-palette\u002Fja":3},{"id":4,"title":5,"body":6,"description":210,"extension":429,"meta":430,"navigation":431,"path":432,"seo":433,"stem":434,"__hash__":435},"content\u002Ftailwind-color-palette\u002Fja.md","Ja",{"type":7,"value":8,"toc":416},"minimark",[9,14,18,30,33,76,79,83,86,90,104,107,141,145,148,185,188,204,354,370,373,398,401,412],[10,11,13],"h2",{"id":12},"tailwindカラーパレットジェネレーターとは","Tailwindカラーパレットジェネレーターとは？",[15,16,17],"p",{},"1つの基準色から、Tailwind v4の公式パレットと同じlightnessとhueカーブで11階調（50から950）を生成するツールです。ブランドカラーをTailwindに取り込みたいときや、デザイントークンを一気に揃えたいときに使えます。",[15,19,20,21,25,26,29],{},"プレビューのスウォッチはクリックで個別コピーでき、出力は",[22,23,24],"code",{},"@theme","ブロック（Tailwind v4）と",[22,27,28],{},"tailwind.config.js","形式（v3）から選べます。",[10,31,32],{"id":32},"使い方",[34,35,36,48,55,70],"ol",{},[37,38,39,40,43,44,47],"li",{},"基準色をHEX \u002F OKLCH \u002F ",[22,41,42],{},"rgb()"," \u002F ",[22,45,46],{},"hsl()","で入力するか、カラーピッカーで選びます。",[37,49,50,51,54],{},"必要に応じてパレット名（CSS変数のベース名）を変更します。デフォルトは",[22,52,53],{},"brand","です。",[37,56,57,58,43,62,65,66,69],{},"出力形式を",[59,60,61],"strong",{},"HEX",[59,63,64],{},"OKLCH","から選び、Tailwind v3向けには",[59,67,68],{},"v3 config","タブに切り替えます。",[37,71,72,73,75],{},"プレビューで11階調を確認し、",[22,74,24],{},"ブロックをまとめてコピーするか、個別スウォッチをクリックして1色ずつコピーします。",[10,77,78],{"id":78},"主な設定項目",[80,81,82],"h3",{"id":82},"基準色",[15,84,85],{},"パレット全体の起点になる色です。入力色のhueに最も近いTailwindの色系統が自動選択され、その系統の11階調テーブルが適用されます。プレビューのスウォッチをクリックすると、その段階の値がコピーされます。",[80,87,89],{"id":88},"css変数プレフィックス","CSS変数プレフィックス",[15,91,92,95,96,99,100,103],{},[22,93,94],{},"primary","を指定すると",[22,97,98],{},"--color-primary-50","から",[22,101,102],{},"--color-primary-950","までの11個のCSS変数として出力されます。空白・大文字・記号はスラグ化（小文字化・記号除去）されて安全な変数名になります。",[80,105,106],{"id":106},"色形式",[108,109,110,116,125],"ul",{},[37,111,112,115],{},[59,113,114],{},"OKLCH（おすすめ）",": Tailwind v4公式と同じ表記で、色空間を維持したままスケール全体を表現できます",[37,117,118,120,121,124],{},[59,119,61],{},": ",[22,122,123],{},"bg-brand-500","のような既存ユーティリティと同じ記法で扱いたい場合に向きます",[37,126,127,120,130,132,133,136,137,140],{},[59,128,129],{},"v3 config タブ",[22,131,28],{},"の",[22,134,135],{},"theme.extend.colors","に貼れる",[22,138,139],{},"module.exports","形式のJavaScriptコードを出力します",[10,142,144],{"id":143},"tailwind-公式テーブルを使う強み","Tailwind 公式テーブルを使う強み",[15,146,147],{},"このツールは、Tailwindが公開している22色系統×11階調のOKLCHテーブルをそのまま利用しています。",[108,149,150,163,169],{},[37,151,152,155,156,159,160,162],{},[59,153,154],{},"公式と同じ見え方",": 生成された",[22,157,158],{},"blue-500","はTailwind公式の",[22,161,158],{},"とほぼ同じ見え方になります",[37,164,165,168],{},[59,166,167],{},"手動チューニング済み",": 各階調のlightnessとchromaはTailwindチームによって「淡く」「vividに」「締まりが出る」と調整されています",[37,170,171,120,174,177,178,181,182,184],{},[59,172,173],{},"hueベースの自動マッピング",[22,175,176],{},"cyan","寄りの色は",[22,179,180],{},"sky","や",[22,183,176],{},"テーブルから選ばれるため、入力色に近い系統が使われます",[10,186,187],{"id":187},"入出力例",[15,189,190,191,194,195,197,198,200,201,203],{},"たとえば基準色に",[22,192,193],{},"#3b82f6","（Tailwindの",[22,196,158],{},"）、パレット名を",[22,199,94],{},"にすると、Tailwind v4の",[22,202,24],{},"形式で次のようになります。",[205,206,211],"pre",{"className":207,"code":208,"language":209,"meta":210,"style":210},"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,212,213,225,238,249,260,271,282,293,304,315,326,337,348],{"__ignoreMap":210},[214,215,218,221],"span",{"class":216,"line":217},"line",1,[214,219,24],{"class":220},"s7zQu",[214,222,224],{"class":223},"sMK4o"," {\n",[214,226,228,232,235],{"class":216,"line":227},2,[214,229,231],{"class":230},"sTEyZ","  --color-primary-50: ",[214,233,234],{"class":223},"#",[214,236,237],{"class":230},"eff6ff;\n",[214,239,241,244,246],{"class":216,"line":240},3,[214,242,243],{"class":230},"  --color-primary-100: ",[214,245,234],{"class":223},[214,247,248],{"class":230},"dbeafe;\n",[214,250,252,255,257],{"class":216,"line":251},4,[214,253,254],{"class":230},"  --color-primary-200: ",[214,256,234],{"class":223},[214,258,259],{"class":230},"bfdbfe;\n",[214,261,263,266,268],{"class":216,"line":262},5,[214,264,265],{"class":230},"  --color-primary-300: ",[214,267,234],{"class":223},[214,269,270],{"class":230},"93c5fd;\n",[214,272,274,277,279],{"class":216,"line":273},6,[214,275,276],{"class":230},"  --color-primary-400: ",[214,278,234],{"class":223},[214,280,281],{"class":230},"60a5fa;\n",[214,283,285,288,290],{"class":216,"line":284},7,[214,286,287],{"class":230},"  --color-primary-500: ",[214,289,234],{"class":223},[214,291,292],{"class":230},"3b82f6;\n",[214,294,296,299,301],{"class":216,"line":295},8,[214,297,298],{"class":230},"  --color-primary-600: ",[214,300,234],{"class":223},[214,302,303],{"class":230},"2563eb;\n",[214,305,307,310,312],{"class":216,"line":306},9,[214,308,309],{"class":230},"  --color-primary-700: ",[214,311,234],{"class":223},[214,313,314],{"class":230},"1d4ed8;\n",[214,316,318,321,323],{"class":216,"line":317},10,[214,319,320],{"class":230},"  --color-primary-800: ",[214,322,234],{"class":223},[214,324,325],{"class":230},"1e40af;\n",[214,327,329,332,334],{"class":216,"line":328},11,[214,330,331],{"class":230},"  --color-primary-900: ",[214,333,234],{"class":223},[214,335,336],{"class":230},"1e3a8a;\n",[214,338,340,343,345],{"class":216,"line":339},12,[214,341,342],{"class":230},"  --color-primary-950: ",[214,344,234],{"class":223},[214,346,347],{"class":230},"172554;\n",[214,349,351],{"class":216,"line":350},13,[214,352,353],{"class":230},"}\n",[15,355,57,356,358,359,361,362,132,364,366,367,369],{},[59,357,64],{},"に切り替えると、lightnessとchromaを保った色空間表記で得られます。",[59,360,68],{},"タブに切り替えると、",[22,363,28],{},[22,365,135],{},"にそのまま貼れる",[22,368,139],{},"形式のコードが出力されます。",[10,371,372],{"id":372},"活用シーン",[108,374,375,381,392,395],{},[37,376,377,378,380],{},"ブランドカラーを",[22,379,123],{},"のような一貫したスケールでTailwindに取り込みたいとき",[37,382,383,43,385,43,388,391],{},[22,384,94],{},[22,386,387],{},"accent",[22,389,390],{},"surface","などのデザイントークンを11階調で一気に定義したいとき",[37,393,394],{},"既存の色から50–950のフルスケールを逆算して、コンポーネントの配色定義を揃えたいとき",[37,396,397],{},"色空間（HEX \u002F OKLCH）やTailwindバージョン（v4 \u002F v3）を切り替えながら色案を検討・提示したいとき",[10,399,400],{"id":400},"使うときの注意点",[108,402,403,406,409],{},[37,404,405],{},"色系統はhueだけで決まるため、明度や彩度の細かい違いでは系統が切り替わりません",[37,407,408],{},"chromaは上限0.4で頭打ちになるため、極端に鮮やかな色はパレット全体で再現しきれないことがあります",[37,410,411],{},"パレット名はスラグ化されるため、空白・大文字・記号は取り除かれます",[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":210,"searchDepth":227,"depth":227,"links":417},[418,419,420,425,426,427,428],{"id":12,"depth":227,"text":13},{"id":32,"depth":227,"text":32},{"id":78,"depth":227,"text":78,"children":421},[422,423,424],{"id":82,"depth":240,"text":82},{"id":88,"depth":240,"text":89},{"id":106,"depth":240,"text":106},{"id":143,"depth":227,"text":144},{"id":187,"depth":227,"text":187},{"id":372,"depth":227,"text":372},{"id":400,"depth":227,"text":400},"md",{},true,"\u002Ftailwind-color-palette\u002Fja",{"description":210},"tailwind-color-palette\u002Fja","DUzQOfDxo8po7hmCCkN2mumIn9FuMxOCqKMhiLXxCQY",1784725175824]