カラーネーム と カラーコード | |||
最終更新：August-2010 | |||
| |||
１．HTMLで使用するカラーネームとカラーコード | |||
| 2008/8 現在で使用されている、１４７色のカラーネームです。これら以外の色は、６桁（１６進）のカラーコード（#000000～#ffffff）で指定します。上位２桁が赤、中央の２桁が緑、下位２桁が青です。 | |||
「※」マークのカラーネームは、ブラウザによっては対応していない場合があります。
この色は、カラーコードで指定するようにして下さい。 | |||
「☆」マークのカラーネームは、「標準 １６色(基本色)」です。 この色は、古いブラウザや携帯でもカラーネームを解釈できます。 | |||
| aliceblue | #f0f8ff | lightgreen | #90ee90 | ||
| antiquewhite | #faebd7 | lightgrey | #d3d3d3 | ||
| aqua ☆ | #00ffff | lightpink | #ffb6c1 | ||
| aquamarine | #7fffd4 | lightsalmon | #ffa07a | ||
| azure | #f0ffff | lightseagreen | #20b2aa | ||
| beige | #f5f5dc | lightskyblue | #87cefa | ||
| bisque | #ffe4c4 | lightslategray | #778899 | ||
| black ☆ | #000000 | lightsteelblue | #b0c4de | ||
| blanchedalmond | #ffebcd | lightyellow | #ffffe0 | ||
| blue ☆ | #0000ff | lime ☆ | #00ff00 | ||
| blueviolet | #8a2be2 | limegreen | #32cd32 | ||
| brass ※ | #b5a642 | linen | #faf0e6 | ||
| brown | #a52a2a | magenta | #ff00ff | ||
| burlywood | #deb887 | maroon ☆ | #800000 | ||
| cadetblue | #5f9ea0 | mediumaquamarine | #66cdaa | ||
| chartreuse | #7fff00 | mediumblue | #0000cd | ||
| chocolate | #d2691e | mediumorchid | #ba55d3 | ||
| coolcopper ※ | #d98719 | mediumpurple | #9370db | ||
| copper ※ | #bf00df | mediumseagreen | #3cb371 | ||
| coral | #ff7f50 | mediumslateblue | #7b68ee | ||
| cornflower ※ | #bfefdf | mediumspringgreen | #00fa9a | ||
| cornflowerblue | #6495ed | mediumturquoise | #48d1cc | ||
| cornsilk | #fff8dc | mediumvioletred | #c71585 | ||
| crimson | #dc143c | midnightblue | #191970 | ||
| cyan | #00ffff | mintcream | #f5fffa | ||
| darkblue | #00008b | mistyrose | #ffe4e1 | ||
| darkbrown ※ | #da0b00 | moccasin | #ffe4b5 | ||
| darkcyan | #008b8b | navajowhite | #ffdead | ||
| darkgoldenrod | #b8860b | navy ☆ | #000080 | ||
| darkgray | #a9a9a9 | oldlace | #fdf5e6 | ||
| darkgreen | #006400 | olive ☆ | #808000 | ||
| darkkhaki | #bdb76b | olivedrab | #6b8e23 | ||
| darkmagenta | #8b008b | orange | #ffa500 | ||
| darkolivegreen | #556b2f | orangered | #ff4500 | ||
| darkorange | #ff8c00 | orchid | #da70d6 | ||
| darkorchid | #9932cc | palegoldenrod | #eee8aa | ||
| darkred | #8b0000 | palegreen | #98fb98 | ||
| darksalmon | #e9967a | paleturquoise | #afeeee | ||
| darkseagreen | #8fbc8f | palevioletred | #db7093 | ||
| darkslateblue | #483d8b | papayawhip | #ffefd5 | ||
| darkslategray | #2f4f4f | peachpuff | #ffdab9 | ||
| darkturquoise | #00ced1 | peru | #cd853f | ||
| darkviolet | #9400d3 | pink | #ffc0cb | ||
| deeppink | #ff1493 | plum | #dda0dd | ||
| deepskyblue | #00bfff | powderblue | #b0e0e6 | ||
| dimgray | #696969 | purple ☆ | #800080 | ||
| dodgerblue | #1e90ff | red ☆ | #ff0000 | ||
| feldsper ※ | #fed0e0 | richblue ※ | #0cb0e0 | ||
| firebrick | #b22222 | rosybrown | #bc8f8f | ||
| floralwhite | #fffaf0 | royalblue | #4169e1 | ||
| forestgreen | #228b22 | saddlebrown | #8b4513 | ||
| fuchsia ☆ | #ff00ff | salmon | #fa8072 | ||
| gainsboro | #dcdcdc | sandybrown | #f4a460 | ||
| ghostwhite | #f8f8ff | seagreen | #2e8b57 | ||
| gold | #ffd700 | seashell | #fff5ee | ||
| goldenrod | #daa520 | sienna | #a0522d | ||
| gray ☆ | #808080 | silver ☆ | #c0c0c0 | ||
| green ☆ | #008000 | skyblue | #87ceeb | ||
| greenyellow | #adff2f | slateblue | #6a5acd | ||
| honeydew | #f0fff0 | slategray | #708090 | ||
| hotpink | #ff69b4 | snow | #fffafa | ||
| indianred | #cd5c5c | springgreen | #00ff7f | ||
| indigo | #4b0082 | steelblue | #4682b4 | ||
| ivory | #fffff0 | tan | #d2b48c | ||
| khaki | #f0e68c | teal ☆ | #008080 | ||
| lavender | #e6e6fa | thistle | #d8bfd8 | ||
| lavenderblush | #fff0f5 | tomato | #ff6347 | ||
| lawngreen | #7cfc00 | turquoise | #40e0d0 | ||
| lemonchiffon | #fffacd | violet | #ee82ee | ||
| lightblue | #add8e6 | wheat | #f5deb3 | ||
| lightcoral | #f08080 | white ☆ | #ffffff | ||
| lightcyan | #e0ffff | whitesmoke | #f5f5f5 | ||
| lightgoldenrodyellow | #fafad2 | yellow ☆ | #ffff00 | ||
| yellowgreen | #9acd32 |
| |||
２．CSS独自の指定方法 | |||
| CSSで使用するカラーコードは、HTMLと同じ指定方法と、CSS独自の指定方法があります。 |
◆HTMLと同じ指定方法
| #ff0000 | #で始まる6桁のカラーコードで指定 |
| blue | red、green、whiteといったカラーネームで指定 |
.sample1 { color: #ff0000; } .sample2 { color: red; }
※ 上記の記述例は、いずれも文字色が赤になります。
◆CSS独自の指定方法
| #f00 | #で始まる3桁のカラーコードで指定 |
| rgb(255,0,0) | rgb( ) による指定 （0～255の10進数） |
| rgb(100%,0%,0%) | rgb( ) による指定 （0%～100%で指定） |
.sample3 { color: #f00; }
.sample4 { color: rgb(255,0,0); }
.sample5 { color: rgb(100%,0%,0%); }
.sample5 { color: rgb(100%,0%,0%); }
※ 上記の記述例は、いずれも文字色が赤になります。
◆三原色などの指定例
| 6桁ｺｰﾄﾞ | ｶﾗｰｺｰﾄﾞ | 3桁ｺｰﾄﾞ | 10進ｺｰﾄﾞ | ％表示 | |
| ● | #ff0000 | red | #f00 | rgb(255,0,0) | rgb(100%,0%,0%) |
| ● | #00ff00 | lime | #0f0 | rgb(0,255,0) | rgb(0%,100%,0%) |
| ● | #0000ff | blue | #00f | rgb(0,0,255) | rgb(0%,0%,100%) |
| ○ | #ffffff | white | #fff | rgb(255,255,255) | rgb(100%,100%,100%) |
| ● | #000000 | black | #000 | rgb(0,0,0) | rgb(0%,0%,0%) |
| |||
３．カラー指定のポイント | |||
| 色をカラーコードで指定する場合は、次の「基本色」や「中間色」を参考にして、設定して下さい。色の日本語表記は難しいので、( ) 内にカラーネームも併記しました。
なお、日本語訳は、スピリッツ英和辞典（1987/3/10版）です。かなり古い辞書ですが、ご容赦下さい。 |
基本16色 白(white)：#ffffff、赤(red)：#ff0000、ライム(lime)：#00ff00、青(blue)：#0000ff、
黄色(yellow)：#ffff00、赤紫色･マゼンタ(fuchsia,magenta) 注：#ff00ff、
水色(aqua)：#00ffff、黒(black)：#000000、えび茶(栗)色(maroon)：#800000、
緑(green)：#008000、紺色(navy)：#000080、オリーブ(olive)：#808000、
紫色(purple)：#800080、青緑色(teal)：#008080、灰色（gray)：#808080
銀色(silver)：#c0c0c0、《参考 金色（gold)：#ffd700》
[注：マゼンタはプリンタのインクに使われている呼び名で、通称ピンク色です。
カラーネームには pink も有りますが文字色として使う場合は不向きです。
文字色を<span style="color:pink;">と指定した場合、この色 になります。]
黄色(yellow)：#ffff00、赤紫色･マゼンタ(fuchsia,magenta) 注：#ff00ff、
水色(aqua)：#00ffff、黒(black)：#000000、えび茶(栗)色(maroon)：#800000、
緑(green)：#008000、紺色(navy)：#000080、オリーブ(olive)：#808000、
紫色(purple)：#800080、青緑色(teal)：#008080、灰色（gray)：#808080
銀色(silver)：#c0c0c0、《参考 金色（gold)：#ffd700》
[注：マゼンタはプリンタのインクに使われている呼び名で、通称ピンク色です。
カラーネームには pink も有りますが文字色として使う場合は不向きです。
文字色を<span style="color:pink;">と指定した場合、この色 になります。]
中間色 ブルーバイオレット(blueViolet)：#8a2be2、チョコレート(chocolate)：#d2691e、
オレンジ(orange)：#ffa500、プラム(plum)：#dda0dd、サーモン(salmon)：#fa8072、
トマト(tomato)：#ff6347、スミレ色(violet)：#ee82ee、黄緑色(yellowGreen)：#9acd32、
灰・シルバー系：#a0a0a0 のように 赤・緑・青の値を同じにします。
オレンジ(orange)：#ffa500、プラム(plum)：#dda0dd、サーモン(salmon)：#fa8072、
トマト(tomato)：#ff6347、スミレ色(violet)：#ee82ee、黄緑色(yellowGreen)：#9acd32、
灰・シルバー系：#a0a0a0 のように 赤・緑・青の値を同じにします。
中間色の作り方
①色を薄くする場合：基本色で ff や 80 となっている値を固定し、00 となっている所の値を大きくします。80 となっている場合はその値を超えないようにして下さい。
②色を濃くする場合：薄くする場合の逆になります。基本色で 00 となっている値を固定し、 ff や 80 となっている所の値を小さくします。
③中間色を変える場合：赤・緑・青の配分比を固定し、赤・緑・青の値を大きく（薄い色）したり、小さく（濃い色）したりします。配分比を変えると「色合い」も変わります。ただし、トマトは #ff6347 となっていますが、これを #ff6048 としても、違いを認識できる人はいません。色を濃く(薄く)する場合は、赤・緑・青の一桁目の値を 0,8 パターンや 0,4,8,c パターンに変えると、計算が楽になります。
特定の色(A)から別の色(B)に段階的に変える場合
曲線を「滑らかに描く」場合や「ふくらみの有る」リンクボタンを作る場合などに使われる手法で、Ａ色とＢ色の値を赤・緑・青の三要素に分解し、それぞれを比例配分します。この方法は、COREL Photo Paint などのイメージ編集ソフトで、画像を拡大するときに使われる手法でも有ります。画像を縮小するときは、平均値（1/3にするときは３点の平均）が充てられます。
※
ペイント(Microsoft社)の場合は、画像を拡大しても中間色を作りません。
次の表で比例配分の実例を示しましたが、色が段階的に変わって行く様子を分かり易くするため、色調差を大きく取っています。
曲線を「滑らかに描く」場合や「ふくらみの有る」リンクボタンを作る場合などに使われる手法で、Ａ色とＢ色の値を赤・緑・青の三要素に分解し、それぞれを比例配分します。この方法は、COREL Photo Paint などのイメージ編集ソフトで、画像を拡大するときに使われる手法でも有ります。画像を縮小するときは、平均値（1/3にするときは３点の平均）が充てられます。
※
ペイント(Microsoft社)の場合は、画像を拡大しても中間色を作りません。
次の表で比例配分の実例を示しましたが、色が段階的に変わって行く様子を分かり易くするため、色調差を大きく取っています。
| Ａ色からＢ色の間を三段階で変える場合
( )は、10進数表記 | |||||||||||
| 三要素 | Ａ色 | １段目 | ２段目 | ３段目 | Ｂ色 | ||||||
| code | 表示 | code | 表示 | code | 表示 | code | 表示 | code | 表示 | ||
| 赤(R) | 00 (0) | 2a (42) | 54 (84) | 7e (126) | a8 (168) | ||||||
| 緑(G) | 88 (136) | a4 (164) |
c0 (192) | dc (220) | f8 (248) | ||||||
| 青(B) | 00 (0) | 3a (58) |
74 (116) | ae (174) | e8 (232) | ||||||