デザインで決めた色を実装に落とすとき、意外と手間がかかります。デザインツールはHSLやRGBで表示されるのにCSSではHEXで書きたい、ボタンのホバー用に少し暗い色が必要になる、同じ色が何箇所にも直接書かれて後から変更できない——こうした問題は、最初に色の扱い方を決めておけば防げます。この記事では、決めた配色をコードに落とす手順を、形式の変換から階調の生成、トークン化、コントラスト確認まで順番に紹介します。
1. 色の形式を理解して変換する
まず、色の表現形式を押さえます。HEXは実装で最も使われる形式で簡潔ですが、人間には「少し明るくしたい」といった調整がしづらい形式です。RGBは光の三原色の値で、透明度を扱うrgba形式もあります。HSLは色相・彩度・明度で表すため、色味を保ったまま明るさだけを変える、といった調整が直感的にできます。CMYKは印刷向けです。実務では、調整はHSLで考え、最終的にHEXで書く、という流れが扱いやすくなります。Color Format Converter では、いずれかの形式を入力すると他の形式に一括変換でき、CSSの名前付き色にも対応しています。デザインツールから受け取った値をそのまま貼り付けて、実装で使う形式に変換する、という使い方が基本になります。まずは主要な色をこの段階で確定させます。
この手順で使うツール
Color Format Converter
HEX / RGB / HSL / CMYK を瞬時に相互変換
2. 階調（シェード）を生成する
UIを作ると、決めた1色だけでは足りません。ボタンのホバー時の色、押されたときの色、背景に薄く敷く色、無効状態の色——同じ色相で明るさの違うバリエーションが必要になります。これを毎回手作業で作ると、色ごとにばらつきが出て統一感が失われます。Color Shade Generator では、基準色から明度の異なる階調をまとめて生成できます。よく使われるのが、50から900までの段階で並べる方式で、薄い色を背景に、濃い色を文字や強調に使います。ここでのコツは、生成した階調をそのまま使うのではなく、実際にUIに当てて確認することです。特に、隣り合う段階が見分けられないほど近い場合は間引き、逆に飛びすぎている場合は間を足す、といった調整をすると実用的な階調になります。
この手順で使うツール
Color Shade Generator
ベースカラーから Tints / Shades / Tones を自動生成・CSS変数/Tailwind出力
3. 色をトークンとして整理する
階調ができたら、それを直接コードに書き散らさずトークンとして整理します。トークンとは、色に役割ベースの名前を付けて一箇所で管理する考え方です。ここで重要なのが名前の付け方で、blue-500 のような見た目そのままの名前だけだと、後で色を変えるときに名前と実態がずれます。推奨されるのは二段構えで、まず素材としての色（例：ブランドカラーの各階調）を定義し、その上に役割の名前（背景、文字、境界線、危険を示す色、成功を示す色など）を割り当てます。こうしておくと、ダークモード対応が容易になります。役割名はそのままに、参照する素材の色だけを切り替えればよいからです。Color Token Generator では、色をトークンとして整理し、CSSカスタムプロパティなどの形で出力できます。実装ではこのトークンだけを参照するようにすると、後からの変更が一箇所で済みます。
この手順で使うツール
Color Token Generator
カラーパレットを CSS変数 / Tailwind / Sass / Style Dictionary で一括出力
4. 読みやすさを確認する
配色が決まったら、必ず文字が読めるかを確認します。見た目が良くても、コントラストが不足していると、明るい場所や視力の状況によっては読めなくなります。WCAGの基準では、通常サイズの文字で4.5対1以上、大きい文字で3対1以上のコントラスト比が求められます。Color Contrast Checker で、文字色と背景色の組み合わせを入力すると、比率と基準の合否が確認できます。特に注意が必要なのが、薄いグレーの補助テキスト、色付き背景の上のボタン文字、そして無効状態の表示です。これらは意図的に目立たせない要素なので、つい基準を下回りがちです。あわせて、情報を色だけで伝えていないかも確認します。エラーを赤字だけで示すのではなく、アイコンや文言も添えると、色の見え方に関わらず伝わります。
この手順で使うツール
Color Contrast Checker
WCAG 2.1 準拠のコントラスト比をリアルタイムチェック
5. ダークモードを見据えて仕上げる
最後に、ダークモードへの備えです。単純に色を反転させるとうまくいきません。明るい背景では影で立体感を出しますが、暗い背景では影がほとんど見えないため、代わりに背景の明るさの差で階層を表現します。また、明るい背景で使っていた鮮やかな色は、暗い背景では眩しく見えることがあるため、彩度を少し落とした値を用意します。純粋な黒（#000000）を背景にすると、コントラストが強すぎて目が疲れやすいため、少し明るい暗色を使うのが一般的です。手順3でトークンを役割ベースで作っておけば、ダークモード用に素材の色を差し替えるだけで対応できます。実装ではCSSカスタムプロパティを使い、prefers-color-schemeで参照する値を切り替えるのが定番の方法です。両方のモードで、手順4のコントラスト確認を改めて行うことも忘れないようにします。
まとめ
配色の実装は「形式を変換して主要色を確定する → 階調を生成する → 役割ベースのトークンとして整理する → コントラストを確認する → ダークモードを見据える」という流れで進めると、後からの変更に強い作りになります。特に「トークンを二段構えにする」「色だけで情報を伝えない」「ダークモードは単純な反転ではない」の3点は、実装前に押さえておくと手戻りを防げます。