カラーチャート

【COLOR CHART】

説　　　　明

●#の後の６ケタの英数は、16進数(A～F)と(0～9)で２桁ずつ赤、緑、青(RRGGBB)の順で記述されてます。
計算上（16×16×16×16×16×16＝16,777,216）組み合わせでフルカラー（16,777,216色）を表せます。

●"#FFFFFF"は、RGB 3色とも最発光で白、"#000000"は、RGB 3色とも最消光で黒です。
つまりA～F、0～9で、赤、緑、青のそれぞれ16段階の組み合わせが約1670組みあるということです。

【Web Safe Color.】“ウェブセーフカラー”について

★Web ブラウザには、Web Safe Color.を利用しましょう。
　↓下のほうに、Web Safe Color.一覧表があります。↓
【告知】Webセーフカラーも万能では、ないのだ！
近以色（良く似た色目）やOSブラウザ環境で問題点もあります。

:Internet Explorer for Windowss.の256色環境だと正しく表示されない？！なぜ？
下記のように、環境によってOSブラウザが判断しないとか、一瞬見た目が判断し辛い良く似た色目もあります。
下の例は、ホンの一例に過ぎません・・・

緑が多いはず？	赤が多いはず？	青が多いはず？	赤が多いはず？
#0033FF	#3300FF	#00FF33	#33FF00

#0033FF

#3300FF

#00FF33

#33FF00

HTML 規定：基本１６色

←それぞれのボタンクリックすると、バックグラウンドの色がその色に変わります。

◆●■▲	★★Gray▼（#808080）★★	◆●■▲	★★Black▼（#000000）★★
◆●■▲	★★White▼（#FFFFFF）★★	◆●■▲	★★Silver▼（#C0C0C0）★★
◆●■▲	★★Blue▼（#0000FF）★★	◆●■▲	★★Navy▼（#000080）★★
◆●■▲	★★Aqua▼（#00FFFF）★★	◆●■▲	★★Teal▼（#008080）★★
◆●■▲	★★Lime▼（#00FF00）★★	◆●■▲	★★Green▼（#008000）★★
◆●■▲	★★Yellow▼（#FFFF00）★★	◆●■▲	★★Olive▼（#808000）★★
◆●■▲	★★Red▼（#FF0000）★★	◆●■▲	★★Maroon▼（#800000）★★
◆●■▲	★★Magenta▼（#FF00FF）★★	◆●■▲	★★Purple▼（#800080）★★

モノトーン１６段階

←Black┃White→
←黒　┃　白→

0■■

1■■

2■■

3■■

4■■

5■■

6■■

7■■

8■■

9■■

A■■

B■■

C■■

D■■

E■■

F■■

カラーグラデーション

【Color Gradation】

	←「ffffff」それぞれのボタンクリックすると、バックグラウンドの色がその色に変わります。
	バックグラウンドの色が決まれば、文字の色の比較にもなります。

　 EEEEFF
　 DDDDFF
　 CCCCFF
　 BBBBFF
　 AAAAFF
　 9999FF
　 8888FF
　 7777FF
　 6666FF
　 5555FF
　 4444FF
　 3333FF
　 2222FF
　 1111FF
　 0000FF
　 0000EE
　 0000DD
　 0000CC
　 0000BB
　 0000AA
　 000099
　 000088
　 000077
　 000066
　 000055
　 000044
　 000033
　 000022
　 000011

　 EEFFFF
　 DDFFFF
　 CCFFFF
　 BBFFFF
　 AAFFFF
　 99FFFF
　 88FFFF
　 77FFFF
　 66FFFF
　 55FFFF
　 44FFFF
　 33FFFF
　 22FFFF
　 11FFFF
　 00FFFF
　 00EEEE
　 00DDDD
　 00CCCC
　 00BBBB
　 00AAAA
　 009999
　 008888
　 007777
　 006666
　 005555
　 004444
　 003333
　 002222
　 001111

　 EEFFEE
　 DDFFDD
　 CCFFCC
　 BBFFBB
　 AAFFAA
　 99FF99
　 88FF88
　 77FF77
　 66FF66
　 55FF55
　 44FF44
　 33FF33
　 22FF22
　 11FF11
　 00FF00
　 00EE00
　 00DD00
　 00CC00
　 00BB00
　 00AA00
　 009900
　 008800
　 007700
　 006600
　 005500
　 004400
　 003300
　 002200
　 001100

