HTMLの色指定に役立つカラーコード

ウェブ制作の色指定

HTMLやCSSを使ってウェブページを作成する場合、コンピューターが解釈可能なキーワード、16進数、RBG値、HSL値などの形式を使って色指定を行います。基本的には、デジタルで表現可能な全ての色を指定できます。

最初のうちは無闇に色数を増やさずに「文字色」「背景色」「リンク色」「テーマカラー」の4色を軸にカラーバランスを整えていくと良いでしょう。

twitterやinstagramなどSNSでテーマカラーを設定する場合は、16進数(#から始まる6桁の英数字)の値を参照して下さい。

カラーネーム指定

aliceblue
#F0F8FF
antiquewhite
#FAEBD7
aqua
#00FFFF
aquamarine
#7FFFD4
azure
#F0FFFF
beige
#F5F5DC
bisque
#FFE4C4
black
#000000
blanchedalmond
#FFEBCD
blue
#0000FF
blueviolet
#8A2BE2
brass
#B5A462
brown
#A52A2A
burlywood
#DEB887
cadetblue
#5F9EA0
chartreuse
#7FFF00
chocolate
#D2691F
coolcopper
#D98719
copper
#B87333
coral
#FF7F50
cornflowerblue
#42426F
cornflower
#6495ED
cornsilk
#FFF8DC
crimson
#DC143C
cyan
#00FFFF
darkblue
#000088
darkbrown
#5C4033
darkcyan
#008B8B
darkgoldenrod
#B8860B
darkgray
#A9A9A9
darkgreen
#006400
darkkhaki
#BDB76B
darkmagenta
#8B008B
darkolivegreen
#556B2F
darkorange
#FF8C00
darkorchid
#9932CC
darkred
#8B0000
darksalmon
#E9967A
darkseagreen
#8FBC8F
darkslateblue
#483D8B
darkslategray
#2F4F4F
darkturquoise
#00CED1
darkviolet
#9400D3
deeppink
#FF1493
deepskyblue
#00BFFF
dimgray
#696969
dodgerblue
#1E90FF
feldsper
#D19275
firebrick
#B22222
floralwhite
#FFFAF0
forestgreen
#228B22
fuchsia
#FF00FF
gainsboro
#DCDCDC
ghostwhite
#F8F8FF
gold
#FFD700
goldenrod
#DAA520
gray
#808080
green
#008000
greenyellow
#ADFF2F
honeydew
#F0FFF0
hotpink
#FF69B4
indianred
#CD5C5C
indigo
#4B0082
ivory
#FFFFF0
khaki
#F0E68C
lavender
#E6E6FA
lavenderblush
#FFF0F5
lawngreen
#7CFC00
lemonchiffon
#FFFACD
lightblue
#AAD8E6
lightcoral
#F08080
lightcyan
#E0FFFF
lightgoldenrodyellow
#FAFAD2
lightgreen
#90EE90
lightgrey
#D3D3D3
lightpink
#FFB6C1
lightsalmon
#FFA07A
lightseagreen
#20B2AA
lightskyblue
#87CEFA
lightslategray
#778899
lightsteelblue
#B0C4DE
lightyellow
#FFFFE0
lime
#00FF00
limegreen
#32CD32
linen
#FAF0E6
magenta
#FF00FF
maroon
#800000
mediumaquamarine
#66CDAA
mediumblue
#0000CD
mediumorchid
#BA55D3
mediumpurple
#9370DB
mediumseagreen
#3CB371
mediumslateblue
#7B68EE
mediumspringgreen
#00FA9A
mediumturquoise
#48D1CC
mediumvioletred
#C71585
midnightblue
#191970
mintcream
#F5FFFA
mistyrose
#FFE4E1
moccasin
#FFE4B5
navajowhite
#FFDEAD
navy
#000080
oldlace
#FDF5E6
olive
#808000
oliverab
#6B8E23
orange
#FFA500
orangered
#FF4500
orchid
#DA70D6
palegoldenrod
#EEE8AA
palegreen
#98FB98
paleturquoise
#AFEEEE
palevioletred
#DB7093
papayawhip
#FFEFD5
peachpuff
#FFDAB9
peru
#CD853F
pink
#FFC0CB
plum
#DDA0DD
powderblue
#B0D0E6
purple
#800080
red
#FF0000
richblue
#5959AB
rosybrown
#BC8F8F
royalblue
#4169E1
saddlebrown
#8B4513
salmon
#FA8072
sandybrown
#F4A460
seagreen
#2E8B57
seashell
#FFF5EE
sienna
#A0522D
silver
#C0C0C0
skyblue
#87CEEB
slateblue
#6A5ACD
slategray
#708090
snow
#FFFAFA
springgreen
#00FF7F
steelblue
#4682B4
tan
#D2B48C
teal
#008080
thistle
#D8BFD8
tomato
#FF6347
turquoise
#40E0D0
violet
#EE82EE
wheat
#F5DEB3
white
#FFFFFF
whitesmoke
#F5F5F5
yellow
#FFFF00
yellowgreen
#9ACD32
 

Webセーフカラー指定

#000000 #003300 #006600 #009900 #00CC00 #00FF00
#000033 #003333 #006633 #009933 #00CC33 #00FF33
#000066 #003366 #006666 #009966 #00CC66 #00FF66
#000099 #003399 #006699 #009999 #00CC99 #00FF99
#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC
#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF
#330000 #333300 #336600 #339900 #33CC00 #33FF00
#330033 #333333 #336633 #339933 #33CC33 #33FF33
#330066 #333366 #336666 #339966 #33CC66 #33FF66
#330099 #333399 #336699 #339999 #33CC99 #33FF99
#3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC
#3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF
#660000 #663300 #666600 #669900 #66CC00 #66FF00
#660033 #663333 #666633 #669933 #66CC33 #66FF33
#660066 #663366 #666666 #669966 #66CC66 #66FF66
#660099 #663399 #666699 #669999 #66CC99 #66FF99
#6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC
#6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF
#990000 #993300 #996600 #999900 #99CC00 #99FF00
#990033 #993333 #996633 #999933 #99CC33 #99FF33
#990066 #993366 #996666 #999966 #99CC66 #99FF66
#990099 #993399 #996699 #999999 #99CC99 #99FF99
#9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC
#9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF
#CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00
#CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33
#CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66
#CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99
#CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC
#CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF
#FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33
#FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66
#FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99
#FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF