デザインシステムの配色

システム	色数	構造	公式ソース
Material Design トーン	89	6 色系 × 13 段階	`Material Web v0.192 · md-ref-palette`
Tailwind CSS パレット	286	26 色系 × 11 段階	`Tailwind CSS v4 · theme.css`
UnoCSS パレット	264	24 色系 × 11 段階	`UnoCSS preset-mini · Tailwind v3 + Windi`
Panda CSS トークン	242	22 色系 × 11 段階	`Panda CSS · @pandacss/preset-panda`
Vanilla Extract テーマ	3	3 個のセマンティックトークン	`vanilla-extract · createTheme docs example`
StyleX トークン	6	6 個のセマンティックトークン	`StyleX · defineVars docs example`
Bootstrap パレット	29	29 個のセマンティックトークン	`Bootstrap v5.3.8 · _variables.scss`
Ant Design パレット	130	13 色系 × 10 段階	`Ant Design · @ant-design/colors 7.2.1`
Open Color	130	13 色系 × 10 段階	`Open Color 1.9.1 · open-color.js`
Chakra UI パレット	100	10 色系 × 10 段階	`Chakra UI · @chakra-ui/theme 3.4.1`
Radix Colors	360	30 色系 × 12 段階	`Radix Colors 3.0.0 · light scales`
Fluent UI ブランドカラー	64	4 色系 × 16 段階	`Fluent UI · @fluentui/tokens brandColors`
Primer パレット	20	20 個のセマンティックトークン	`Primer · @primer/primitives 11.10.0 light`
Polaris パレット	192	12 色系 × 16 段階	`Shopify Polaris · polaris-tokens 9.4.2`

配色の使い方

1

製品ですでに使っている配色を選ぶと、実際に配信している CSS 変数と値が揃います。

2

各スウォッチから色ページを開き、HEX・RGB・HSL・OKLCH とコントラストを確認できます。

3

文字と背景の組み合わせを決める前に、2 色をコントラストツールで検証します。

これらの色値はどこから来ていますか？

各配色はデザインシステムが公開しているパッケージ（Tailwind の theme.css、Material・Bootstrap・Ant Design などのトークンファイル）から解析しています。推定値はありません。

ファミリー単位とトークン単位の違いは？

Tailwind のようなスケール型は 1 色系あたり 11 段階、Primer のようなトークン型は意味を持った名前を提供します。各ページは実際の構造のまま表示します。

商用利用できますか？

配色は各プロジェクトが寛容なライセンス（多くは MIT または Apache-2.0）で公開しています。利用するシステムのライセンスをご確認ください。

アカウントや API キーは必要ですか？

不要です。値はページでそのまま読め、同じデータを無料 API からも取得できます。

すべてのツール 伝統色 API ドキュメント デザイントークン