色調別・色見本

**このページの構成** 　↓本文へジャンプ
RGB値の仕組み好きな色を作りたい時基本の16色	色名指定用の140色 ├モノトーン ├赤タイプ ├オレンジタイプ ├黄色タイプ ├緑タイプ ├青緑タイプ ├青タイプ ├紫タイプ └再掲・赤タイプ

RGB値の仕組み

RGB値は、#RrGgBb と、十六進数2ケタの数値を3つ組み合わせて表現されます。
0,1,2,…,9,a,b,c,d,e,f,10,11,… と続き（a＝十、f＝十五、10＝十六）、
最低は00、最高はff（＝二百五十五）、そしてその中間は80（＝百二十八）となります。

Rr（上から1と2番目のケタ）は赤い光の強さ、
Gg（上から3と4番目のケタ）は緑の光の強さ、
Bb（上から5と6番目のケタ）は青い光の強さ、を表します。
三要素全て最低の00なら#000000＝black、全て最高のffなら#ffffff＝white となります。
絵の具を混ぜて色を作る時とは勝手が違うので、要注意です。

↑ページ先頭へ

好きな色を作りたい時

下の色見本から、目的の色に近い色を選び、そのRBG値を調整します。
基本的には、#RrGgBb の内、まずRとGとB（上から1,3,5番目）の数値を変えて行きます。
微調整は、rとgとb（上から2,4,6番目）の数値を変えて行きます。

選んだ色を、色調をそのままで明るくしたい時、
RとGとB（上から1,3,5番目）をそれぞれ１増やします。（9の上はaです）
好みの明るさになるまで繰り返します。増やす数は三つとも同じになるようにします。
R、G、Bの中にfがある場合、 fはそのままで、他の要素を１上げます。
微調整はrとgとb（上から2,4,6番目）を同じ要領で増やします。

色調をそのままで暗くしたい時は、
RとGとB（上から1,3,5番目）をそれぞれ１減らします。（aの下は9です）
R、G、Bの中に0がある場合、 0はそのままで、他の要素を１下げます。
後は、明るくしたい時と同じ要領です。

以上の方法では、厳密に言えば同じ色調にはならない事があります。
しかし、なかなか実用的な方法ではあります。

■＝#ea85f3
■＝#da75f3
■＝#ca65e3
■＝#ba55d3（＝mediumorchid）
■＝#aa45c3
■＝#9a35b3
■＝#8a25a3

赤みを増やしたい時＝　赤は、Rrが高く GgとBbが低い色なので、
Rを１増やします。（繰り返します）　微調整はrで行います。
または、GとBを同じ数だけ減らします。（微調整はgとbで）

黄色みを増やしたい時＝　黄色は、RrとGgが高く Bbが低い色なので、
RとGを同じ数だけ増やします。（繰り返します）　微調整はrとgで。
または、Bを１減らします。（微調整はbで）

青（Bbが高く Rrが低い色）、
緑（Ggが高く RrとBbが低い色）、
紫（RrとBbが高く Ggが低い色）なども、以下同要領です。

また、色味を減らしたい時は、増やしたい時と反対の事をします。
（赤みを減らしたいならRを減らす、またはGとBを同じ数だけ増やす）

↑ページ先頭へ

**基本の16色**
#ffffff■white #c0c0c0■silver #808080■gray #000000■black	#ff0000■red #800000■maroon #ff00ff■fuchsia #800080■purple	#000080■navy #0000ff■blue #00ffff■aqua #008080■teal	#008000■green #00ff00■lime #808000■olive #ffff00■yellow

基本の16色

#ffffff■white
#c0c0c0■silver
#808080■gray
#000000■black

#ff0000■red
#800000■maroon
#ff00ff■fuchsia
#800080■purple

#000080■navy
#0000ff■blue
#00ffff■aqua
#008080■teal

#008000■green
#00ff00■lime
#808000■olive
#ffff00■yellow

以上の16色は、HTML3.2以上なら（HTML文書を書く時の書式のバージョン、現在は4.01ぐらいが主流）、
どんなブラウザででも色名で解釈してもらえます。
※2014年10月、HTML5がW3Cから正式に勧告されました。
　現在、色んなブラウザで少しずつ導入されています。
fuchsia＝#ff00ffと magenta＝#ff00ffは、どちらも全く同じ色です。
aqua＝#00ffffと cyan＝#00ffffも、同様です。

maroon＝マルーン・えび茶色、
fuchsia＝日本語読みフクシア・英語発音フューシャ（花の名前より）
teal＝ティール（カルガモやその類の鳥の総称より）
cyan＝日本語読みシアン・英語発音サイアン

