ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

ウェブデザイン必携ハンドブック 216 ウェブセーフカラー
Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色を使用していても、閲覧時に各人が感じる効果が異なっていると、色合わせのコンセプトは閲覧者にうまく伝わりません。 Web ページのカラー マッチングに 216 色の​​ Web セーフ カラーを使用すると、色の歪みの問題を回避できます。

Web セーフ カラーとは、さまざまなハードウェア環境、さまざまなオペレーティング システム、さまざまなブラウザーで正常に表示できるカラー セット (パレットまたはカラー スペクトル) を指します。つまり、これらのカラーは、どのエンド ユーザーのディスプレイ デバイスでも同じ効果を発揮します。
>

Webセーフカラーとは、赤、緑、青のデジタル信号値(DACカウント)が0、51、102、153、204、255のときに形成される色の組み合わせです。合計6×6×6=216色(うち210色がカラー、6色が非カラー)あります。

216 の Web セーフ カラーは、高精度のグラデーション効果が必要な場合や、トゥルー カラーの画像や写真を表示する場合には不十分な場合がありますが、ロゴや 2 次元のグラフィック効果を表示する場合には十分すぎるほどです。しかし、多くのサイトでは、斬新でユニークなデザインスタイルを実現するために、他の非ウェブセーフカラーを使用していることもわかります。そのため、意図的に 216 色の​​ウェブセーフカラーに限定した色の使用を追求する必要はなく、セーフカラーと非セーフカラーの使用をより適切に一致させる必要があります。

216 ウェブセーフカラーのリスト

 

HTML #000000 RGB 0 0 0

 

HTML #000033 RGB 0 0 51

 

HTML #000066 RGB 0 0 102

 

HTML #000099 RGB 0 0 153

 

HTML #0000CC RGB 0 0 204

 

HTML #0000FF RGB 0 0 255

 

HTML #003300 RGB 0 51 0

 

HTML #003333 RGB 0 51 51

 

HTML #003366 RGB 0 51 102

 

HTML #003399 RGB 0 51 153

 

HTML #0033CC RGB 0 51 204

 

HTML #0033FF RGB 0 51 255

 

HTML #006600 RGB 0 102 0

 

HTML #006633 RGB 0 102 51

 

HTML #006666 RGB 0 102 102

 

HTML #006699 RGB 0 102 153

 

HTML #0066CC RGB 0 102 204

 

HTML #0066FF RGB 0 102 255

 

HTML #009900 RGB 0 153 0

 

HTML #009933 RGB 0 153 51

 

HTML #009966 RGB 0 153 102

 

HTML #009999 RGB 0 153 153

 

HTML #0099CC RGB 0 153 204

 

HTML #0099FF RGB 0 153 255

 

HTML #00CC00 RGB 0 204 0

 

HTML #00CC33 RGB 0 204 51

 

HTML #00CC66 RGB 0 204 102

 

HTML #00CC99 RGB 0 204 153

 

HTML #00CCCC RGB 0 204 204

 

HTML #00CCFF RGB 0 204 255

 

HTML #00FF00 RGB 0 255 0

 

HTML #00FF33 RGB 0 255 51

 

HTML #00FF66 RGB 0 255 102

 

HTML #00FF99 RGB 0 255 153

 

HTML #00FFCC RGB 0 255 204

 

HTML #00FFFF RGB 0 255 255

 

HTML #330000 RGB 51 0 0

 

HTML #330033 RGB 51 0 51

 

HTML #330066 RGB 51 0 102

 

HTML #330099 RGB 51 0 153

 

HTML #3300CC RGB 51 0 204

 

HTML #3300FF RGB 51 0 255

 

HTML #333300 RGB 51 51 0

 

HTML #333333 RGB 51 51 51

 

HTML #333366 RGB 51 51 102

 

HTML #333399 RGB 51 51 153

 

HTML #3333CC RGB 51 51 204

 

HTML #3333FF RGB 51 51 255

 

HTML #336600 RGB 51 102 0

 

HTML #336633 RGB 51 102 51

 

HTML #336666 RGB 51 102 102

 

HTML #336699 RGB 51 102 153

 

HTML #3366CC RGB 51 102 204

 

HTML #3366FF RGB 51 102 255

 

HTML #339900 RGB 51 153 0

 

HTML #339933 RGB 51 153 51

 

HTML #339966 RGB 51 153 102

 

HTML #339999 RGB 51 153 153

 

HTML #3399CC RGB 51 153 204

 

HTML #3399FF RGB 51 153 255

 

HTML #33CC00 RGB 51 204 0

 

HTML #33CC33 RGB 51 204 51

 

HTML #33CC66 RGB 51 204 102

 

HTML #33CC99 RGB 51 204 153

 

HTML #33CCCC RGB 51 204 204

 

