無料Webセーフカラー対照表

216色の固定パレットを一覧

このページでは、赤・緑・青（RGB）の各チャンネルに6段階の値を使って作る、伝統的なWebセーフカラー216色を見比べられます。各色には色見本とHEX、RGBの値が表示されます。色名の一覧ではなく、決まった色コードを探してコピーするための対照表です。

各チャンネルのHEX値は 00、33、66、99、CC、FF のいずれかです。3チャンネルの組み合わせなので、6 × 6 × 6 = 216 色になります。たとえば #3366CC は赤が 33（51）、緑が 66（102）、青が CC（204）で、RGB表記では rgb(51, 102, 204) です。

HEXとRGBを読み分ける

HEXの #RRGGBB は、赤・緑・青の順に各2桁の16進数で成分を示します。RGB表記は同じ3成分を10進数で示し、各値は0から255です。色表の色はどちらの表記でも同じ色を指します。表示形式を切り替えると、色ブロックを押したときにコピーされる値も切り替わります。

この216色はRGBの全組み合わせを収録したものではありません。CSSではHEXやRGBを含む複数の色表記が定義されています。W3CのCSS Color仕様を参照し、現在の色指定全体とこの伝統的な色表を区別してください。

色を絞り込み、使う形式でコピー

1. 検索欄にHEXコードまたはRGB表記の一部を入力します。大文字・小文字は区別されず、文字列を含む色が表示されます。たとえば ff00 や 153 のような一部の文字でも絞り込めます。

2. 表示形式でHEXまたはRGBを選びます。色見本には両方の値が表示され、選んだ形式がコピー対象になります。

3. 候補の色ブロックを押して値をコピーし、CSSやデザインメモに貼り付けます。コピーできない場合は、ブロック内に表示されている値を選択して手動で控えてください。

4. 検索欄を空にすると216色の一覧に戻ります。一致する色がないときは、別の部分文字列を試すか、検索を消してください。

例として #3366CC を探すなら、3366 などを入力します。HEX表示で押すと #3366CC、RGB表示で押すと rgb(51, 102, 204) がコピーされます。

検索とコピーについて

色見本の用途と限界

「Webセーフカラー」は歴史的な216色パレットの呼び名です。現在のブラウザーやディスプレイで同じ見た目になること、色がアクセシビリティ基準に適合すること、ブランドや印刷の要件を満たすことを保証する意味ではありません。画面上の色の見え方は表示機器や設定などで変わるため、最終的な配色は利用先で確認してください。

この対照表は固定された216色を表示するもので、CSSの色名一覧、全色のカラーピッカー、任意色からの変換や近似色検索ではありません。文字と背景のコントラスト確認も行いません。アクセシビリティ確認が必要な場合は、実際に使う文字色と背景色の組み合わせを対象に別途評価してください。