　 FFFFEE
　 FFFFDD
　 FFFFCC
　 FFFFBB
　 FFFFAA
　 FFFF99
　 FFFF88
　 FFFF77
　 FFFF66
　 FFFF55
　 FFFF44
　 FFFF33
　 FFFF22
　 FFFF11
　 FFFF00
　 EEEE00
　 DDDD00
　 CCCC00
　 BBBB00
　 AAAA00
　 999900
　 888800
　 777700
　 666600
　 555500
　 444400
　 333300
　 222200
　 111100

　 FFEEEE
　 FFDDDD
　 FFCCCC
　 FFBBBB
　 FFAAAA
　 FF9999
　 FF8888
　 FF7777
　 FF6666
　 FF5555
　 FF4444
　 FF3333
　 FF2222
　 FF1111
　 FF0000
　 EE0000
　 DD0000
　 CC0000
　 BB0000
　 AA0000
　 990000
　 880000
　 770000
　 660000
　 550000
　 440000
　 330000
　 220000
　 110000

　 FFEEFF
　 FFDDFF
　 FFCCFF
　 FFBBFF
　 FFAAFF
　 FF99FF
　 FF88FF
　 FF77FF
　 FF66FF
　 FF55FF
　 FF44FF
　 FF33FF
　 FF22FF
　 FF11FF
　 FF00FF
　 EE00EE
　 DD00DD
　 CC00CC
　 BB00BB
　 AA00AA
　 990099
　 880088
　 770077
　 660066
　 550055
　 440044
　 330033
　 220022
　 110011

“ウェブセーフカラー”一覧表

･下記の指定方法の以外に、Color name.が使えますが、基本１６色以外は、お勧めできません。
･下記の指定方法の以外に、スタイルシートに用いる、
　rgb (0%～100%)％割合や、#RGB の１６進数３桁があります。
色をクリックすると背景色が替わります。

