カラーピッカー・カラーコード変換

HEX・RGB・HSL とは何か

画面に表示される色は、すべて赤（Red）・緑（Green）・青（Blue）の光の組み合わせでできています。RGB はその組み合わせをそのまま数字で書いたもので、rgb(29, 78, 216) は「赤が少し、緑がやや、青がたっぷり」という意味です。各チャンネルは0〜255の256段階です。

HEX（カラーコード、16進数表記）は、同じ3つの数字を16進数にしたものです。29・78・216 はそれぞれ 1d・4e・d8 になるので、#1d4ed8 と書きます。#777 のような3桁のコードは #777777 の省略形で、8桁のコードは最後の2桁で不透明度を表します。Webデザインやブランドガイドで「カラーコード」と言えば、ふつうはこの HEX のことです。

HSL は同じ色を「手で調整しやすい」形で表します。色相（Hue）は色相環の角度で、0が赤、120が緑、240が青です。彩度（Saturation）は鮮やかさ、輝度（Lightness）は黒から白までの明るさです。hsl(224, 76%, 48%) は先ほどの青と同じ色です。Photoshop などで HSB と呼ばれる HSV は、輝度の代わりに明度（Value / Brightness）を使うため、純色が50%ではなく100%になります。

OKLCH は CSS に新しく加わった形式です。明るさが人の目の感じ方に合わせて測られているので、OKLCH の明るさが同じ2色は実際に同じくらいの明るさに見えます。HSL ではそうなりません。デザインシステムで、明るい色から暗い色まで均等な段階の配色を作りたいときに役立ちます。

どの形式をいつ使うか

• HEX：CSS、デザインツール、ブランドガイド。短く、ほとんどのアプリで使えます。
• RGB・rgba()：古いコードで透明度を指定したいときや、ソフトが3つの数値を求めるとき。
• HSL：色を手で少しずつ変えたいとき。ホバー時に輝度を上げる、彩度を下げて落ち着いた色にする、など。
• HSV/HSB：Photoshop や Figma のカラーピッカーの数値と合わせたいとき。
• OKLCH：最近の CSS で配色やテーマを組むとき。
• CMYK：印刷の大まかな目安としてだけ使います（理由は次の項目で説明します）。

画面の色と印刷の色が違う理由

画面は光を足して色を作る「加法混色」で、赤・緑・青を最大にすると白になります。印刷はシアン・マゼンタ・イエロー・ブラック（K）のインクで光を引いていく「減法混色」で、もともと白い紙の上に色を重ねます。そのため、画面では鮮やかに見える青や緑の多くは、印刷ではそのまま再現できません。このツールの CMYK は、用紙や印刷機の特性を知らない簡単な計算式で求めた値です。日本の商業印刷では Japan Color などのプロファイルで変換するのが一般的なので、印刷会社の数値とは違うことがあります。大事な印刷物では、色校正を出してもらうと安心です。

コントラストとアクセシビリティの基本

文字と背景の明るさが近すぎると、晴れた屋外でスマートフォンを見るときや、視力の弱い人にとって読みにくくなります。WCAG（Webコンテンツのアクセシビリティ指針、日本では JIS X 8341-3 として採用）は、これをコントラスト比で表します。1:1（差がない）から21:1（白地に黒）までの値です。たとえばグレーの #777777 を白い背景に置くと4.47:1で、通常の文字に必要な AA の4.5:1にわずかに届きません。大きな見出しなら合格です。このツールは値を切り上げないので、4.49 と表示されたら不合格です。また、色だけで意味を伝えないことも大切です。エラーの赤や成功の緑には、文字やアイコンを添えましょう。

明るい色・暗い色・相性のよい色

明るい色（ティント）は白と、暗い色（シェード）は黒と、それぞれ均等な割合で混ぜた色です。ボタンのホバー、枠線、背景などの色違いがすぐに作れます。補色は色相環の反対側にある色で、強く目立ちます。類似色は左右30°にある色で、並べると落ち着いた印象になります。選んだ色で画面全体を塗りつぶして見たいときは、白い画面（ホワイトスクリーン）で好きな色を指定できます。この配色でWebサイト用の画像を用意するなら、画像圧縮ツールで容量を小さくしておくと表示が速くなります。