🎛 デザインシステムのカラーパレット一覧

番号は明るさの目盛り。ほとんどのシステムは1つの色相について複数の明るさを用意し、番号で区別します。番号が小さいほど薄い（背景向き）、大きいほど濃い（文字向き）という並びが一般的です。Tailwindの50〜950、Materialの50〜900、Carbonの10〜100はいずれもこの並びです。

段階数はシステムの思想で決まる。10〜11段階が主流ですが、Radixは12段階にして「何番は背景」「何番は境界線」と用途まで決めています。段階が多いほど細かく選べる代わりに、選ぶ側が迷いやすくなります。

同じ番号でも明るさは揃わない。系統をまたぐと、同じ500でも黄色は明るく青は暗いということが起こります。文字色と背景色の組み合わせを決めるときは番号だけで判断せず、コントラスト比を必ず確認してください。

基準色の位置に注意。Tailwindやbootstrapは500、Ant Designは6、Radixは9が基準色にあたります。他システムのパレットを参考にするときは、番号ではなく実際の色で見比べたほうが確実です。

そのまま使うか、参考にとどめるか。ライセンス上は再利用できますが、既存サービスと同じパレットをそのまま使うと見た目が似ます。基準色だけ自社の色に置き換え、段階の刻み方を参考にする使い方が現実的です。