HTML #33CCFF RGB 51 204 255

 

HTML #33FF00 RGB 51 255 0

 

HTML #33FF33 RGB 51 255 51

 

HTML #33FF66 RGB 51 255 102

 

HTML #33FF99 RGB 51 255 153

 

HTML #33FFCC RGB 51 255 204

 

HTML #33FFFF RGB 51 255 255

 

HTML #660000 RGB 102 0 0

 

HTML #660033 RGB 102 0 51

 

HTML #660066 RGB 102 0 102

 

HTML #660099 RGB 102 0 153

 

HTML #6600CC RGB 102 0 204

 

HTML #6600FF RGB 102 0 255

 

HTML #663300 RGB 102 51 0

 

HTML #663333 RGB 102 51 51

 

HTML #663366 RGB 102 51 102

 

HTML #663399 RGB 102 51 153

 

HTML #6633CC RGB 102 51 204

 

HTML #6633FF RGB 102 51 255

 

HTML #666600 RGB 102 102 0

 

HTML #666633 RGB 102 102 51

 

HTML #666666 RGB 102 102 102

 

HTML #666699 RGB 102 102 153

 

HTML #6666CC RGB 102 102 204

 

HTML #6666FF RGB 102 102 255

 

HTML #669900 RGB 102 153 0

 

HTML #669933 RGB 102 153 51

 

HTML #669966 RGB 102 153 102

 

HTML #669999 RGB 102 153 153

 

HTML #6699CC RGB 102 153 204

 

HTML #6699FF RGB 102 153 255

 

HTML #66CC00 RGB 102 204 0

 

HTML #66CC33 RGB 102 204 51

 

HTML #66CC66 RGB 102 204 102

 

HTML #66CC99 RGB 102 204 153

 

HTML #66CCCC RGB 102 204 204

 

HTML #66CCFF RGB 102 204 255

 

HTML #66FF00 RGB 102 255 0

 

HTML #66FF33 RGB 102 255 51

 

HTML #66FF66 RGB 102 255 102

 

HTML #66FF99 RGB 102 255 153

 

HTML #66FFCC RGB 102 255 204

 

HTML #66FFFF RGB 102 255 255

 

HTML #990000 RGB 153 0 0

 

HTML #990033 RGB 153 0 51

 

HTML #990066 RGB 153 0 102

 

HTML #990099 RGB 153 0 153

 

HTML #9900CC RGB 153 0 204

 

HTML #9900FF RGB 153 0 255

 

HTML #993300 RGB 153 51 0

 

HTML #993333 RGB 153 51 51

 

HTML #993366 RGB 153 51 102

 

HTML #993399 RGB 153 51 153

 

HTML #9933CC RGB 153 51 204

 

HTML #9933FF RGB 153 51 255

 

HTML #996600 RGB 153 102 0

 

HTML #996633 RGB 153 102 51

 

HTML #996666 RGB 153 102 102

 

HTML #996699 RGB 153 102 153

 

HTML #9966CC RGB 153 102 204

 

HTML #9966FF RGB 153 102 255

 

HTML #999900 RGB 153 153 0

 

HTML #999933 RGB 153 153 51

 

HTML #999966 RGB 153 153 102

 

HTML #999999 RGB 153 153 153

 

HTML #9999CC RGB 153 153 204

 

HTML #9999FF RGB 153 153 255

 

HTML #99CC00 RGB 153 204 0

 

HTML #99CC33 RGB 153 204 51

 

HTML #99CC66 RGB 153 204 102

 

HTML #99CC99 RGB 153 204 153

 

HTML #99CCCC RGB 153 204 204

 

HTML #99CCFF RGB 153 204 255

 

HTML #99FF00 RGB 153 255 0

 

HTML #99FF33 RGB 153 255 51

 

HTML #99FF66 RGB 153 255 102

 

HTML #99FF99 RGB 153 255 153

 

HTML #99FFCC RGB 153 255 204

 

HTML #99FFFF RGB 153 255 255

 

HTML #CC0000 RGB 204 0 0

 

HTML #CC0033 RGB 204 0 51

 

HTML #CC0066 RGB 204 0 102

 

HTML #CC0099 RGB 204 0 153

 

HTML #CC00CC RGB 204 0 204

 

HTML #CC00FF RGB 204 0 255

 

HTML #CC3300 RGB 204 51 0

 

HTML #CC3333 RGB 204 51 51

 

HTML #CC3366 RGB 204 51 102

 

HTML #CC3399 RGB 204 51 153

 

HTML #CC33CC RGB 204 51 204

 

HTML #CC33FF RGB 204 51 255

 

HTML #CC6600 RGB 204 102 0

 

HTML #CC6633 RGB 204 102 51

 

HTML #CC6666 RGB 204 102 102

 

HTML #CC6699 RGB 204 102 153

 