表の見方
`#000000 R=000 G=000 B=000`	←⇔色コード(#000000～#FFFFFF)、#RRGGBBの１６進数６桁 ←⇔赤(0～255)┓ ←⇔緑(0～255)┣スタイルシートに用いる、rgb(0～255)数値 ←⇔青(0～255)┛

`#000000 R=000 G=000 B=000`	`#330000 R=051 G=000 B=000`	`#660000 R=102 G=000 B=000`	`#990000 R=153 G=000 B=000`	`#CC0000 R=204 G=000 B=000`	`#FF0000 R=255 G=000 B=000`
`#003300 R=000 G=051 B=000`	`#333300 R=051 G=051 B=000`	`#663300 R=102 G=051 B=000`	`#993300 R=153 G=051 B=000`	`#CC3300 R=204 G=051 B=000`	`#FF3300 R=255 G=051 B=000`
`#006600 R=000 G=102 B=000`	`#336600 R=051 G=102 B=000`	`#666600 R=102 G=102 B=000`	`#996600 R=153 G=102 B=000`	`#CC6600 R=204 G=102 B=000`	`#FF6600 R=255 G=102 B=000`
`#009900 R=000 G=153 B=000`	`#339900 R=051 G=153 B=000`	`#669900 R=102 G=153 B=000`	`#999900 R=153 G=153 B=000`	`#CC9900 R=204 G=153 B=000`	`#FF9900 R=255 G=153 B=000`
`#00CC00 R=000 G=204 B=000`	`#33CC00 R=051 G=204 B=000`	`#66CC00 R=102 G=204 B=000`	`#99CC00 R=153 G=204 B=000`	`#CCCC00 R=204 G=204 B=000`	`#FFCC00 R=255 G=204 B=000`
`#00FF00 R=000 G=255 B=000`	`#33FF00 R=051 G=255 B=000`	`#66FF00 R=102 G=255 B=000`	`#99FF00 R=153 G=255 B=000`	`#CCFF00 R=204 G=255 B=000`	`#FFFF00 R=255 G=255 B=000`
`#000033 R=000 G=000 B=051`	`#330033 R=051 G=000 B=051`	`#660033 R=102 G=000 B=051`	`#990033 R=153 G=000 B=051`	`#CC0033 R=204 G=000 B=051`	`#FF0033 R=255 G=000 B=051`
`#003333 R=000 G=051 B=051`	`#333333 R=051 G=051 B=051`	`#663333 R=102 G=051 B=051`	`#993333 R=153 G=051 B=051`	`#CC3333 R=204 G=051 B=051`	`#FF3333 R=255 G=051 B=051`
`#006633 R=000 G=102 B=051`	`#336633 R=051 G=102 B=051`	`#666633 R=102 G=102 B=051`	`#996633 R=153 G=102 B=051`	`#CC6633 R=204 G=102 B=051`	`#FF6633 R=255 G=102 B=051`
`#009933 R=000 G=153 B=051`	`#339933 R=051 G=153 B=051`	`#669933 R=102 G=153 B=051`	`#999933 R=153 G=153 B=051`	`#CC9933 R=204 G=153 B=051`	`#FF9933 R=255 G=153 B=051`
`#00CC33 R=000 G=204 B=051`	`#33CC33 R=051 G=204 B=051`	`#66CC33 R=102 G=204 B=051`	`#99CC33 R=153 G=204 B=051`	`#CCCC33 R=204 G=204 B=051`	`#FFCC33 R=255 G=204 B=051`
`#00FF33 R=000 G=255 B=051`	`#33FF33 R=051 G=255 B=051`	`#66FF33 R=102 G=255 B=051`	`#99FF33 R=153 G=255 B=051`	`#CCFF33 R=204 G=255 B=051`	`#FFFF33 R=255 G=255 B=051`
`#000066 R=000 G=000 B=102`	`#330066 R=051 G=000 B=102`	`#660066 R=102 G=000 B=102`	`#990066 R=153 G=000 B=102`	`#CC0066 R=204 G=000 B=102`	`#FF0066 R=255 G=000 B=102`
`#003366 R=000 G=051 B=102`	`#333366 R=051 G=051 B=102`	`#663366 R=102 G=051 B=102`	`#993366 R=153 G=051 B=102`	`#CC3366 R=204 G=051 B=102`	`#FF3366 R=255 G=051 B=102`
`#006666 R=000 G=102 B=102`	`#336666 R=051 G=102 B=102`	`#666666 R=102 G=102 B=102`	`#996666 R=153 G=102 B=102`	`#CC6666 R=204 G=102 B=102`	`#FF6666 R=255 G=102 B=102`
`#009966 R=000 G=153 B=102`	`#339966 R=051 G=153 B=102`	`#669966 R=102 G=153 B=102`	`#999966 R=153 G=153 B=102`	`#CC9966 R=204 G=153 B=102`	`#FF9966 R=255 G=153 B=102`
`#00CC66 R=000 G=204 B=102`	`#33CC66 R=051 G=204 B=102`	`#66CC66 R=102 G=204 B=102`	`#99CC66 R=153 G=204 B=102`	`#CCCC66 R=204 G=204 B=102`	`#FFCC66 R=255 G=204 B=102`
`#00FF66 R=000 G=255 B=102`	`#33FF66 R=051 G=255 B=102`	`#66FF66 R=102 G=255 B=102`	`#99FF66 R=153 G=255 B=102`	`#CCFF66 R=204 G=255 B=102`	`#FFFF66 R=255 G=255 B=102`

`#000099 R=000 G=000 B=153`	`#330099 R=051 G=000 B=153`	`#660099 R=102 G=000 B=153`	`#990099 R=153 G=000 B=153`	`#CC0099 R=204 G=000 B=153`	`#FF0099 R=255 G=000 B=153`
`#003399 R=000 G=051 B=153`	`#333399 R=051 G=051 B=153`	`#663399 R=102 G=051 B=153`	`#993399 R=153 G=051 B=153`	`#CC3399 R=204 G=051 B=153`	`#FF3399 R=255 G=051 B=153`
`#006699 R=000 G=102 B=153`	`#336699 R=051 G=102 B=153`	`#666699 R=102 G=102 B=153`	`#996699 R=153 G=102 B=153`	`#CC6699 R=204 G=102 B=153`	`#FF6699 R=255 G=102 B=153`
`#009999 R=000 G=153 B=153`	`#339999 R=051 G=153 B=153`	`#669999 R=102 G=153 B=153`	`#999999 R=153 G=153 B=153`	`#CC9999 R=204 G=153 B=153`	`#FF9999 R=255 G=153 B=153`
`#00CC99 R=000 G=204 B=153`	`#33CC99 R=051 G=204 B=153`	`#66CC99 R=102 G=204 B=153`	`#99CC99 R=153 G=204 B=153`	`#CCCC99 R=204 G=204 B=153`	`#FFCC99 R=255 G=204 B=153`
`#00FF99 R=000 G=255 B=153`	`#33FF99 R=051 G=255 B=153`	`#66FF99 R=102 G=255 B=153`	`#99FF99 R=153 G=255 B=153`	`#CCFF99 R=204 G=255 B=153`	`#FFFF99 R=255 G=255 B=153`
`#0000CC R=000 G=000 B=204`	`#3300CC R=051 G=000 B=204`	`#6600CC R=102 G=000 B=204`	`#9900CC R=153 G=000 B=204`	`#CC00CC R=204 G=000 B=204`	`#FF00CC R=255 G=000 B=204`
`#0033CC R=000 G=051 B=204`	`#3333CC R=051 G=051 B=204`	`#6633CC R=102 G=051 B=204`	`#9933CC R=153 G=051 B=204`	`#CC33CC R=204 G=051 B=204`	`#FF33CC R=255 G=051 B=204`
`#0066CC R=000 G=102 B=204`	`#3366CC R=051 G=102 B=204`	`#6666CC R=102 G=102 B=204`	`#9966CC R=153 G=102 B=204`	`#CC66CC R=204 G=102 B=204`	`#FF66CC R=255 G=102 B=204`
`#0099CC R=000 G=153 B=204`	`#3399CC R=051 G=153 B=204`	`#6699CC R=102 G=153 B=204`	`#9999CC R=153 G=153 B=204`	`#CC99CC R=204 G=153 B=204`	`#FF99CC R=255 G=153 B=204`
`#00CCCC R=000 G=204 B=204`	`#33CCCC R=051 G=204 B=204`	`#66CCCC R=102 G=204 B=204`	`#99CCCC R=153 G=204 B=204`	`#CCCCCC R=204 G=204 B=204`	`#FFCCCC R=255 G=204 B=204`
`#00FFCC R=000 G=255 B=204`	`#33FFCC R=051 G=255 B=204`	`#66FFCC R=102 G=255 B=204`	`#99FFCC R=153 G=255 B=204`	`#CCFFCC R=204 G=255 B=204`	`#FFFFCC R=255 G=255 B=204`
`#0000FF R=000 G=000 B=255`	`#3300FF R=051 G=000 B=255`	`#6600FF R=102 G=000 B=255`	`#9900FF R=153 G=000 B=255`	`#CC00FF R=204 G=000 B=255`	`#FF00FF R=255 G=000 B=255`
`#0033FF R=000 G=051 B=255`	`#3333FF R=051 G=051 B=255`	`#6633FF R=102 G=051 B=255`	`#9933FF R=153 G=051 B=255`	`#CC33FF R=204 G=051 B=255`	`#FF33FF R=255 G=051 B=255`
`#0066FF R=000 G=102 B=255`	`#3366FF R=051 G=102 B=255`	`#6666FF R=102 G=102 B=255`	`#9966FF R=153 G=102 B=255`	`#CC66FF R=204 G=102 B=255`	`#FF66FF R=255 G=102 B=255`
`#0099FF R=000 G=153 B=255`	`#3399FF R=051 G=153 B=255`	`#6699FF R=102 G=153 B=255`	`#9999FF R=153 G=153 B=255`	`#CC99FF R=204 G=153 B=255`	`#FF99FF R=255 G=153 B=255`
`#00CCFF R=000 G=204 B=255`	`#33CCFF R=051 G=204 B=255`	`#66CCFF R=102 G=204 B=255`	`#99CCFF R=153 G=204 B=255`	`#CCCCFF R=204 G=204 B=255`	`#FFCCFF R=255 G=204 B=255`
`#00FFFF R=000 G=255 B=255`	`#33FFFF R=051 G=255 B=255`	`#66FFFF R=102 G=255 B=255`	`#99FFFF R=153 G=255 B=255`	`#CCFFFF R=204 G=255 B=255`	`#FFFFFF R=255 G=255 B=255`

カラーチャート

カラーグラデーション

“ウェブ セーフ カラー”一覧表

“ウェブセーフカラー”一覧表