palette カラーコード変換ツール star

仕組み

この3つの表記法はすべて、まったく同じ色を表しています — 単に、画面がその色を作るために混ぜる赤・緑・青の光の量を異なる方法で符号化しているだけです。RGBは各チャンネルを0から255までの10進数として保存します。HEXは、そのRGBを16進数で書いたものにすぎません。各チャンネルは2桁の16進数のペアになるため、rgb(255, 128, 0)は#ff8000になります(ff = 255、80 = 128、00 = 0)。この変換では色の情報は一切失われず、追加もされません — 純粋な表記の違いです。

HSLは違います。色相・彩度・明度という3つの知覚軸に沿って色を再定義したもので、RGBチャンネルから数学的に導き出されます。色相(0〜360°)はカラーホイール上の角度で、どのチャンネルが最大か、チャンネル間の差がどれだけかから計算されます。#ff8000の場合、赤が最大(255)、青が最小(0)であり、60 × ((緑 − 青) / (最大 − 最小)) という式は60 × (128/255) ≈ 30° となり、オレンジの帯域に位置します。明度は最も大きいチャンネルと最も小さいチャンネルの平均です — ここでは(255 + 0) / 2 ≈ 50%です。彩度は、その明度においてグレーからどれだけ離れているかを測るもので、ここでは100%です。1つのチャンネルが最大強度、もう1つが0だからです。まとめるとhsl(30, 100%, 50%)と表され、#ff8000とまったく同じオレンジを、別の方法で記述したものになります。

これこそ、デザイナーがRGBよりもHSLを好む理由です。色相を保ったまま色を20%暗くしたい場合、HSLでは明度の値を下げるだけで済みますが、RGBでは3つのチャンネルすべてを比例的に再計算する必要があります。カラーピッカーで色を選ぶか、任意のHEXコードを入力すれば、このツールは両方の表記に瞬時に変換します。

知っておくべきこと

3桁の短縮HEX(#f80)や、アルファチャンネルを持つ4桁・8桁の形式(#ff8000cc、rgba(255,128,0,0.8))もよく使われる形式ですが、このツールは標準的な6桁の不透明HEXと、それに対応するRGB/HSLを扱います。orangeのような色名はCSS仕様で定められた固定のHEX値に対応していますが、すべての色名が覚えやすいHEXコードを持つわけではありません。これも開発者が両者を行き来して変換する理由の1つです。あるモニターでは同一に見える2色が、別のモニターではわずかに異なって表示されることがあります。これは、一般的なディスプレイが色域やキャリブレーションにおいて異なるためで、HEX/RGB/HSLの値は正確な数値であっても、それが生み出す光がすべての画面で同一になる保証はありません。テキストと背景の色を選ぶ際は、HSLの明度の値が知覚的なコントラストと同じではないことに注意してください — 彩度の高い黄色と彩度の高い青は同じL値を持ちながら、白の背景に対してはまったく異なって見えることがあります。そのため、アクセシビリティのチェックにはL値だけでなく、適切なコントラスト比の計算を用いるべきです。

CSSはrgb(100%, 50%, 0%)のようなパーセンテージベースのRGBも受け付け、これはrgb(255, 128, 0)と完全に等価です — 色を0〜255の整数ではなくパーセンテージで表すデザインツールを扱う際に便利です。oklch()やlab()といった新しいCSSのカラー関数は、HSLよりさらに一歩進んでいます。これらは知覚的に均一になるよう設計されており、明度における等しい数値の変化がすべての色相にわたって人の目に等しく異なって見えることを意味しますが、これは通常のHSLでは完全には保証されません。とはいえ、日常のWeb・UI制作においては、HEX、RGB、HSLは今なお、ほぼすべてのコードベース、スタイルガイド、デザインツールで出会う3つの基本形式です。