ティント＆シェードガイド
ティントは色を白と混ぜて明るくしたもの、シェードは黒と混ぜて暗くしたものです。この2つが、背景・境界線・テキスト階層に必要なカラースケールを構成します。
ベースカラーとステップ数を設定し、スウォッチをクリックするだけでHEXをコピー。SCSSエクスポートでパレット全体の変数を一括作成できます。
Pro Tips
- 背景にはティント、テキストと境界線にはシェードを使うと、UIが軽快でありながら階層が保てます。
- ブランドシステムは、ベースカラー＋ティント2＋シェード2に、ニュートラル（グレー階調）を足すと完成します。
Frequently Asked Questions
Q: ティントとシェードの違いは？
ティントとシェードの違いは？ティントはベースカラーに白を加え（明るく）、シェードは黒を加えます（暗く）。色相は変わりません。
Q: ステップ数はいくつがよい？
ステップ数はいくつがよい？片側5〜10ステップで大半のデザインをカバー。チャートやデータ可視化では合計20ステップが理想的です。
Q: SCSSエクスポートの使い方は？
SCSSエクスポートの使い方は？ブロックを.scssファイルにコピーし、$tint-2や$shade-1などの変数をスタイル内で参照します。
Q: 60-30-10ルールとは？
60-30-10ルールとは？ニュートラル60%、セカンダリ30%、アクセント10%で配色——ベースカラーは多くの場合10%のアクセントを担います。
Q: 単色だけコピーできますか？
単色だけコピーできますか？はい——グリッドやキャンバス帯のスウォッチをクリックすると、そのHEXが即コピーされます。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。