みなみのカラーカタログ
■ ウェブカラー概要 ■
こちらでは、色の要素、パソコンにおける色の表示に関する展示をしています。
| ウェブカラー概要 | カラーコード順 | 色系統別 |
|---|
色の概要 / 基本16色パレット / 216色パレット / Windows 色のダイアログパレット / 色の名前
■ 色の概要 ▲ Top
| RGB値は、光の三原色(右図参照)である
■赤(R)、■緑(G)、■青(B)
の配分を、00〜ffまでの16進数で記述します。
00〜ffは、10進数に直すと0〜255となります。 10進数とは、0から数えて10になると位を上げる数の数え方のことです。 一方、16進数は、0から数えて16になると位を上げる数の数え方です。 10以上はアルファベットで表記します。 このRGB値が大きいと明るい色、小さいと暗い色になります。 ホームページで色を指定する場合、#の後に16進数で赤(R)、緑(G)、青(B)の順で値を記述します。 |
例えば赤の場合は、R値がff(10進数では255)、G値とB値が0なので、"#ff0000"と表記します。
緑（本当はライム）の場合は"#00ff00"、青の場合は"#0000ff"と表記します。
下図は、青(B値)を0〜ff(0〜255)と推移させて、どう色が変わるかを表しています。
値が大きくなる程、青が明るくなっていることが分かると思います。
| 00〜0f | 0〜15 | ||||||||||||||||
| 10〜1f | 16〜31 | ||||||||||||||||
| 20〜2f | 32〜47 | ||||||||||||||||
| 30〜3f | 48〜63 | ||||||||||||||||
| 40〜4f | 64〜79 | ||||||||||||||||
| 50〜5f | 80〜95 | ||||||||||||||||
| 60〜6f | 96〜111 | ||||||||||||||||
| 70〜7f | 112〜127 | ||||||||||||||||
| 80〜8f | 128〜143 | ||||||||||||||||
| 90〜9f | 144〜159 | ||||||||||||||||
| a0〜af | 160〜175 | ||||||||||||||||
| b0〜bf | 176〜191 | ||||||||||||||||
| c0〜cf | 192〜207 | ||||||||||||||||
| d0〜df | 208〜223 | ||||||||||||||||
| e0〜ef | 224〜239 | ||||||||||||||||
| f0〜ff | 240〜255 |
この様に、一原色あたり、00〜ffで 16×16 = 256通りの状態が表せます。
つまり三原色で、256×256×256 = 16,777,216通りの色が表せることになります。
色を表現するものとして、RGB値の他に色相・彩度・明度（HAI値）があります。
色相(H)は、色合いのことで、純色（三原色から生成される色）を表します。
彩度(A)は、色の鮮やかさのことで、最大値が純色、最低値がモノクロ（黒〜灰〜白）を表します。
明度(I)は、色の明るさのことで、最大値が白色、最低値が黒色を表します。
これらの値の組み合わせでも、RGB値と同じ様に様々な色を表現することができます。
HAI値も16進数（10進数：0〜255）で表されることが多いです。
■ 基本16色パレット ▲ Top
下記の16色の名前がHTML4.01で定義されています。
これらの名前は、各種ブラウザで使用することができます。
MSペイントのカラーボックスに用意されている28色の内、左側16色はこの基本16色です。
16進数の上にカーソルを合わせてしばらく待つと、10進数表記のRGB値が現れます。
| #000000 | Black | #800000 | Maroon | #008080 | Teal | ||
| #808080 | Gray | #ff0000 | Red | #00ffff | Aqua | ||
| #c0c0c0 | Silver | #808000 | Olive | #000080 | Navy | ||
| #ffffff | White | #ffff00 | Yellow | #0000ff | Blue | ||
| #008000 | Green | #800080 | Purple | ||||
| #00ff00 | Lime | #ff00ff | Fuchsia |
ちなみに、残りの12色は以下の通りです。
| #808040 | #0080ff | #8000ff |
| #ffff80 | #80ffff | #ff0080 |
| #004040 | #004080 | #804000 |
| #00ff80 | #8080ff | #ff8040 |
■ 216色パレット ▲ Top
ディスプレイが256色モードの時や、画像をgif形式で保存した時に、
微妙な色は下記の216色パレットの中から近いものを選び出して表示されます。
つまり、色が近似されるため、自分が採用した色と異なる色になってしまうことがあります。
なぜ 216色かと言うと、各RGB値を 00(0)、33(51)、66(102)、99(153)、cc(204)、ff(255) の
6通りに限る為、6×6×6 = 216通りの色が表示されると言う訳です。
| #000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
| #003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
| #006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff |
| #009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff |
| #00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff |
| #00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | #00ffff |
| #330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff |
| #333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff |
| #336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff |
| #339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff |
| #33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff |
| #33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff |
| #660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff |
| #663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff |
| #666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff |
| #669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff |
| #66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff |
| #66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff |
| #990000 | #990033 | #990066 | #990099 | #9900cc | #9900ff |
| #993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff |
| #996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff |
| #999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff |
| #99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff |
| #99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff |
| #cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff |
| #cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff |
| #cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff |
| #cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff |
| #cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff |
| #ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff |
| #ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | #ff00ff |
| #ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff |
| #ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff |
| #ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff |
| #ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff |
| #ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | #ffffff |
■ Windows 色のダイアログパレット ▲ Top
MSペイントのメニュー"色"の"色の編集"をクリックすると現れる
ダイアログに用意されているカラーパレットです。
"基本16色パレット"の項で示した28色もこの中に含まれています。
他にも、Windowsアプリケーションソフトで色のダイアログが使われているものもあります。
| #ff8080 | #ffff80 | #80ff80 | #00ff80 | #80ffff | #0080ff | #ff80c0 | #ff80ff |
| #ff0000 | #ffff00 | #80ff00 | #00ff40 | #00ffff | #0080c0 | #8080c0 | #ff00ff |
| #804040 | #ff8040 | #00ff00 | #008080 | #004080 | #8080ff | #800040 | #ff0080 |
| #800000 | #ff8000 | #008000 | #008040 | #0000ff | #0000a0 | #800080 | #8000ff |
| #400000 | #804000 | #004000 | #004040 | #000080 | #000040 | #400040 | #400080 |
| #000000 | #808000 | #808040 | #808080 | #408080 | #c0c0c0 | #400040 | #ffffff |