カラー表記の概要
ウェブデザインと開発では、色はさまざまな方法で表現されます。最も一般的な3つは次のとおりです。
- HEX (HEX):例: '# FF 5733 `
- RGB （赤、緑、青） ：例： `rgb (255, 87, 51 )'
- HSL (色相-彩度-明るさ):例: `hsl (9, 100%, 60%)'
各表記には、独自のシナリオがあります。それらの間の移行を理解することで、デザインをより快適にすることができます。
3つのカラーモデルの詳細な説明
HEX
最も広く使用されているWebカラーフォーマット。'#'で始まり、6桁の16進数（または略して3桁）で始まります。各2桁は、赤、緑、青のチャンネル（ 00 - FF ）の値を表します。
# FF 5733→赤= FF (255 )、緑= 57 (87 )、青= 33 (51)
RGBレッドグリーンブルー
最も直感的なカラーモデルで、赤、緑、青のチャンネルの値を直接指定します（ 0 -255 ）。アルファ透明性チャネルは、`rgba (255, 87, 51, 0.5 )'としてCSSに追加することもできます。
HSL色相-彩度-明るさ
デザイナーに最も親しみやすいカラーモデル：
- 色相： 0〜360 °、カラーホイール上の位置を示します
- 彩度： 0〜100 ％、色純度
- 明るさ： 0〜100 ％、色の明るさと暗さ
HSLの利点は、「同じ色だが明るく」したい場合は、明るさの値を調整するだけでよいということです。
数式の変換
HEX → RGB
R = parseInt (16進数[1.. 2], 16)
G = parseInt (16進数[3.. 4], 16)
B = parseInt (16進数[5.. 6], 16)
RGB → HSL
R '= R/255、G' = G/255、B '= B/255
Cmax = max (R ', G ', B ')
Cmin = min (R ', G ', B ')
Δ = Cmax - Cmin
H = 60° × （状況に応じた数式）
S = Δ /( 1 -| 2 L - 1 |)
L = (Cmax + Cmin)/2
実用的なヒント
- CSS変数: HSLを使用してテーマの色を定義し、明るさ値を調整してバリアントを簡単に生成します
- デザインシステム： HSLを使用して色相を均一に管理し、色相を変更してスキンをグローバルに変更します
- アクセシビリティ：明るさの値で前景と背景の色のコントラストを決定する
- グラデーションカラー： HSLはより自然なグラデーショントランジションを作成できます
カラートランスコーディングは基本的なもののようですが、実際の開発では毎日使えるスキルです。