HTML #CC66CC RGB 204 102 204

 

HTML #CC66FF RGB 204 102 255

 

HTML #CC9900 RGB 204 153 0

 

HTML #CC9933 RGB 204 153 51

 

HTML #CC9966 RGB 204 153 102

 

HTML #CC9999 RGB 204 153 153

 

HTML #CC99CC RGB 204 153 204

 

HTML #CC99FF RGB 204 153 255

 

HTML #CCCC00 RGB 204 204 0

 

HTML #CCCC33 RGB 204 204 51

 

HTML #CCCC66 RGB 204 204 102

 

HTML #CCCC99 RGB 204 204 153

 

HTML #CCCCCC RGB 204 204 204

 

HTML #CCCCFF RGB 204 204 255

 

HTML #CCFF00 RGB 204 255 0

 

HTML #CCFF33 RGB 204 255 51

 

HTML #CCFF66 RGB 204 255 102

 

HTML #CCFF99 RGB 204 255 153

 

HTML #CCFFCC RGB 204 255 204

 

HTML #CCFFFF RGB 204 255 255

 

HTML #FF0000 RGB 255 0 0

 

HTML #FF0033 RGB 255 0 51

 

HTML #FF0066 RGB 255 0 102

 

HTML #FF0099 RGB 255 0 153

 

HTML #FF00CC RGB 255 0 204

 

HTML #FF00FF RGB 255 0 255

 

HTML #FF3300 RGB 255 51 0

 

HTML #FF3333 RGB 255 51 51

 

HTML #FF3366 RGB 255 51 102

 

HTML #FF3399 RGB 255 51 153

 

HTML #FF33CC RGB 255 51 204

 

HTML #FF33FF RGB 255 51 255

 

HTML #FF6600 RGB 255 102 0

 

HTML #FF6633 RGB 255 102 51

 

HTML #FF6666 RGB 255 102 102

 

HTML #FF6699 RGB 255 102 153

 

HTML #FF66CC RGB 255 102 204

 

HTML #FF66FF RGB 255 102 255

 

HTML #FF9900 RGB 255 153 0

 

HTML #FF9933 RGB 255 153 51

 

HTML #FF9966 RGB 255 153 102

 

HTML #FF9999 RGB 255 153 153

 

HTML #FF99CC RGB 255 153 204

 

HTML #FF99FF RGB 255 153 255

 

HTML #FFCC00 RGB 255 204 0

 

HTML #FFCC33 RGB 255 204 51

 

HTML #FFCC66 RGB 255 204 102

 

HTML #FFCC99 RGB 255 204 153

 

HTML #FFCCCC RGB 255 204 204

 

HTML #FFCCFF RGB 255 204 255

 

HTML #FFFF00 RGB 255 255 0

 

HTML #FFFF33 RGB 255 255 51

 

HTML #FFFF66 RGB 255 255 102

 

HTML #FFFF99 RGB 255 255 153

 

HTML #FFFFCC RGB 255 255 204

 

HTML #FFFFFF RGB 255 255 255

216色のWebセーフカラーは、コンピュータ機器の現状を踏まえ、数え切れないほどの分析と実証を重ねた結果生まれたもので、Webデザイナーにとって必須の常識であり、より安全で優れたWebカラースキームを展開するために活用できます。

<<:  背景画像にテキストを表示するためのCSS

>>:  Node.js のイベント モジュールに関する知識ポイントのまとめ

推薦する

docker-compose ネットワーク設定についての簡単な説明

ネットワーク使用チュートリアル公式サイト docker-compose.yml リファレンスドキュメ...

js の getBoundingClientRect() メソッドの詳細な説明

1. getBoundingClientRect() 分析getBoundingClientRect...

HTML5+CSS3コーディング標準

黄金律プロジェクトに何人の人が取り組んでいるかに関係なく、すべてのコード行が同じ人によって書かれたよ...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...

C# は MySQL コマンドラインのバックアップとリカバリを実装します

MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...

Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

目次序文一目でわかる建築オペレーティングシステムとの対話シングルスレッドイベント駆動/イベントループ...

HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...

JavaScriptはオブジェクトの不要なプロパティを削除します

目次例方法1: 削除方法2: 分解補充する要約するThinking シリーズは、10 分で実用的なプ...

CSS スタイルを使用して表のフォントを垂直中央に配置する方法

CSS スタイルを使用して表内のフォントを垂直方向に中央揃えする方法は次のとおりです。下図のようなカ...

MySQL エラー 1290 (HY000) の解決方法

私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...

JavaScript の構成と継承の説明

目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...

ウェブページのメモリとCPU使用量を削減する方法

<br />Web ページによっては、サイズは大きくないように見えても開くのに非常に時間...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

初心者がHTMLタグを学ぶ(2)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...