Hex、RGB、HSL：みんなのためのクイックガイド

デザイナーから色が送られてきました：#3B82F6。それをライブラリ用にRGBで必要です。あるいはもう少し暗いバージョンが欲しい。モニターで見た目が違う理由を把握しようとしている。

色のシステムは複雑ではありませんが、誰もちゃんと説明しません。実際に知っておくべきことはこれです。

HEX：Web標準

#3B82F6 はこう分解されます：

• 3B = 赤（10進数で59）
• 82 = 緑（10進数で130）
• F6 = 青（10進数で246）

各ペアは00からFF（10進数で0-255）までの16進数です。大きいほど明るい。#000000 が黒。#FFFFFF が白。

短縮形も存在します：#FFF = #FFFFFF、#09C = #0099CC。3文字は各文字を2倍にして6文字に展開されます。

RGB：分かりやすいやつ

rgb(59, 130, 246) は同じ色で、書き方が違うだけです。赤59、緑130、青246。

パーセント形式を求めるフォーマットもあります：rgb(23%, 51%, 96%)。同じもの、記法が異なるだけ。

RGBAは透明度を追加します：rgba(59, 130, 246, 0.5) は、その青が50%不透明度。

HSL：実際に使えるやつ

hsl(217, 91%, 60%) は色を異なる方法で記述します：

• 色相（Hue, 217）: カラーホイール上の位置。0=赤、120=緑、240=青。
• 彩度（Saturation, 91%）: 強度。0%=灰色、100%=鮮やか。
• 明度（Lightness, 60%）: 明るさ。0%=黒、50%=純色、100%=白。

なぜHSLが重要か：色の調整が直感的です。

暗いバージョンが欲しい？明度を下げる。 落ち着いたバージョンが欲しい？彩度を下げる。 同じ「雰囲気」で全く違う色が欲しい？色相を変えて、彩度と明度はそのまま。

HEXやRGBでは、これらの調整には計算か推測が必要です。HSLでは、単一の数値変更です。

相互変換

数値は同じ色を異なる方法で表現しているだけです。#3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)。

特定のフォーマットが必要な時は変換ツールを使いましょう。ほとんどのデザインツールは3つすべてを表示します。CSSも3つすべてを受け付けます。

よくある状況

「この色を暗くして」 HSLに変換、明度を10-20%下げ、変換して戻す。

「ホバー状態のバリエーションが必要」 HSLに変換。ボタン：明度60%。ホバー：55%。アクティブ：50%。

「この色、薄く見える」 彩度が低すぎるかもしれません。HSLで上げてみましょう。

「ブランドカラーに正確に合わせたい」 ブランドガイドラインから16進コードを取得。目視で合わせてはいけません。

「色が違うスクリーンで違って見える」 色のキャリブレーション地獄へようこそ。同じ16進コードを使い、モニターが異なることを受け入れましょう。

アクセシビリティについて

色のコントラストは重要です。明るい背景に明るいテキスト = 多くの人にとって読めません。

比率があります：通常テキストは4.5:1、大きなテキストは3:1。これをチェックするツールが存在します。迷ったら、コントラストが高い方が良いです。

その #3B82F6 の青に白いテキスト？コントラスト比は約4.6:1——ギリギリ合格。本文テキストにはより暗い青の方が安全です。

---

デザイナーである必要はありません。フォーマット間で変換でき、HSLが調整を簡単にすることを知っていればいいだけです。それ以外はすべて詳細です。