色コード変換ツールの使い方
Web 制作や CSS のコーディング、デザインデータの調整では、色コードの形式変換が頻繁に発生します。デザインツールが返すのは HEX、CSS では明暗を調整しやすい HSL を使いたい、印刷所とのやり取りには CMYK、フロントエンドの変数は RGB が慣例——。手計算は遅いうえに間違えやすくもあります。本ツールは代表的な形式を 1 ページに並べ、1 つ変えれば残りがすべて追従します。
5 つの形式とは
- HEX（16 進数）：Web とデザインツールで最も一般的な表記で、
#3b82f6のような形です。2 文字ずつが赤・緑・青に対応し、値は 00〜ff。CSS に書くならまずこれです。 - RGB（赤・緑・青）：色を 0〜255 の 3 つのチャンネルに分解したもので、画面の発光原理をそのまま表します。CSS では
rgb(59, 130, 246)も使えます。 - HSL（色相・彩度・明度）：色相は色相環の角度 0〜360、彩度は鮮やかさ 0〜100%、明度は 0〜100% です。「この青を色相はそのままに少し暗くしたい」というときは HSL が便利で、明度を変えるだけですみます。
- HSV / HSB（色相・彩度・明度）：HSL と考え方は近いものの、明度の定義が異なります。デザインツール（Photoshop、Sketch）の「HSB」はこちらです。
- CMYK（シアン・マゼンタ・イエロー・ブラック）：印刷で使う減法混色です。画面の発光である RGB はそのまま印刷できないため、印刷所は CMYK を求めます。ここで算出されるのは公式による換算値で、実際の印刷は紙とインクにも左右されるため参考値として扱ってください。
つまずきやすいポイント
HSL の明度 50% は「標準」ではありません。 明度を 50% にすれば元の色になると思われがちですが、HSL の L=50% はその色相で最も鮮やかになる位置にすぎません。純粋な赤 #ff0000 の HSL は hsl(0, 100%, 50%) で、純白は hsl(0, 0%, 100%) です。同じ色系の濃淡を作りたいときは L 値を動かすのが最も効果的です。
CMYK から RGB に戻すとずれます。 CMYK は 4 チャンネルの減法混色、RGB は 3 チャンネルの加法混色で、両者の色域は重なりません。純粋なシアンやマゼンタのような CMYK の色は画面では出せませんし、逆に画面の高彩度の緑も印刷では出せません。デザインは画面データを基準にし、入稿前に印刷所へ色差の確認を依頼してください。
HEX の短縮形には条件があります。 #fff は #ffffff の短縮形ですが、2 文字ずつが同じ場合しか短縮できません。#3b82f6 を 3 桁に縮めることはできません。
透明度を忘れずに。 HEX は 8 桁（#3b82f680 など）で書け、最後の 2 桁がアルファチャンネルです。CSS では rgba(59,130,246,0.5) にあたります。本ツールが扱うのは透明チャンネルを含まない 6 桁の HEX なので、透明度は別途指定してください。
コントラストが重要な理由
WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）は文字のコントラストに明確な基準を設けています。通常の本文は最低 4.5:1、大きな文字（18pt 以上、または 14pt の太字）は最低 3:1 です。コントラストが不足すると、弱視の利用者や強い日差しの下でスマートフォンを見る人にとって内容が読みにくくなり、ページのアクセシビリティ評価や検索での見え方にも影響します。本ツールは前景色と背景色のコントラストを算出し、基準を満たすかどうかを判定します。
よくある質問
CMYK の百分比を足しても 100% にならないのはなぜ？
CMYK の 4 チャンネルは理論上 100% に近くなります（減法混色なので、4 色のインクがすべての光を吸収すると黒になるため）。ただ実際の換算では合計が 100% を超えることも下回ることもよくあります。理由は 2 つで、1 つは色インクそのものが純粋でないこと、もう 1 つは業界で GCR/UCR（グレー成分置換）などのアルゴリズムにより黒版を最適化し、インクを節約して印刷品質を上げていることです。本ツールが出すのは純粋な公式換算の結果で、こうした工程調整は含みません。
HSL と HSV はどこが違うのですか？
違いは「明度」の定義にあります。HSL の L は黒（0%）から飽和色（50%）を経て白（100%）へと進みます。HSV の V は黒（0%）から最も鮮やかな色（100%）へ一直線に進み、「さらに白くなる」区間がありません。そのため同じ色でも 2 つのモデルでは数値が変わります。デザインの際は、使っているソフトがどちらなのかを確認してください。Photoshop のカラーピッカーの H・S・B は HSV です。
色階（グラデーションの段階）はどう生成していますか？
本ツールは HSL モデルで明度を 95% から 5% まで均等に分割し、色相と彩度を保ったまま HEX に戻しています。こうしてできる色階は同じ色系で明暗が段階的に進むため、ボタンのホバー状態、カードの階層背景、グラフのグラデーションに向いています。元の色の彩度が低い（灰色に近い）場合、色階の変化は目立たなくなります。
コントラスト 21:1 とはどういう意味ですか？
コントラストの理論上の上限で、純黒と純白（#000000 と #ffffff）の組み合わせで現れます。計算は相対輝度の比で、（明るいほう + 0.05）÷（暗いほう + 0.05）です。比が大きいほどコントラストが強くなります。Web 制作では本文で 7:1 以上、ボタン上の文字で最低 4.5:1 を目安にしてください。
#0000ff と #0000FF に違いはありますか？
ありません。HEX の色コードは大文字小文字を区別しません。ただしチーム内では小文字に統一する慣例が多く、コードスタイルチェックの警告を避けられます。