デザインで決めた色を実装に落とすとき、意外と手間がかかります。デザインツールはHSLやRGBで表示されるのにCSSではHEXで書きたい、ボタンのホバー用に少し暗い色が必要になる、同じ色が何箇所にも直接書かれて後から変更できない——こうした問題は、最初に色の扱い方を決めておけば防げます。この記事では、決めた配色をコードに落とす手順を、形式の変換から階調の生成、トークン化、コントラスト確認まで順番に紹介します。
1. 色の形式を理解して変換する
まず、色の表現形式を押さえます。HEXは実装で最も使われる形式で簡潔ですが、人間には「少し明るくしたい」といった調整がしづらい形式です。RGBは光の三原色の値で、透明度を扱うrgba形式もあります。HSLは色相・彩度・明度で表すため、色味を保ったまま明るさだけを変える、といった調整が直感的にできます。ただし HSL の明度は人の目の明るさと一致せず、同じ明度50%でも黄色は明るく、青は暗く見えます。色相の違う色の明るさをそろえたいときは、見た目の明るさに合わせて作られた OKLCH（CSS の oklch()）を使うと狙いどおりになります。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 では、素材の色（gray-50 など）と役割の色（bg・text・accent など）を分けて登録し、役割ごとにライトとダークで参照する素材を選べます。出力される CSS は、役割の変数が素材の変数を参照し、prefers-color-scheme: dark のときだけ参照先を差し替える形になります。Tailwind CSS（v4 / v3）や Style Dictionary の形でも出せます。背景の役割に対する文字のコントラスト比もライト・ダークの両方で表示されるので、組み合わせを決める段階で読みやすさを確かめられます。実装ではこの役割の変数だけを参照するようにすると、後からの変更が一箇所で済みます。
この手順で使うツール
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点は、実装前に押さえておくと手戻りを防げます。