使い方
- まず基準色を 1 色入れ、ライト UI かダーク UI かを選びます。
- AA / AAA の目標を選び、アクセント色の最低コントラストの目安を決めます。
- できた CSS 変数をプロトタイプやトークン設計へ貼り、最後に コントラストチェッカー で最終組み合わせを確認します。
Wave 53 拡張
単色や 2 色の確認から、UI 役割ごとの配色設計へ進む
このページは Color Palette、CSS color-mix、Contrast Checker の間に置きます。見る対象は 1 つで、採用した基準色から UI の役割色をどう組み始めるかです。
CSS 変数
:root {
--surface: #ffffff;
--surface-alt: #f4f7fd;
--text: #111827;
--text-muted: #475569;
--accent: #1d4ed8;
--accent-text: #ffffff;
--border-color: #b3c1dd;
}近いページとの使い分け
カラーパレット生成 は、1 色の周辺候補を広く見たいときに使います。配色ハーモニー は、色相関係を決めたいときに使います。CSS color-mix 生成 は、採用した 2 色から実装用の混色式を作りたいときに使います。このページは、採用した基準色から UI 役割ごとの配色を組み始める段階で使います。役割色が固まったあとで CSS 変数や JSON トークンへ整理したいなら カラートークン出力 へ進みます。最終的な 2 色の可読性確認は コントラストチェッカー で仕上げます。
FAQ
このページでは何を作れますか？
採用済みの基準色 1 色から、surface、text、補助文字、accent、accent 上文字、border などの役割色をまとめて組むための出発点を作れます。
コントラストチェッカーとの違いは何ですか？
コントラストチェッカーは、最終的に決めた 2 色の組み合わせが通るかどうかを見るページです。このページは、その前段として、基準色から UI 全体の役割色を組み始めるページです。
カラーパレット生成との違いは何ですか？
カラーパレット生成は、1 色の周辺候補を広く見たいときに向いています。このページは、その色を実際の UI 役割へどう割り当てるかを考える段階で使います。
共有URLには何が入りますか？
共有URLには、基準色、ライト/ダーク、AA/AAA 目標が入ります。