UI カラー システムは、単一のシード カラーから構築された一連のカラー バリアントです。デザイントークン、ボタン、背景、テキストの色に一貫した明から暗のスケールを提供します。
シードの色を選択し、スタイル (Tailwind またはマテリアル) を選択します。このツールは、明るい (50) から暗い (900) までの完全な 10 ステップのパレットを生成し、デザイン システムに最適です。
Frequently Asked Questions
Q: デザイントークンとは何ですか?
デザイントークンとは何ですか?デザイン トークンは、色などのデザイン属性を保存する名前付きの値で、デザイン システム全体で一貫して使用されます。
Q: なぜ 10 色必要なのでしょうか?
なぜ 10 色必要なのでしょうか? UI 要素が異なれば、必要なコントラスト レベルも異なります。 10 段階のスケールにより、背景、境界線、ホバー状態、テキストを柔軟に設定できます。
Q: デザイントークンパレットとは何ですか?
デザイントークンパレットとは何ですか?デザイン トークン パレットは、単一のブランド カラーから生成される体系的な一連のカラー変数 (プライマリ、セカンダリ、サーフェス、テキスト) です。これにより、UI 全体の一貫性が確保されます。
Q: Tailwind 以外の設計システムにエクスポートできますか?
Tailwind 以外の設計システムにエクスポートできますか?はい、このツールは CSS カスタム プロパティ、SCSS 変数、および Tailwind 構成形式にエクスポートします。スタックに一致する形式をコピーします。
Q: このツールでダークモードを処理するにはどうすればよいですか?
このツールでダークモードを処理するにはどうすればよいですか?最初にライト モード パレットを生成し、次にダーク モード用に彩度と明度の値を下げた同じシード カラーを使用します。多くのデザイン システムでは、表面と文字の色が反転します。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。