カラーフォーマットを理解する：HEX・RGB・HSL とその先へ
この変換ツールでできること
同じ色でも書き方はいくつもあり、このツールは 1 つの色を 6 種類の表記へ同時に置き換えます。HEX・RGB・HSL のいずれかで値を入力するか、ビジュアルなカラーピッカーで選ぶと、対応する HEX・RGB・HSL・HSV・CMYK・LAB の表記がすぐに表示されます。HSL スライダーで色相・彩度・明度を動かせば、ほかの表記もそれに合わせて同時に更新されます。
6 種類の表記は固定の対応表ではなく同じ色から計算されるため、ピッカーやスライダーを動かすたびに全体がリアルタイムで再計算されます。コピーした値は、常に画面上の色見本そのものを表しています。
どの表記をいつ使うか
作業ごとに向いている表記は違います。HEX と RGB は CSS や多くのデザインツールに貼り付ける表記です。HSL は、ある色を少し暗くしたり彩度を落としたりしたいときに扱いやすく、CMYK はデザインを印刷に回す段階で意味を持ちます。LAB は、人の目に等間隔に見える色が必要なときに役立ちます。6 種類を並べて見られるので、別の変換ツールを探さなくても、目の前の作業が求める表記をそのまま取り出せます。これらの値が単独で終わることはめったにありません。rgba() の文字列はCSSシャドウジェネレーターで柔らかい影を作るときにそのまま必要ですし、HEX コード 1 つはメタタグジェネレーターが出力する theme-color タグがブラウザのアドレスバーを染めるのに使われます。
例：#FF5733 を変換する
オレンジの #FF5733 を見てみましょう。RGB では rgb(255, 87, 51)、つまり赤は最大、緑は少し、青はさらに控えめです。HSL ではおよそ hsl(11, 100%, 60%) となり、色相環の赤寄り、彩度は最大、明度は 60% です。印刷向けにはおおよそ cmyk(0%, 66%, 80%, 0%) に対応します。どの表記も同じ色見本を指しており、違う数値で説明しているだけです。各値の横にあるコピーボタンを押せば、そのままコードやデザインファイルに貼り込めます。
表記上の注意と境界ケース
HEX と RGB は同じ情報を持ちます。#FF5733 と rgb(255, 87, 51) は装いが違うだけの同じ色なので、相互変換で失われるものはありません。一方 HSL と HSV は、その情報を人の直感に沿って組み替えるため、色を保存するよりも調整する用途に向いています。CMYK は画面よりも色域が狭い印刷用のモデルなので、値は完全一致ではなく近い近似です。LAB はデバイスに依存せず、知覚的に均等な色空間です。ここに表示される HEX・RGB・HSL の結果は、そのまま CSS に貼り付けられます。