カラーコードの違いを徹底解説：16進数（HEX）・RGB・HSLの特徴と使い分け

画面に色を表示する方法は、コーディングの観点からいくつかあります。その中でも「HEX（16進数）」「RGBA」「HSLA」は、最もよく使われる3つのカラーコード体系です。

HEXコードやRGBを見たことがある方は多いでしょう。しかし、人間にとって読みやすいHSLは、まだ馴染みがないかもしれません。色の書き表し方はそれぞれ異なる場面で活きるため、各方式の基本を理解しておけば、状況に応じて最適な選択ができるようになります。この記事では、RGB・HEX・HSLの違いをわかりやすく解説します。

RGBとは？（赤・緑・青）

まずはRGBから説明するのが理にかなっています。なぜなら赤（Red）・緑（Green）・青（Blue）の3色こそが、スクリーンが他のほぼすべての色を作り出すための基本色だからです。これは「加法混色」と呼ばれる仕組みによるものですが、RGBを理解するためにその科学的な詳細まで踏み込む必要はありません。

rgb(255, 0, 0)はR（赤）が最大値のため、純粋な赤を表します。GまたはBを255に設定すれば、完全な緑や青になります。3つすべてを255にすると白（すべての色の合計）となり、すべてを0にすると黒になります。さらに4番目の値（アルファチャンネル、0〜1の範囲）を追加すれば、透明度も指定可能です。rgba(0, 0, 0, .5)は半透明の黒を意味します。

仕組みはシンプルですが、実は直感的とは言えません。RGBのバランスは、同じ色のトーンを少し変えるだけでも大きく変化するため、人間が手作業で微調整するのは非常に困難です。幸い、RGBジェネレーターと呼ばれる便利なツールは数多く存在します。

16進数カラーコード（HEX）とは？

HEXは、RGB値を別の形式で書き表したものにすぎません。例えば#6a79f7（コーンフラワーブルー）は、rgb(106, 121, 247)に直接対応します。6aが赤、79が緑、f7が青を表しています。

まず知っておきたいのは、16進数カラーコードでは「a〜f」の文字が10〜15の数値を表すという点です。また、これは16進法であり、すべてが基数16で表されます。10進法では21は「2 × 10 + 1」ですが、16進法では「2 × 16 + 1」となります。つまり、最初の数字に16を掛けて2番目の数字を足すだけ。非常に簡単です！6a = 6 × 16 + 10で106、79 = 7 × 16 + 9で121となります。

計算自体は面白いものの、16進数コードは人間にとってRGBよりも扱いづらい面があります。一方で、コピペが容易で、覚えやすい英数字の組み合わせになることも魅力です。

さらに、先頭に255に対する割合に相当する値を追加することで、透明度も指定できます。例：#806a79f7。16進数の80は126であり、最大値255の約50%に相当します。

HSLとは？（色相・彩度・輝度）

HSLは人間の可読性を重視して設計されたカラーモデルで、特にRGBの代替として人気が高まっています。その仕組みは以下の通りです。

色相（Hue）は色そのものを意味し、カラーホイール（色相環）の角度でどの色かを示します。カラーホイールと主要な色の位置を把握していれば、45°がオレンジ系、270°が紫系になると、一瞬で判断できるでしょう。

• 0 ＝ 赤
• 60 ＝ 黄
• 120 ＝ 緑
• 180 ＝ シアン
• 240 ＝ 青
• 300 ＝ マゼンタ

彩度（Saturation）は、その色がどれだけ鮮やかかを表します。彩度0%ではグレーの階調になり、100%で最も鮮やかな状態になります。色を落ち着かせたいとき、あるいはもっと印象的にしたいときは、この値を変更するだけでOKです。

輝度（Lightness）は、色の明るさや暗さを示します。輝度0%は色相や彩度の設定に関係なく黒になり、100%で白になります。ご想像の通り、50%が最も本来の色に近い状態を再現します。

これらの情報があれば、hsl(0, 100%, 50%)が何を意味するのかすぐに分かるはずです。そう、ただの赤です！より暗く深みのある赤が欲しい場合はhsl(0, 70%, 40%)を試してみましょう。それを青に変えたい場合は？0を240に変更するだけで完成です。透明度にも対応しており、RGBと同様に4番目の値（0〜1）を追加するだけです。例：hsla(240, 70%, 40%, .5)。

HSV/HSBとHSIについて

「え？まだカラーモデルがあるの？」と思った方もいるかもしれません。しかし、コンピューターで色を扱うほとんどの方にとっては、HEX・RGB・HSLで十分です。これらは圧倒的に一般的な色の記述方法です。ただし、グラフィックデザインや画像認識の機械学習など、画像や色を大量に扱う分野では、こうしたより特殊なカラーモデル、あるいはここで挙げていない他のモデルを目にすることもあるでしょう。

HSBは「Hue Saturation Brightness（色相・彩度・明度）」、HSVは「Hue Saturation Value（色相・彩度・明度）」の略です。実は両者は同じモデルの別名にすぎず、HSLとの最大の違いは彩度の定義方法にあります。HSI（Hue Saturation Intensity：色相・彩度・強度）はHSB/HSVといくつか細部が異なりますが、あまり広く使われていないため、実際に目にする機会は多くないでしょう。

どのカラーモデルを使うべきか？

一般的に、カラーモデルの選択は比較的小さなデザイン上の決定ですが、優れた成果物は数多くの小さな決定の積み重ねによって生まれます。基本としては、HEXコードはコピペが容易で、人間があまり関与しない場面に最適です。RGB/RGBAは可読性が高く、人間が時々透明度を調整したい場合に適しています。人間が手動で色を変更する必要がある場合は、HSL/HSLAを選びましょう。それ以外はほぼ好みの問題ですが、チームHSL派の人々はより賢く、より魅力的である傾向があるようです。