↑ページ先頭へ

色名指定用の140色

多くのブラウザで通用する色名ですが、（基本の16色以外）ブラウザによっては表現されない事があります。
沢山の人が見るHPでは、rgb値指定の方が無難でしょう。

フォントを小さくすると、よりコンパクトになり見比べやすくなります。
Internet Explorer なら「表示」～「文字のサイズ」～「小または最小」

↓モノトーン 　（Rr ＝Gg ＝Bb）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#ffffff	white@	137
.	#f5f5f5	whitesmoke	138
.	#dcdcdc	gainsboro	047
.	#d3d3d3	lightgrey	068
.	#c0c0c0	silver@	123
.	#a9a9a9	darkgray	025
.	#808080	gray@	051
.	#696969	dimgray	041
.	#000000	black@	008

注；他のグレー系と違いlightgreyだけ、
grayではなく greyとなっていますが、誤植ではありません。
色名をlightgrayにすると、全く別の色■になってしまいます。
（ウチの昔のInternet Explorerでは群青色に見えてました。）

↓赤タイプ 　（Rr高、 Gg低、 Bb低）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#fffafa	snow	127
.	#fffaf0	floralwhite	044
.	#fff5ee	seashell	121
.	#ffe4e1	mistyrose	093
.	#ffc0cb	pink	110
.	#ffb6c1	lightpink	070
.	#ff69b4	hotpink	055
.	#ff1493	deeppink	039
.	#db7093	palevioletred	106
.	#bc8f8f	rosybrown	115
.	#c71585	mediumvioletred	090

＿＿＿	rgb値	色名	No.
.	#ffa07a	lightsalmon	071
.	#fa8072	salmon	118
.	#e9967a	darksalmon	033
.	#f08080	lightcoral	065
.	#ff7f50	coral	017
.	#ff6347	tomato	133
.	#ff4500	orangered	101
.	#ff0000	red@	114

＿＿＿	rgb値	色名	No.
.	#cd5c5c	indianred	056
.	#dc143c	crimson	020
.	#b22222	firebrick	043
.	#a52a2a	brown	012
.	#8b0000	darkred	032
.	#800000	maroon@	081

↓オレンジタイプ 　（Rr高、 Gg中、 Bb低）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#fdf5e6	oldlace	097
.	#ffefd5	papayawhip	107
.	#ffebcd	blanchedalmond	009
.	#faebd7	antiquewhite	002
.	#ffe4c4	bisque	007
.	#ffe4b5	moccasin	094
.	#ffdab9	peachpuff	108
.	#f5deb3	wheat	136
.	#ffdead	navajowhite	095
.	#deb887	burlywood	013
.	#d2b48c	tan	130

＿＿＿	rgb値	色名	No.
.	#f4a460	sandybrown	119
.	#ffa500	orange	100
.	#ff8c00	darkorange	030
.	#cd853f	peru	109
.	#a0522d	sienna	122
.	#d2691e	chocolate	016
.	#8b4513	saddlebrown	117

↓黄色タイプ 　（Rr高、 Gg高、 Bb低）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#fffff0	ivory	058
.	#ffffe0	lightyellow	076
.	#fff8dc	cornsilk	019
.	#fafad2	lightgoldenrodyellow	067
.	#fffacd	lemonchiffon	063
.	#faf0e6	linen	079
.	#f5f5dc	beige	006
.	#eee8aa	palegoldenrod	103
.	#f0e68c	khaki	059

＿＿＿	rgb値	色名	No.
.	#ffff00	yellow@	139
.	#ffd700	gold	049
.	#daa520	goldenrod	050
.	#bdb76b	darkkhaki	027
.	#b8860b	darkgoldenrod	024
.	#808000	olive@	098

↓緑タイプ 　（Rr低、 Gg高、 Bb低）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#f5fffa	mintcream	092
.	#f0fff0	honeydew	054
.	#98fb98	palegreen	104
.	#90ee90	lightgreen	069
.	#00ff7f	springgreen	128
.	#00fa9a	mediumspringgreen	088
.	#adff2f	greenyellow	053
.	#7fff00	chartreuse	015
.	#7cfc00	lawngreen	062
.	#00ff00	lime@	077
.	#32cd32	limegreen	078

＿＿＿	rgb値	色名	No.
.	#9acd32	yellowgreen	140
.	#6b8e23	olivedrab	099
.	#556b2f	darkolivegreen	029
.	#228b22	forestgreen	045
.	#008000	green@	052
.	#006400	darkgreen	026
.	#8fbc8f	darkseagreen	034
.	#3cb371	mediumseagreen	086
.	#2e8b57	seagreen	120

