フロントエンド開発者は常にカラー形式を使い分けます:デザインは HEX、CSS では HSL で微調整、コードでは RGB。どれも同じ色を表します —— それぞれの意味と使いどころを解説します。
同じ色を 3 つの記法で。 このサイトで使っているオレンジは
#e76f51です。私たちのカラー変換に入れると、RGB は231, 111, 81、HSL は12, 76%, 61%を返します。並べて読むと用途の違いがはっきりします。RGB は各原色をどれだけ光らせるかを示すもので、画面には必要ですが「どんな色か」はほとんど分かりません。HSL は「色相 12 度(オレンジ寄りの赤)、彩度 76%、明度 61%」と語ります。同じ色の少し暗い版が欲しいときに必要なのはこちらです。HSL の数値を 1 つ変えても同じ色系に留まりますが、RGB の数値を 1 つ変えるとどこへでも飛びます。
HEX
HEX はおなじみの #RRGGBB という Web 表記で、各 2 桁が赤/緑/青のチャンネルを 16 進数(00–FF)で表します。#2563eb は固定のブランドカラーを貼るのに最適です。短縮形 #RGB(例 #f00)は各桁を展開します(#ff0000)。コンパクトですが、手で調整するのは直感的ではありません。
RGB
RGB は同じ 3 チャンネルを 10 進数 0–255 で表します:rgb(37, 99, 235)。画面の発光方法に直接対応し、チャンネルを操作するコードで便利です。ただし HEX 同様、「少し明るく」するには関連のない 3 つの数字を変える必要があります。
HSL
HSL は色を色相(Hue、色環上 0–360°)、彩度(Saturation、0–100%)、明度(Lightness、0–100%)で表します:hsl(217, 83%, 53%)。これは色を調整するのにデザイナーが好むものです:
- 明るく?L を上げる。
- 落ち着かせる?S を下げる。
- 近い色が欲しい?H をずらす。
この直感性により、HSL はカラースケールや同一色相の明暗バリエーション作りに最適です。カラー変換ツールで任意の色を HSL に変換して試してみましょう。
最初の 3 行が、HSL でいちばん誤解されている点を説明します。白・黒・中間グレーはいずれも色相 0 で返ります —— グレーは 0, 0%, 50% —— しかしこの色相は「赤」ではなく、未定義でありゼロとして報告されているだけです。彩度が 0% だからです。グレーの色相スライダーを動かしても何も起きませんし、彩度がゼロのままならどんな色相でも色は付きません。純赤の 0, 100%, 50% と比べてください。色相の数字は同じ、意味は別物です。
透明度:RGBA と HSLA
透明度を加えるにはアルファチャンネル(0–1)を付けます:rgba(37, 99, 235, 0.5) や hsla(217, 83%, 53%, 0.5)。現代の CSS は HEX のアルファ(#2563eb80)や、空白区切りの rgb(37 99 235 / 50%) も許容します。
どれを使うべき?
- 固定のブランドカラー、デザインからコピペ: HEX。
- コードでチャンネルを操作: RGB。
- スケール設計、明度/彩度の微調整、テーマ化: HSL。
3 つは相互変換できるので、今の作業に最も楽なものを選び、必要なときに変換しましょう。
デザインシステムの小技
パレットを HSL で定義し、L(時に S)だけを変えて濃淡を導出します。HEX を試行錯誤でいじるより、調和した予測可能な明暗バリエーションがずっと簡単に得られます。
無料のカラー変換ツールで HEX・RGB・HSL を即座に相互変換(プレビュー付き)。すべてブラウザ内で動作します。
同じ色を各形式で書くと
一つの色を三通りで書くと理解しやすくなります。以下はすべて同じ青です:
| 形式 | 値 | こんなときに |
|---|---|---|
| HEX | #2563eb | デザインやブランド規定から固定色を貼る |
| RGB | rgb(37, 99, 235) | JavaScript/canvas で各チャンネルを読み書きする |
| HSL | hsl(217, 83%, 53%) | 明るく・くすませる・相性の良い色を派生させる |
同じ色の組を私たちのカラーコンバーターに通した結果です。最初の 3 行は意図的に無彩色、最後の 3 行はこのサイトが実際に使っている配色です。
| HEX | RGB | HSL |
|---|---|---|
#ffffff | 255, 255, 255 | 0, 0%, 100% |
#000000 | 0, 0, 0 | 0, 0%, 0% |
#808080 | 128, 128, 128 | 0, 0%, 50% |
#ff0000 | 255, 0, 0 | 0, 100%, 50% |
#00ff00 | 0, 255, 0 | 120, 100%, 50% |
#0000ff | 0, 0, 255 | 240, 100%, 50% |
#e76f51 | 231, 111, 81 | 12, 76%, 61% |
#2a9d8f | 42, 157, 143 | 173, 58%, 39% |
#e9c46a | 233, 196, 106 | 43, 74%, 66% |
よくある誤解
- **「HEX は RGB より精密。」**違います——どちらも各チャンネル 8 ビットなので、
#2563ebとrgb(37, 99, 235)は完全に同じ。HEX は 16 進数なだけです。 - **「HSL の L が同じなら明るさも同じ。」**目にはそう見えません。同じ明度でも
hsl(60, 100%, 50%)(黄)はhsl(240, 100%, 50%)(青)よりずっと明るく見えます。知覚的に均一なスケールが欲しければ、OKLCH のような新しい色空間を検討しましょう。 - **「
#RGBの短縮形はどんな色でも使える。」**各チャンネルが「同じ桁の繰り返し」のときだけです。#2563ebに有効な 3 桁表記はなく、#ff0000にはあります(#f00)。
よくある質問
アルファの 0.5 と 50% は同じ?
同じです。rgba(…, 0.5) と新しい rgb(37 99 235 / 50%) は同じ半透明を表します。
カラー形式はアクセシビリティのコントラストに影響しますか? しません。コントラストは書き方ではなく実際の色で決まります——同じ組み合わせなら、HEX でも RGB でも HSL でも判定は同じです。
rebeccapurple のような名前付きの色は?
手早い確認には便利ですが、約 148 色しかないため、特定の色調が要る瞬間に HEX か HSL へ切り替えることになります。
これらの色をグラデーションや影に使うなら、姉妹記事のCSS グラデーション・影・角丸を。先に画像から色を取りたいなら画像カラーピッカーをどうぞ。