Web216カラーパレット

Web安全カラー216色 — クリックでコピー

#336699

パレットの使い方

  1. 一覧を眺める。216色すべてが並んでいるので、1色ずつではなく全体を見比べながら選べます。
  2. 色をクリックする。選んだ色が上部に表示され、HEXコードも一緒に確認できます。
  3. コードをコピーする。そのままCSSやデザインファイルに貼り付けて使えます。

このツールでできること

「Webセーフカラー」と呼ばれる216色を一覧できるカラーチャートです。全色が一度に表示され、クリックすればHEXコードが手に入ります。何百万色の中から選ぶ通常のカラーピッカーとは違い、決まった色数の中から手早く選びたいときに向いています。

処理はすべてブラウザ内で完結します。インストールも会員登録も不要です。

Webセーフカラーは今も必要?

このパレットは1990年代に生まれました。当時のモニターは同時に256色までしか表示できないものが多く、その範囲から外れた色は近い色で置き換えられて、ざらついた見た目になったり、機種によって違って見えたりしました。WindowsでもMacでも同じように表示できる色として選ばれたのが、ここにある216色です。だから当時のデザイナーは、結果を予測できるようにこの範囲に収めていました。

今のディスプレイは何百万色も表示できるので、当時の技術的な理由はすでになくなっています。互換性のためにこのパレットに縛られる必要はありません。それでも使われる理由は別にあります。ひとつは、当時の雰囲気を再現したいとき、この色使いがいちばん手っ取り早いこと。もうひとつは制約の効果で、1600万色から選ぶより216色から選ぶほうが、配色にまとまりが出やすいという面があります。値も 00・33・66・99・CC・FF の組み合わせだけなので覚えやすいです。ただし普段の制作では、カラーピッカーで自由に選ぶほうが適しています。

よくある質問

今もWebセーフカラーを使う必要がありますか?

ありません。現在のディスプレイはこのパレットが想定していたよりはるかに多くの色を表示できるため、互換性のために色を制限する理由はなくなっています。

なぜちょうど216色なのですか?

赤・緑・青がそれぞれ6段階の値を取るため、6の3乗で216色になります。256色のうち残りの枠はOSが使うために確保されていたので、256色ぴったりにはなりませんでした。

HEXコードが似た並びばかりなのはなぜ?

各色の値が 00・33・66・99・CC・FF の6つに限られているためです。すべてのWebセーフカラーがこの組み合わせでできているので、#336699 のようなコードが見覚えのある形になります。

今このパレットが役立つのはどんなときですか?

レトロな雰囲気のデザインや、あえて色数を絞って配色したいときです。一般的な制作では、通常のカラーピッカーで自由に選ぶことをおすすめします。