↓青緑タイプ 　（Rr低、 Gg高、 Bb高）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#f0ffff	azure	005
.	#e0ffff	lightcyan	066
.	#afeeee	paleturquoise	105
.	#b0e0e6	powderblue	112
.	#00ffff	aqua@	003
.	#00ffff	cyan	021
.	#7fffd4	aquamarine	004
.	#66cdaa	mediumaquamarine	082

＿＿＿	rgb値	色名	No.
.	#87ceeb	skyblue	124
.	#40e0d0	turquoise	134
.	#48d1cc	mediumturquoise	089
.	#00ced1	darkturquoise	037
.	#20b2aa	lightseagreen	072
.	#5f9ea0	cadetblue	014
.	#008b8b	darkcyan	023
.	#008080	teal@	131
.	#2f4f4f	darkslategray	036

↓青タイプ 　（Rr低、 Gg低～中、 Bb高）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#f8f8ff	ghostwhite	048
.	#f0f8ff	aliceblue	001
.	#e6e6fa	lavender	060
.	#add8e6	lightblue	064
.	#87cefa	lightskyblue	073
.	#b0c4de	lightsteelblue	075
.	#00bfff	deepskyblue	040
.	#1e90ff	dodgerblue	042
.	#6495ed	cornflowerblue	018
.	#7b68ee	mediumslateblue	087
.	#0000ff	blue@	010
.	#4169e1	royalblue	116
.	#6a5acd	slateblue	125

＿＿＿	rgb値	色名	No.
.	#778899	lightslategray	074
.	#708090	slategray	126
.	#4682b4	steelblue	129
.	#0000cd	mediumblue	083
.	#483d8b	darkslateblue	035
.	#00008b	darkblue	022
.	#000080	navy@	096
.	#191970	midnightblue	091

↓紫タイプ 　（Rr高、 Gg低、 Bb高）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#fff0f5	lavenderblush	061
.	#dda0dd	plum	111
.	#d8bfd8	thistle	132
.	#ee82ee	violet	135
.	#ff00ff	fuchsia@	046
.	#ff00ff	magenta	080
.	#da70d6	orchid	102
.	#ba55d3	mediumorchid	084

＿＿＿	rgb値	色名	No.
.	#9370db	mediumpurple	085
.	#8a2be2	blueviolet	011
.	#9932cc	darkorchid	031
.	#9400d3	darkviolet	038
.	#8b008b	darkmagenta	028
.	#800080	purple@	113
.	#4b0082	indigo	057

↓再掲・赤タイプ 　（Rr高、 Gg低、 Bb低）　　↑ページ先頭へ

＿＿＿	rgb値	色名	No.
.	#fffafa	snow	127
.	#fffaf0	floralwhite	044
.	#fff5ee	seashell	121
.	#ffe4e1	mistyrose	093
.	#ffc0cb	pink	110
.	#ffb6c1	lightpink	070
.	#ff69b4	hotpink	055
.	#ff1493	deeppink	039
.	#db7093	palevioletred	106
.	#bc8f8f	rosybrown	115
.	#c71585	mediumvioletred	090

＿＿＿	rgb値	色名	No.
.	#ffa07a	lightsalmon	071
.	#fa8072	salmon	118
.	#e9967a	darksalmon	033
.	#f08080	lightcoral	065
.	#ff7f50	coral	017
.	#ff6347	tomato	133
.	#ff4500	orangered	101
.	#ff0000	red@	114

＿＿＿	rgb値	色名	No.
.	#cd5c5c	indianred	056
.	#dc143c	crimson	020
.	#b22222	firebrick	043
.	#a52a2a	brown	012
.	#8b0000	darkred	032
.	#800000	maroon@	081

色名に@が付いているものは、基本の16色。
色名の次にあるNo.は、色名をアルファベット順に並べた時の通し番号です。
他の色見本ページを調べる時にお使い下さい。
ここで挙げたRr、 Gg、 Bbの高中低とは、その色の中で３つの要素を比べた時のものです。
00～ffの中での高中低ではありません。
例えば■#fffafa＝snowは、３要素どれもffに近い色ですが、３つの中であえて比べれば、
Rr部分が高く、 GgとBbが低いので、赤タイプに分類しました。
（実際に、ブラウザの機種によっては、snowはピンクに見える事があります）
３要素の高中低、色のタイプ分けや、並ぶ順番は、
完全に筆者の独断と主観によるものです。

↑ページ先頭へ

HTML目次に戻る
 目次（トップ）に戻る

このページcolor.html の作成日＝2002-12-21　最終更新日＝2015-03-22
作成者＝源氏名Ｋ（genjina-K）