HEX・RGB・HSL — カラーコードの読み方

2026 年 7 月 28 日確認

Boltpic

現在の Boltpic ツールの動作を説明し、関連する技術資料へリンクしています。画像・ブラウザ・端末によって変わる結果は、固定値ではなく条件とともに示します。

#e63946、rgb(230, 57, 70)、hsl(355, 78%, 56%) は、同じ赤を異なる方法で表した値です。表示される色は同じでも、値の共有、計算、明るさの調整など、作業によって扱いやすい表記が変わります。

ブランドカラーの共有には HEX、コード上で色の成分を扱うなら RGB、同じ色相のまま明るさや彩度を調整するなら HSL、というように使い分けられます。

HEX: 短くてコピペしやすい

HEX コードでは、# の後ろに赤・緑・青の値を 2 桁ずつ並べます。16 進数なので 00 が 0、ff が 255 です。#e63946 は、赤 e6（230）、緑 39（57）、青 46（70）を表します。各組で同じ文字が重なる場合は短縮でき、#ffffff は #fff と書けます。

8 桁の HEX では、#e6394680 の最後の 2 桁がアルファ値を表し、80 は約 50% の不透明度です。大文字と小文字は区別されないため、#E63946 と #e63946 は同じ色です。短くコピーしやすいので、チャット、チケット、スタイルシートで値を共有するときに向いています。

rgb(230, 57, 70) は、赤・緑・青の各チャンネルを 0〜255 の 10 進数で表した値です。画面表示や画像処理のコードで各チャンネルを直接扱うときに分かりやすい表記です。アルファ値を加えた rgba(230, 57, 70, 0.5) は、同じ色を 50% の不透明度で表示します。

RGB は各チャンネルを直接指定するため、同じ色相のまま少し暗くするような調整には向きません。3 つの値を個別に変えると色相までずれやすいため、このような作業では HSL が便利です。

hsl(355, 78%, 56%) は、色相環の 355°、彩度 78%、明度 56% を表します。色の系統、鮮やかさ、黒と白の間の位置を分けて調整できるため、関連色を作りやすい表記です。

暗いホバー色には色相と彩度を保ったまま明度を下げ、落ち着いた色には彩度を下げます。次のように、ひとつの基準色から小さな階調を作れます。

--brand:       hsl(355, 78%, 56%);
--brand-hover: hsl(355, 78%, 46%);
--brand-soft:  hsl(355, 60%, 92%);
--brand-text:  hsl(355, 70%, 32%);

最新の CSS では、知覚上の変化を扱いやすい oklch() や広色域向けの表記も利用できます。対応環境を確認し、一般的な調整では HSL、より一貫した知覚差が必要な設計では OKLCH を検討してください。

CSS は 3 つの表記をすべて利用できます。値の共有・保管には HEX、色の調整やバリエーション作成には HSL、コードや別のツールがチャンネル値を扱う場合は RGB を選べます。表記が混在しても動作しますが、チーム内で規則を決めると管理しやすくなります。

ロゴやスクリーンショット、写真から色を確認するときは、スポイトで対象のピクセルを指定します。Boltpic のカラーピッカーはカーソル周辺を拡大し、選んだピクセルの値を HEX・RGB・HSL で表示します。画像全体の主要色を確認したい場合は、パレット抽出ツールを使います。

コードが読めても、組み合わせが読みやすくなるわけではありません。WCAG 2.2 のレベル AA では、例外を除き通常の文字に 4.5:1 以上、大きな文字に 3:1 以上のコントラストを使います。白地の #aaaaaa は約 2.3:1 です。公開前に実際の文字色と背景色を確認してください。