フロントエンド開発者は常にカラー形式を使い分けます:デザインは HEX、CSS では HSL で微調整、コードでは RGB。どれも同じ色を表します —— それぞれの意味と使いどころを解説します。
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 に変換して試してみましょう。
透明度: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 を即座に相互変換(プレビュー付き)。すべてブラウザ内で動作します。