HEX・RGB・HSLの違いとは？配色の基礎知識

色を1段階暗くしたいなら、触るのは明度ひとつでいい

HEX・RGB・HSLは同じ色を別の書き方で表しているだけで、どれかが優れているわけではありません。

使い分けの基準はひとつ、「その色をこれからどう操作したいか」です。

受け渡すだけならHEX、透明度を足すならRGB、明るさだけ変えるならHSL——これで実務の9割は判断できます。

配色に迷う原因の多くは、色を選ぶセンスではなく「同じ色味のまま明暗を作る手段を知らない」ことにあります。

HSLを使えるようになると、この問題はほぼ解消します。

3つの表し方の違い

表記	形式	向いている場面
HEX	#RRGGBB（16進数）	短く書ける。デザインツール間の受け渡しの定番。
RGB	rgb(255,0,0) ／ rgba(...)	透明度（アルファ値）を扱いたいとき。
HSL	hsl(色相,彩度,明度)	「同じ色味で明るさだけ変える」調整が直感的。

HEXの2桁ずつ（RR/GG/BB）は、それぞれ0〜255を16進数の00〜FFで表したものです。進数変換に慣れていると、この対応もすんなり理解できます。数値の対応関係を確かめたいときは進数変換も参考になります。

迷ったときの実務的な使い分け

• デザインカンプの色を実装するとき：まずHEXで受け取り、こでっとのカラーコード変換でRGB/HSLに変換して確認。
• 半透明が必要なとき：rgba(0,0,0,0.4) のようにRGBA表記を使う。
• ホバー時に少し明るく／暗くしたいとき：HSLの明度（L）だけを変える。

HSLが効くのは「同じ色味で濃淡を作る」場面

HSLは色を「色相（H：何色か、0〜360度）」「彩度（S：鮮やかさ、0〜100%）」「明度（L：明るさ、0〜100%）」の3つに分けて表します。この分け方の利点は、3つのうち1つだけを動かせることです。

たとえばボタンの通常時が hsl(220,90%,55%) なら、ホバー時は明度だけ下げて hsl(220,90%,45%) にすれば、色味はそのままで自然に暗くなります。同じことをHEXでやろうとすると、3つの2桁の数字をそれぞれ勘で調整することになり、色味がずれて濁りがちです。

UIの色を設計するときは、まずブランドカラーを1つ決めて、その明度を10%刻みで振ってパレットを作ると全体に統一感が出ます。こでっとのカラーコード変換でHEXをHSLに変換すれば、いま使っている色のH・S・Lがすぐ分かるので、そこから刻んでいけます。

配色を考えるときの目安

色数を増やしすぎるとまとまりがなくなりがちです。「ベースカラー70%・メインカラー25%・アクセントカラー5%」のような配分を目安に、明度・彩度で変化をつけると扱いやすくなります。

この配分でいうベースカラーは背景や余白の色、メインカラーは見出しやボタンなど画面の性格を決める色、アクセントカラーは「ここだけは見てほしい」場所に使う色です。アクセントを5%に抑えるのがコツで、目立たせたい要素が増えるほど、結果的にどれも目立たなくなります。

もうひとつ実務で外せないのが文字と背景のコントラストです。薄いグレーの文字は上品に見えますが、明るい環境や視力の条件によっては読めなくなります。本文は背景との明度差を十分に取り、装飾的に薄くするのは補足情報だけに留めてください。

ここはセンスではなく可読性の問題です。迷ったら濃いほうを選んでください。

CSS変数で管理すると、あとが楽になる

色をコードのあちこちに直接書くと、あとから調整するときに全ファイルを検索して回ることになります。CSSカスタムプロパティ（変数）にまとめておくと、変更が1箇所で済みます。

やり方は単純で、:root に --brand:#4f6ef7; のように定義し、使う側で color:var(--brand); と書くだけです。背景・文字・境界線・ブランドカラーくらいを変数にしておけば、ダークモード対応も @media (prefers-color-scheme:dark) の中で同じ変数名を上書きするだけで完了します。個別の要素に色を書いていると、この切り替えが一気に面倒になります。

命名は用途で付けるのがコツです。--blue のように色名で付けると、あとで青をやめたときに名前と実体がずれます。--brand（ブランド色）、--ink（文字色）、--line（境界線）のように役割で名付けておくと、色を変えても名前が破綻しません。

つまずきやすい点

• HEXの3桁表記を知らない：#fff は #ffffff の省略形です。各桁を2回繰り返した値になるので、#abc は #aabbcc です。
• rgbaのアルファ値を0〜255だと思う：アルファ値は0〜1の小数です。半透明の黒は rgba(0,0,0,0.4) であって、0.4を40や102と書くと意図した表示になりません。
• HSLの単位を書き忘れる：彩度と明度にはパーセント記号が必要です。hsl(220,90,55) は無効で、hsl(220,90%,55%) と書きます。
• 色だけで情報を伝える：「赤が必須項目」のように色だけに意味を持たせると、色の見え方が異なる人には伝わりません。アイコンや文言を併記してください。

もっと体系的にデザインを学びたい場合

よくある質問

HEXとRGBはどちらを使うべきですか？

透明度が必要ならRGB（正確にはRGBA）、必要なければHEXで構いません。表示される色は同じなので、どちらが正しいということはありません。デザインツールから受け取る値はHEXであることが多いので、まずHEXで受けて、透明度が要る箇所だけRGBAに書き換えるのが素直な進め方です。

HSLはどんな時に便利ですか？

「同じ色味のまま明るさだけ変えたい」ときです。ホバー時に少し暗くする、押下時にさらに暗くする、といった状態変化はHSLの明度（L）を数値で下げるだけで作れます。HEXで同じことをすると3つの数字を勘で調整することになり、色味がずれて濁りやすくなります。ブランドカラーから明度違いのパレットを作るときにも向いています。

配色の基本ルールはありますか？

「ベース70%・メイン25%・アクセント5%」の配分を目安にすると破綻しにくくなります。色数を増やすより、1色の明度・彩度を振って濃淡で差をつけるほうがまとまります。加えて、本文と背景のコントラストは装飾より優先してください。薄い文字は上品に見えますが、環境によっては読めなくなります。

ダークモードの色はどう決めればよいですか？

ライトモードの色をそのまま反転させるのではなく、明度を調整し直すのが基本です。暗い背景の上では同じ色でも彩度が強く感じられるため、鮮やかすぎると目が疲れます。背景は真っ黒より少し明るい濃灰にし、ブランドカラーは明度を上げて（HSLのLを大きく）読みやすさを確保すると自然に仕上がります。

関連ツール