HEXコード（16進数カラーコード）の読み方
HEXコードは一見すると暗号のようですが、実際は3つの数値を並べただけのものです。たとえば #FF5733 は、先頭の # を除くと FF・57・33 の3つのペアに分かれます。最初のペアが赤（R）、次が緑（G）、最後が青（B）の強さを表しています。各ペアは0〜9とA〜Fを使う16進数（base-16）で書かれており、FF が最大、00 が最小です。
ペアの最大値が FF なので、これはRGBの0〜255にそのまま対応します。FF が255、00 が0、80 がおよそ中間です。つまり #FF5733 は「赤が強く、緑が中くらい、青は少し」という色で、結果として暖かみのある朱色に見えます。HEXを「3本のスライダーの別表記」と捉えると、コードを貼る前におおよその色を頭の中で想像できるようになります。
HEX・RGB・HSL・HSV・CMYKの使い分け
これらはすべて同じ色を別の角度から表したものです。大切なのは、いま行いたい調整を一番ラクにできる形式を選ぶことです。
- HEXとRGBは中身が同じです。CSSやデザインツールに貼りやすい短いコードが欲しいときはHEX、赤・緑・青の各チャンネルを手で微調整したいときはRGBが便利です。
- HSL（色相・彩度・輝度）は調整が直感的です。「同じ色のまま明るくしたい」なら輝度（L）を上げ、「くすませたい」なら彩度（S）を下げるだけ。色味を保ったまま雰囲気を変えられます。
- HSV / HSB（色相・彩度・明度）は多くのカラーピッカーが内部で使う形式で、目で見ながら色を追い込むときに感覚と合いやすいモデルです。
- CMYKは印刷の言葉で、シアン・マゼンタ・イエロー・黒インクの割合を表します。ここでのCMYK値はあくまで目安です。実際の印刷色は紙やICCプロファイルに左右され、ブラウザ側ではそれを再現できません。
色を損なわずに形式を変換するには
まず安心できる点として、HEXとRGBは完全に等価です。どちらも各チャンネルを0〜255の整数で保持するため、相互に何度変換しても色がずれることはありません。
HSLとHSVも日常用途では可逆ですが、計算上の小数を度数や%の整数に丸めるため、わずかな誤差が出ることがあります。注意が必要なのはCMYKです。インクで表現できる範囲は画面が光らせられる範囲より狭いため、RGB→CMYK→RGBと往復すると色が少し変わることがあります。Web用途では、HEXまたはRGBを「正」として持っておけば色を失う心配はありません。
CSSにそのまま貼り込む
各値にはコピーボタンが付いており、一部はそのまま貼れるCSS表記も用意しています。HEXもRGBも、color・background・border などのプロパティに手直しなしで使えます。
おすすめの習慣として、ブランドカラーはCSSのカスタムプロパティ（変数）にしておくと便利です。スタイルシートの先頭に --brand: #FF5733; のように定義し、各所で var(--brand) を参照します。あとから1行変えるだけでサイト全体の色が更新されます。本ツールは、その変数に入れる正確なコードを好きな形式で取得する手段としても役立ちます。
同じコードでも画面によって色が違って見える理由
HEXコードは「指示」であって「保証」ではありません。モニターの種類、明るさ、部屋の照明、キャリブレーションの有無によって、その指示が目にどう届くかは変わります。別々のノートPCで #FF5733 を見た2人が、少し違う朱色を見ていることは実際にあり得ます。
だからこそ、重要な色は複数の端末で確認し、可読性が問われる箇所は感覚ではなくコントラスト比でチェックするのが安全です。数値は正確でも、見え方には少し幅がある——そう意識して設計すると失敗が減ります。