カラーコード一覧 148色の色見本【クリックでコピー・HEX・RGB変換・無料PDF】パステル・くすみ・赤・青・白・黒

カラーコードの一覧です。Webでそのまま使えるCSSの色名148色を、色見本・HEX(#FF0000 の形)・RGBつきで色ごとにまとめました。HEXとRGBを変換する欄や、2色を混ぜた色を調べる欄もあります。印刷できる一覧PDFも無料・登録不要でダウンロードできます。

↓ PDFのダウンロードはこちら

赤・ピンク・オレンジ・黄・紫・緑・青・茶・白・灰・黒

カラーコードを変換する・色を調べる

「#FF0000」や「255,0,0」を入れると、色とHEX・RGB・HSLがわかります。右の四角をおすと、画面で色を選べます。

よく使う色のカラーコード

色	日本語	色名	HEX	RGB
	赤	red	#FF0000	255, 0, 0
	青	blue	#0000FF	0, 0, 255
	緑(明るい)	lime	#00FF00	0, 255, 0
	緑	green	#008000	0, 128, 0
	黄	yellow	#FFFF00	255, 255, 0
	オレンジ	orange	#FFA500	255, 165, 0
	ピンク	pink	#FFC0CB	255, 192, 203
	紫	purple	#800080	128, 0, 128
	白	white	#FFFFFF	255, 255, 255
	黒	black	#000000	0, 0, 0
	灰色	gray	#808080	128, 128, 128
	銀色	silver	#C0C0C0	192, 192, 192
	金色	gold	#FFD700	255, 215, 0
	茶色	brown	#A52A2A	165, 42, 42
	紺色	navy	#000080	0, 0, 128
	水色	aqua	#00FFFF	0, 255, 255

日本語の色名とCSSの色名は、ぴったり同じ色とは限りません。たとえば「緑」は、CSSでは green(#008000)が濃い緑で、lime(#00FF00)が明るい緑です。

雰囲気から選ぶカラーコード

色合いをそろえた、使いやすい色の組み合わせです。同じ段の色を組み合わせると、まとまりが出ます。名前は色合いのめやすで、決まった色名ではありません。

パステルカラー(明るくやさしい色)

色	色合い	HEX	RGB
	赤	#F4BEBE	244, 190, 190
	オレンジ	#F4D7BE	244, 215, 190
	黄	#F4EBBE	244, 235, 190
	黄緑	#DDF4BE	221, 244, 190
	緑	#BEF4C7	190, 244, 199
	青緑	#BEF4EB	190, 244, 235
	水色	#BEE6F4	190, 230, 244
	青	#BED0F4	190, 208, 244
	紫	#D9BEF4	217, 190, 244
	ピンク	#F4BED9	244, 190, 217

くすみカラー(落ち着いた色)

色	色合い	HEX	RGB
	赤	#B68686	182, 134, 134
	オレンジ	#B69C86	182, 156, 134
	黄	#B6AE86	182, 174, 134
	黄緑	#A2B686	162, 182, 134
	緑	#86B68E	134, 182, 142
	青緑	#86B6AE	134, 182, 174
	水色	#86AAB6	134, 170, 182
	青	#8696B6	134, 150, 182
	紫	#9E86B6	158, 134, 182
	ピンク	#B6869E	182, 134, 158

ビビッドカラー(あざやかな色)

色	色合い	HEX	RGB
	赤	#F20D0D	242, 13, 13
	オレンジ	#F2780D	242, 120, 13
	黄	#F2CC0D	242, 204, 13
	黄緑	#93F20D	147, 242, 13
	緑	#0DF233	13, 242, 51
	青緑	#0DF2CC	13, 242, 204
	水色	#0DB9F2	13, 185, 242
	青	#0D59F2	13, 89, 242
	紫	#7F0DF2	127, 13, 242
	ピンク	#F20D80	242, 13, 128

濃い色(ダークカラー)

色	色合い	HEX	RGB
	赤	#721D1D	114, 29, 29
	オレンジ	#72451D	114, 69, 29
	黄	#72641D	114, 100, 29
	黄緑	#4F721D	79, 114, 29
	緑	#1D722B	29, 114, 43
	青緑	#1D7264	29, 114, 100
	水色	#1D5D72	29, 93, 114
	青	#1D3972	29, 57, 114
	紫	#471D72	71, 29, 114
	ピンク	#721D47	114, 29, 71

カラーコード一覧(148色)

赤系のカラーコード

色	色名	HEX	RGB
	indianred	#CD5C5C	205, 92, 92
	lightcoral	#F08080	240, 128, 128
	salmon	#FA8072	250, 128, 114
	darksalmon	#E9967A	233, 150, 122
	lightsalmon	#FFA07A	255, 160, 122
	crimson	#DC143C	220, 20, 60
	red	#FF0000	255, 0, 0
	firebrick	#B22222	178, 34, 34
	darkred	#8B0000	139, 0, 0

ピンク系のカラーコード

色	色名	HEX	RGB
	pink	#FFC0CB	255, 192, 203
	lightpink	#FFB6C1	255, 182, 193
	hotpink	#FF69B4	255, 105, 180
	deeppink	#FF1493	255, 20, 147
	mediumvioletred	#C71585	199, 21, 133
	palevioletred	#DB7093	219, 112, 147

オレンジ系のカラーコード

色	色名	HEX	RGB
	coral	#FF7F50	255, 127, 80
	tomato	#FF6347	255, 99, 71
	orangered	#FF4500	255, 69, 0
	darkorange	#FF8C00	255, 140, 0
	orange	#FFA500	255, 165, 0

黄系のカラーコード

色	色名	HEX	RGB
	gold	#FFD700	255, 215, 0
	yellow	#FFFF00	255, 255, 0
	lightyellow	#FFFFE0	255, 255, 224
	lemonchiffon	#FFFACD	255, 250, 205
	lightgoldenrodyellow	#FAFAD2	250, 250, 210
	papayawhip	#FFEFD5	255, 239, 213
	moccasin	#FFE4B5	255, 228, 181
	peachpuff	#FFDAB9	255, 218, 185
	palegoldenrod	#EEE8AA	238, 232, 170
	khaki	#F0E68C	240, 230, 140
	darkkhaki	#BDB76B	189, 183, 107

紫系のカラーコード

色	色名	HEX	RGB
	lavender	#E6E6FA	230, 230, 250
	thistle	#D8BFD8	216, 191, 216
	plum	#DDA0DD	221, 160, 221
	violet	#EE82EE	238, 130, 238
	orchid	#DA70D6	218, 112, 214
	fuchsia	#FF00FF	255, 0, 255
	magenta	#FF00FF	255, 0, 255
	mediumorchid	#BA55D3	186, 85, 211
	mediumpurple	#9370DB	147, 112, 219
	rebeccapurple	#663399	102, 51, 153
	blueviolet	#8A2BE2	138, 43, 226
	darkviolet	#9400D3	148, 0, 211
	darkorchid	#9932CC	153, 50, 204
	darkmagenta	#8B008B	139, 0, 139
	purple	#800080	128, 0, 128
	indigo	#4B0082	75, 0, 130
	slateblue	#6A5ACD	106, 90, 205
	darkslateblue	#483D8B	72, 61, 139
	mediumslateblue	#7B68EE	123, 104, 238

緑系のカラーコード

色	色名	HEX	RGB
	greenyellow	#ADFF2F	173, 255, 47
	chartreuse	#7FFF00	127, 255, 0
	lawngreen	#7CFC00	124, 252, 0
	lime	#00FF00	0, 255, 0
	limegreen	#32CD32	50, 205, 50
	palegreen	#98FB98	152, 251, 152
	lightgreen	#90EE90	144, 238, 144
	mediumspringgreen	#00FA9A	0, 250, 154
	springgreen	#00FF7F	0, 255, 127
	mediumseagreen	#3CB371	60, 179, 113
	seagreen	#2E8B57	46, 139, 87
	forestgreen	#228B22	34, 139, 34
	green	#008000	0, 128, 0
	darkgreen	#006400	0, 100, 0
	yellowgreen	#9ACD32	154, 205, 50
	olivedrab	#6B8E23	107, 142, 35
	olive	#808000	128, 128, 0
	darkolivegreen	#556B2F	85, 107, 47
	mediumaquamarine	#66CDAA	102, 205, 170
	darkseagreen	#8FBC8F	143, 188, 143
	lightseagreen	#20B2AA	32, 178, 170
	darkcyan	#008B8B	0, 139, 139
	teal	#008080	0, 128, 128

青系のカラーコード

色	色名	HEX	RGB
	aqua	#00FFFF	0, 255, 255
	cyan	#00FFFF	0, 255, 255
	lightcyan	#E0FFFF	224, 255, 255
	paleturquoise	#AFEEEE	175, 238, 238
	aquamarine	#7FFFD4	127, 255, 212
	turquoise	#40E0D0	64, 224, 208
	mediumturquoise	#48D1CC	72, 209, 204
	darkturquoise	#00CED1	0, 206, 209
	cadetblue	#5F9EA0	95, 158, 160
	steelblue	#4682B4	70, 130, 180
	lightsteelblue	#B0C4DE	176, 196, 222
	powderblue	#B0E0E6	176, 224, 230
	lightblue	#ADD8E6	173, 216, 230
	skyblue	#87CEEB	135, 206, 235
	lightskyblue	#87CEFA	135, 206, 250
	deepskyblue	#00BFFF	0, 191, 255
	dodgerblue	#1E90FF	30, 144, 255
	cornflowerblue	#6495ED	100, 149, 237
	royalblue	#4169E1	65, 105, 225
	blue	#0000FF	0, 0, 255
	mediumblue	#0000CD	0, 0, 205
	darkblue	#00008B	0, 0, 139
	navy	#000080	0, 0, 128
	midnightblue	#191970	25, 25, 112

茶系のカラーコード

色	色名	HEX	RGB
	cornsilk	#FFF8DC	255, 248, 220
	blanchedalmond	#FFEBCD	255, 235, 205
	bisque	#FFE4C4	255, 228, 196
	navajowhite	#FFDEAD	255, 222, 173
	wheat	#F5DEB3	245, 222, 179
	burlywood	#DEB887	222, 184, 135
	tan	#D2B48C	210, 180, 140
	rosybrown	#BC8F8F	188, 143, 143
	sandybrown	#F4A460	244, 164, 96
	goldenrod	#DAA520	218, 165, 32
	darkgoldenrod	#B8860B	184, 134, 11
	peru	#CD853F	205, 133, 63
	chocolate	#D2691E	210, 105, 30
	saddlebrown	#8B4513	139, 69, 19
	sienna	#A0522D	160, 82, 45
	brown	#A52A2A	165, 42, 42
	maroon	#800000	128, 0, 0

白系のカラーコード

色	色名	HEX	RGB
	white	#FFFFFF	255, 255, 255
	snow	#FFFAFA	255, 250, 250
	honeydew	#F0FFF0	240, 255, 240
	mintcream	#F5FFFA	245, 255, 250
	azure	#F0FFFF	240, 255, 255
	aliceblue	#F0F8FF	240, 248, 255
	ghostwhite	#F8F8FF	248, 248, 255
	whitesmoke	#F5F5F5	245, 245, 245
	seashell	#FFF5EE	255, 245, 238
	beige	#F5F5DC	245, 245, 220
	oldlace	#FDF5E6	253, 245, 230
	floralwhite	#FFFAF0	255, 250, 240
	ivory	#FFFFF0	255, 255, 240
	antiquewhite	#FAEBD7	250, 235, 215
	linen	#FAF0E6	250, 240, 230
	lavenderblush	#FFF0F5	255, 240, 245
	mistyrose	#FFE4E1	255, 228, 225

灰・黒系のカラーコード

色	色名	HEX	RGB
	gainsboro	#DCDCDC	220, 220, 220
	lightgray	#D3D3D3	211, 211, 211
	lightgrey	#D3D3D3	211, 211, 211
	silver	#C0C0C0	192, 192, 192
	darkgray	#A9A9A9	169, 169, 169
	darkgrey	#A9A9A9	169, 169, 169
	gray	#808080	128, 128, 128
	grey	#808080	128, 128, 128
	dimgray	#696969	105, 105, 105
	dimgrey	#696969	105, 105, 105
	lightslategray	#778899	119, 136, 153
	lightslategrey	#778899	119, 136, 153
	slategray	#708090	112, 128, 144
	slategrey	#708090	112, 128, 144
	darkslategray	#2F4F4F	47, 79, 79
	darkslategrey	#2F4F4F	47, 79, 79
	black	#000000	0, 0, 0

カラーコード一覧(PDF)ダウンロード

カラーコードの読み方

「#FF8000」のようなHEXは、2けたずつ、赤・緑・青の強さをあらわす16進数です。00がいちばん弱く、FF(10進数の255)がいちばん強くなります。

部分	FF	80	00
色	赤	緑	青
10進数	255	128	0

3つとも00なら黒、3つともFFなら白です。3つが同じ数のときは灰色になります。16進数の数え方は2進数・16進数 対応表にまとめています。

カラーコードの使い方

• HTML・CSS:color: #1B7A43; のように書きます。色名を使って color: tomato; とも書けます。
• Word・Excel・PowerPoint:色の設定の「その他の色」にある「ユーザー設定」で、RGBの数を入れます。入力欄の場所はバージョンによって変わります。
• デザインソフト:色の設定の欄に「#」から始まるHEXを入れます。

よくある質問

白と黒のカラーコードは?

白は #FFFFFF(255, 255, 255)、黒は #000000(0, 0, 0)です。

同じ色なのに色名が2つあるのはなぜ?

gray と grey、aqua と cyan、fuchsia と magenta などは、名前がちがうだけで同じ色です。CSSでどちらも使えます。

印刷すると色がちがって見えるのはなぜ?

画面は光(RGB)で、印刷はインク(CMYK)で色を出すためです。プリンターや紙によっても変わります。

2色を混ぜる欄の計算は?

赤・緑・青の数をそれぞれ平均しています。絵の具を混ぜた色とは同じになりません。

商用利用できる?

家庭・学校・お店などで印刷して使うのは自由です。PDFそのものを再配布・販売することはご遠慮ください。

あわせて使えるテンプレート

無料テンプレート一覧(Excel・Word)を見る →

• カラーピッカー
• 国旗一覧(PDF)
• 和色一覧(PDF)
• 2進数・16進数 対応表(PDF)
• ASCIIコード表(PDF)
• 抵抗カラーコード表(PDF)
• 元素周期表(PDF)
• 単位の換算表(PDF)