カラーチャートのソースを表示

{{Redirect|カラーマップ、カラーパレット|画像データ|インデックスカラー}}

{{色}}

'''カラーチャート'''とは、「[[色]]」の「表」、つまり色見本を配列した表である。

== ウェブ上のカラーチャート ==
[[ウェブページ]]では色を使う場合、上手に色を用いれば大変読みやすく見栄えもよくなるが、色遣いがまずければ、かえって読みにくくなり見栄えも悪くなる。

また、色を表示できない環境もあり、また同じ色でも、[[ディスプレイ (コンピュータ)|ディスプレイ]]によって濃く表示されたり薄く表示されたりするため、色が自分の見ているとおりに表示されない環境でも読めるような配慮が必要である。

=== 基本16色 ===
'''基本16色'''または'''標準16色''' (Basic 16 Colors) とは、[[HyperText Markup Language|HTML]]において「[[色名]]」で指定して表示が可能な16種類の[[色]]である。
* '''上段'''：指定した'''色名'''または'''RGB値'''（16進表記）
* '''下段'''：上段の文字列で指定した'''色の表示部'''
<!-- 色の表示部に使用した全角スペースを明示するためにHTMLタグを使用しています。色の表示部の全角スペースを半角スペースに変更または削除すると正しく表示されなくなるので注意してください。-->
{| class="wikitable" style="text-align: center;"
|-
| colspan="4"| [[HyperText Markup Language#HTML 4.0、HTML 4.01|HTML4.0]]のcolor属性で指定可能な'''16色'''

|-
|  Red || Maroon || Fuchsia  || Purple

|-
| title="Red" style="background-color: Red; width: 25%;"|　
| title="Maroon" style="background-color: Maroon; width: 25%;"|　
| title="Fuchsia" style="background-color: Fuchsia; width: 25%;"|　
| title="Purple" style="background-color: Purple; width: 25%;"|　

|-
| #FF0000 || #800000 || #FF00FF || #800080

|-
| title="#FF0000" style="background-color: #FF0000; width: 25%;"|　
| title="#800000" style="background-color: #800000; width: 25%;"|　
| title="#FF00FF" style="background-color: #FF00FF; width: 25%;"|　
| title="#800080" style="background-color: #800080; width: 25%;"|　

|-
|  Lime || Green || Yellow || Olive 

|-
| title="Lime" style="background-color: Lime; width: 25%;"|　　
| title="Green" style="background-color: Green; width: 25%;"|　
| title="Yellow" style="background-color: Yellow; width: 25%;"|　
| title="Olive" style="background-color: Olive; width: 25%;"|

|-
|  #00FF00 || #008000 || #FFFF00 || #808000

|-
| title="#00FF00" style="background-color: #00FF00; width: 25%;"|
| title="#008000" style="background-color: #008000; width: 25%;"|　
| title="#FFFF00" style="background-color: #FFFF00; width: 25%;"|　
| title="#808000" style="background-color: #808000; width: 25%;"|　

|-
| Blue || Navy || Aqua || Teal

|-
| title="Blue" style="background-color: Blue; width: 25%;"|　
| title="Navy" style="background-color: Navy; width: 25%;"|　
| title="Aqua" style="background-color: Aqua; width: 25%;"|　
| title="Teal" style="background-color: Teal; width: 25%;"|　

|-
|  #0000FF || #000080 || #00FFFF || #008080

|-
| title="#0000FF" style="background-color: #0000FF; width: 25%;"|　
| title="#000080" style="background-color: #000080; width: 25%;"|　
| title="#00FFFF" style="background-color: #00FFFF; width: 25%;"|　
| title="#008080" style="background-color: #008080; width: 25%;"|　

|-
| White || Silver || Gray || Black

|-
| title="White" style="background-color: White; width: 25%;"|　
| title="Silver" style="background-color: Silver; width: 25%;"|　
| title="Gray" style="background-color: Gray; width: 25%;"|　
| title="Black" style="background-color: Black; width: 25%;"|　

|-
|  #FFFFFF || #C0C0C0 || #808080 || #000000

|-
| title="#FFFFFF" style="background-color: #FFFFFF; width: 25%;"|　
| title="#C0C0C0" style="background-color: #C0C0C0; width: 25%;"|　
| title="#808080" style="background-color: #808080; width: 25%;"|　
| title="#000000" style="background-color: #000000; width: 25%;"|　

|}

=== ウェブセーフカラー ===
'''ウェブセーフカラー''' (Web Safe Color、Webセーフカラー) は、ウェブ上の色を[[RGB]]値の[[三原色]]をそれぞれ6段階に分割し、"00", "33", "66", "99", "cc", "ff" の6種類のみを組み合わせた216色のことである。閲覧環境に左右されることが'''少ない'''ため「セーフ」と付く。8bitカラー（=256色）環境、24bitカラー（=16777216色）環境では共通した色が出るものの、16bitカラー（=65536色）環境では"00", "ff"のみで組み合わせた8色以外は一致しない<ref>[http://web.archive.org/web/20001209082300/http://www.hotwired.co.jp/webmonkey/2000/39/index2a.html ウェブセーフカラー・パレットは死んだのか？]
</ref>。さらにモニターやビデオカードの性能によってもWebセーフカラーでも表示される色は異なる。16bitカラー以上を表示可能なモニタが広く普及している21世紀初頭現在ではあまり意味のないものとなっている。

{| cellpadding="2" style="background:#fff; text-align:center;"
|+ Web safe colorを16進数のRGB値で表現したマトリックス
|- style="color:#fff;"
| style="background-color:#000000;" | #000000
| style="background-color:#000033;" | #000033
| style="background-color:#000066;" | #000066
| style="background-color:#000099;" | #000099
| style="background-color:#0000cc;" | #0000cc
| style="background-color:#0000ff;" | #0000ff
|- style="color:#fff;"
| style="background-color:#003300;" | #003300
| style="background-color:#003333;" | #003333
| style="background-color:#003366;" | #003366
| style="background-color:#003399;" | #003399
| style="background-color:#0033cc;" | #0033cc
| style="background-color:#0033ff;" | #0033ff
|- style="color:#fff;"
| style="background-color:#006600;" | #006600
| style="background-color:#006633;" | #006633
| style="background-color:#006666;" | #006666
| style="background-color:#006699;" | #006699
| style="background-color:#0066cc;" | #0066cc
| style="background-color:#0066ff;" | #0066ff
|-
| style="background-color:#009900;" | #009900
| style="background-color:#009933;" | #009933
| style="background-color:#009966;" | #009966
| style="background-color:#009999;" | #009999
| style="background-color:#0099cc;" | #0099cc
| style="background-color:#0099ff;" | #0099ff
|-
| style="background-color:#00cc00;" | #00cc00
| style="background-color:#00cc33;" | #00cc33
| style="background-color:#00cc66;" | #00cc66
| style="background-color:#00cc99;" | #00cc99
| style="background-color:#00cccc;" | #00cccc
| style="background-color:#00ccff;" | #00ccff
|-
| style="background-color:#00ff00;" | #00ff00
| style="background-color:#00ff33;" | #00ff33
| style="background-color:#00ff66;" | #00ff66
| style="background-color:#00ff99;" | #00ff99
| style="background-color:#00ffcc;" | #00ffcc
| style="background-color:#00ffff;" | #00ffff
|- style="color:#fff;"
| style="background-color:#330000;" | #330000
| style="background-color:#330033;" | #330033
| style="background-color:#330066;" | #330066
| style="background-color:#330099;" | #330099
| style="background-color:#3300cc;" | #3300cc
| style="background-color:#3300ff;" | #3300ff
|- style="color:#fff;"
| style="background-color:#333300;" | #333300
| style="background-color:#333333;" | #333333
| style="background-color:#333366;" | #333366
| style="background-color:#333399;" | #333399
| style="background-color:#3333cc;" | #3333cc
| style="background-color:#3333ff;" | #3333ff
|- style="color:#fff;"
| style="background-color:#336600;" | #336600
| style="background-color:#336633;" | #336633
| style="background-color:#336666;" | #336666
| style="background-color:#336699;" | #336699
| style="background-color:#3366cc;" | #3366cc
| style="background-color:#3366ff;" | #3366ff
|-
| style="background-color:#339900;" | #339900
| style="background-color:#339933;" | #339933
| style="background-color:#339966;" | #339966
| style="background-color:#339999;" | #339999
| style="background-color:#3399cc;" | #3399cc
| style="background-color:#3399ff;" | #3399ff
|-
| style="background-color:#33cc00;" | #33cc00
| style="background-color:#33cc33;" | #33cc33
| style="background-color:#33cc66;" | #33cc66
| style="background-color:#33cc99;" | #33cc99
| style="background-color:#33cccc;" | #33cccc
| style="background-color:#33ccff;" | #33ccff
|-
| style="background-color:#33ff00;" | #33ff00
| style="background-color:#33ff33;" | #33ff33
| style="background-color:#33ff66;" | #33ff66
| style="background-color:#33ff99;" | #33ff99
| style="background-color:#33ffcc;" | #33ffcc
| style="background-color:#33ffff;" | #33ffff
|- style="color:#fff;"
| style="background-color:#660000;" | #660000
| style="background-color:#660033;" | #660033
| style="background-color:#660066;" | #660066
| style="background-color:#660099;" | #660099
| style="background-color:#6600cc;" | #6600cc
| style="background-color:#6600ff;" | #6600ff
|- style="color:#fff;"
| style="background-color:#663300;" | #663300
| style="background-color:#663333;" | #663333
| style="background-color:#663366;" | #663366
| style="background-color:#663399;" | #663399
| style="background-color:#6633cc;" | #6633cc
| style="background-color:#6633ff;" | #6633ff
|- style="color:#fff;"
| style="background-color:#666600;" | #666600
| style="background-color:#666633;" | #666633
| style="background-color:#666666;" | #666666
| style="background-color:#666699;" | #666699
| style="background-color:#6666cc;" | #6666cc
| style="background-color:#6666ff;" | #6666ff
|-
| style="background-color:#669900;" | #669900
| style="background-color:#669933;" | #669933
| style="background-color:#669966;" | #669966
| style="background-color:#669999;" | #669999
| style="background-color:#6699cc;" | #6699cc
| style="background-color:#6699ff;" | #6699ff
|-
| style="background-color:#66cc00;" | #66cc00
| style="background-color:#66cc33;" | #66cc33
| style="background-color:#66cc66;" | #66cc66
| style="background-color:#66cc99;" | #66cc99
| style="background-color:#66cccc;" | #66cccc
| style="background-color:#66ccff;" | #66ccff
|-
| style="background-color:#66ff00;" | #66ff00
| style="background-color:#66ff33;" | #66ff33
| style="background-color:#66ff66;" | #66ff66
| style="background-color:#66ff99;" | #66ff99
| style="background-color:#66ffcc;" | #66ffcc
| style="background-color:#66ffff;" | #66ffff
|- style="color:#fff;"
| style="background-color:#990000;" | #990000
| style="background-color:#990033;" | #990033
| style="background-color:#990066;" | #990066
| style="background-color:#990099;" | #990099
| style="background-color:#9900cc;" | #9900cc
| style="background-color:#9900ff;" | #9900ff
|- style="color:#fff;"
| style="background-color:#993300;" | #993300
| style="background-color:#993333;" | #993333
| style="background-color:#993366;" | #993366
| style="background-color:#993399;" | #993399
| style="background-color:#9933cc;" | #9933cc
| style="background-color:#9933ff;" | #9933ff
|- style="color:#fff;"
| style="background-color:#996600;" | #996600
| style="background-color:#996633;" | #996633
| style="background-color:#996666;" | #996666
| style="background-color:#996699;" | #996699
| style="background-color:#9966cc;" | #9966cc
| style="background-color:#9966ff;" | #9966ff
|-
| style="background-color:#999900;" | #999900
| style="background-color:#999933;" | #999933
| style="background-color:#999966;" | #999966
| style="background-color:#999999;" | #999999
| style="background-color:#9999cc;" | #9999cc
| style="background-color:#9999ff;" | #9999ff
|-
| style="background-color:#99cc00;" | #99cc00
| style="background-color:#99cc33;" | #99cc33
| style="background-color:#99cc66;" | #99cc66
| style="background-color:#99cc99;" | #99cc99
| style="background-color:#99cccc;" | #99cccc
| style="background-color:#99ccff;" | #99ccff
|-
| style="background-color:#99ff00;" | #99ff00
| style="background-color:#99ff33;" | #99ff33
| style="background-color:#99ff66;" | #99ff66
| style="background-color:#99ff99;" | #99ff99
| style="background-color:#99ffcc;" | #99ffcc
| style="background-color:#99ffff;" | #99ffff
|-
| style="background-color:#cc0000;" | #cc0000
| style="background-color:#cc0033;" | #cc0033
| style="background-color:#cc0066;" | #cc0066
| style="background-color:#cc0099;" | #cc0099
| style="background-color:#cc00cc;" | #cc00cc
| style="background-color:#cc00ff;" | #cc00ff
|-
| style="background-color:#cc3300;" | #cc3300
| style="background-color:#cc3333;" | #cc3333
| style="background-color:#cc3366;" | #cc3366
| style="background-color:#cc3399;" | #cc3399
| style="background-color:#cc33cc;" | #cc33cc
| style="background-color:#cc33ff;" | #cc33ff
|-
| style="background-color:#cc6600;" | #cc6600
| style="background-color:#cc6633;" | #cc6633
| style="background-color:#cc6666;" | #cc6666
| style="background-color:#cc6699;" | #cc6699
| style="background-color:#cc66cc;" | #cc66cc
| style="background-color:#cc66ff;" | #cc66ff
|-
| style="background-color:#cc9900;" | #cc9900
| style="background-color:#cc9933;" | #cc9933
| style="background-color:#cc9966;" | #cc9966
| style="background-color:#cc9999;" | #cc9999
| style="background-color:#cc99cc;" | #cc99cc
| style="background-color:#cc99ff;" | #cc99ff
|-
| style="background-color:#cccc00;" | #cccc00
| style="background-color:#cccc33;" | #cccc33
| style="background-color:#cccc66;" | #cccc66
| style="background-color:#cccc99;" | #cccc99
| style="background-color:#cccccc;" | #cccccc
| style="background-color:#ccccff;" | #ccccff
|-
| style="background-color:#ccff00;" | #ccff00
| style="background-color:#ccff33;" | #ccff33
| style="background-color:#ccff66;" | #ccff66
| style="background-color:#ccff99;" | #ccff99
| style="background-color:#ccffcc;" | #ccffcc
| style="background-color:#ccffff;" | #ccffff
|-
| style="background-color:#ff0000;" | #ff0000
| style="background-color:#ff0033;" | #ff0033
| style="background-color:#ff0066;" | #ff0066
| style="background-color:#ff0099;" | #ff0099
| style="background-color:#ff00cc;" | #ff00cc
| style="background-color:#ff00ff;" | #ff00ff
|-
| style="background-color:#ff3300;" | #ff3300
| style="background-color:#ff3333;" | #ff3333
| style="background-color:#ff3366;" | #ff3366
| style="background-color:#ff3399;" | #ff3399
| style="background-color:#ff33cc;" | #ff33cc
| style="background-color:#ff33ff;" | #ff33ff
|-
| style="background-color:#ff6600;" | #ff6600
| style="background-color:#ff6633;" | #ff6633
| style="background-color:#ff6666;" | #ff6666
| style="background-color:#ff6699;" | #ff6699
| style="background-color:#ff66cc;" | #ff66cc
| style="background-color:#ff66ff;" | #ff66ff
|-
| style="background-color:#ff9900;" | #ff9900
| style="background-color:#ff9933;" | #ff9933
| style="background-color:#ff9966;" | #ff9966
| style="background-color:#ff9999;" | #ff9999
| style="background-color:#ff99cc;" | #ff99cc
| style="background-color:#ff99ff;" | #ff99ff
|-
| style="background-color:#ffcc00;" | #ffcc00
| style="background-color:#ffcc33;" | #ffcc33
| style="background-color:#ffcc66;" | #ffcc66
| style="background-color:#ffcc99;" | #ffcc99
| style="background-color:#ffcccc;" | #ffcccc
| style="background-color:#ffccff;" | #ffccff
|-
| style="background-color:#ffff00;" | #ffff00
| style="background-color:#ffff33;" | #ffff33
| style="background-color:#ffff66;" | #ffff66
| style="background-color:#ffff99;" | #ffff99
| style="background-color:#ffffcc;" | #ffffcc
| style="background-color:#ffffff;" | #ffffff
|}

== 物体色用の規格 ==
=== DIC ===
{{Main|DICカラーガイド}}
[[DIC (企業)|DIC]]の製品。

=== パントーン ===
{{Main|パントーン}}
[[アメリカ合衆国|米国]]の企業、[[パントーン]]社の製品。[[デザイン]]、[[工業]]、[[繊維]]、[[建築]]分野などで広く使われている。

=== 日本塗料工業会標準色 ===
日塗工あるいはJPMA標準色。[[日本塗料工業会]]が定める塗料の色標準。現在の日本の塗料の色標準、この標準番号を使えばメーカーからその色の塗料が購入できる。

== 関連項目 ==
* [[色空間]]
* [[色目]]
* [[色名一覧]]（英語版：[[:en:List of colors]]）
* [[日本の色の一覧]]

* [[色]]
* [[色温度]]

== 脚注 ==
{{Reflist}}

{{DEFAULTSORT:からちやと}}
[[Category:色]]
[[Category:表]]

[[en:Color chart]]