CSSのプロパティで色を指定する方法について掲載
W3C CSSカラーモジュールレベル3
CSS Color Module Level 3
www.w3.org
W3C CSSカラーモジュールレベル4
CSS Color Module Level 4
www.w3.org
W3C CSSカラーモジュールレベル5
CSS Color Module Level 5
www.w3.org
基本色のキーワード
要素の色を指定するキーワードは16色の基本色が使用できます。さらに147色のカラーネームが定義されています。
※大文字／小文字は区別されない
| color | キーワード | 色 | rgb | 16進数 |
|---|---|---|---|---|
| black | 黒色 | rgb(0,0,0) | #000000 | |
| white | 白色 | rgb(255,255,255) | #ffffff | |
| silver | 銀色 | rgb(192,192,192) | #c0c0c0 | |
| gray | 灰色 | rgb(128,128,128) | #808080 | |
| red | 赤色 | rgb(255,0,0) | #ff0000 | |
| maroon | 赤茶色 | rgb(128,0,0) | #800000 | |
| purple | 紫 | rgb(128,0,128) | #800080 | |
| fuchsia | 赤紫色 | rgb(255,0,255) | #ff00ff | |
| green | 緑色 | rgb(0,128,0) | #008000 | |
| lime | 黄緑色 | rgb(0,255,0) | #00ff00 | |
| yellow | 黄色 | rgb(255,255,0) | #ffff00 | |
| olive | 暗い黄色 | rgb(128,128,0) | #808000 | |
| blue | 青色 | rgb(0,0,255) | #0000ff | |
| navy | 濃い青色 | rgb(0,0,128) | #000080 | |
| aqua | 水色 | rgb(0,255,255) | #00ffff | |
| teal | 青緑色 | rgb(0,128,128) | #008080 | |
| transparent | 完全な透明 | |||
| currentcolor | colorプロパティで指定されている色を参照 | |||
RGBモデル
RGBモデルは、赤（Red）、緑（Green）、青（Blue）の３つの値の組み合わせで色を指定します。「関数記法」と「16進記法」の２つの記法があります。
| 指定方法 | 説明 | 指定例 |
|---|---|---|
| rgb() | 関数型の値です。０～２５５までの数値、また%値をカンマ（,）で区切って３つ指定します。 rgb（255,0,0）、rgb（100%,0%,0%）は赤になります。 | color:rgb(255,255,0) color:rgb(100%,100%,0%) |
| rgba() | 関数型の値です。rgb()に加えて、４つ目の値で透明度を指定できます。0が完全な透明で１が完全な不透明。 rgba(255,0,0,0.5)は透明度５０％の赤です | color:rgba(255,255,0,0.5) color:rgba(100%,100%,0%,0.5) |
| #RRGGBB | シャープ（#）に続けて16進数（0～f）で６つの数値を指定します。「#ff0000」は赤です。 | |
| #RGB | シャープ（#）に続けて３つの16進数を指定します。3桁の数値は2桁ずつ同値の「#RRGGBB」形式に変換されます。 「#f00」は「#ff0000」となり赤になります。 |
HSLモデル
HSLモデルは色の種類である「色相」（Hue）、鮮やかさである「彩度」（Saturation）、明るさである「明度」（Lightness）の３つの値の組み合わせで色を指定します。
| 指定方法 | 説明 | 指定例 |
|---|---|---|
| hsl() | 関数型の値です。0～360までの数値で色相を、%値で彩度、明度をそれぞれカンマ（,）で区切って指定します。 | color:hsl(60,100%,50%) |
| hsla() | 関数型の値です。hsl()に加えて、４つ目の値で透明度を指定できます。 0が完全な透明で１が完全な不透明です。 | color:hsla(60,100%,50%,0.5) |
RGBAやHSLAの数値（透明度を表すアルファ値）対応していないブラウザでは、RGBAやHSLAによる色の指定は無視されます。
拡張カラーキーワード
| color | カラー名 | 和名 | rgb | 16進 |
|---|---|---|---|---|
| aliceblue | アリスブルー | 240,248,255 | #F0F8FF | |
| antiquewhite | アンティークホワイト | 250,235,215 | ＃FAEBD7 | |
| aqua | アクア | 0,255,255 | ＃00FFFF | |
| aquamarine | アクアマリン | 127,255,212 | ＃7FFFFD4 | |
| azure | 紺碧 | 240,255,255 | ＃F0FFFF | |
| beige | ベージュ | 245,245,220 | ＃F5F5DC | |
| bisque | ビスク | 255,228,196 | ＃FFE4C4 | |
| black | 黒 | 0,0,0 | #000000 | |
| blanchedalmond | ブランシェダルモンド | 255,235,205 | #FFEBCD | |
| blue | 青 | 0,0,255 | ＃0000FF | |
| blueviolet | 青紫色 | 138,43,226 | ＃8A2BE2 | |
| brown | 茶色 | 165,42,42 | ＃A52A2A | |
| burlywood | バーリー・ウッド | 222,184,135 | ＃DEB887 | |
| cadetblue | カデット・ブルー | 95,158,160 | ＃5F9EA0 | |
| chartreuse | シャルトリューズ | 127,255,0 | ＃7FFF00 | |
| chocolate | チョコレート | 210,105,30 | #D2691E | |
| coral | コーラル | 255,127,80 | #FF7F50 | |
| cornflowerblue | コーンフラワーブルー | 100,149,237 | #6495ED | |
| cornsilk | トウモロコシの毛 | 255,248,220 | #FFF8DC | |
| crimson | 真紅 | 220,20,60 | #DC143C | |
| cyan | シアン | 0,255,255 | #00FFFF | |
| darkblue | 濃紺 | 0,0,139 | #00008B | |
| darkcyan | ダーク・シアン | 0,139,139 | #008B8B | |
| darkgoldenrod |
ダーク・ゴールデン ロッド |
184,134,11 | #B8860B | |
| darkgray | 暗灰色 | 169,169,169 | #A9A9A9 | |
| darkgreen | 濃い緑色 | #006400 | 0,100,0 | |
| darkgrey | 濃い灰色 | #A9A9A9 | 169,169,169 | |
| darkkhaki | ダーク・カーキ | #BDB76B | 189,183,107 | |
| darkmagenta | ダーク・マゼンタ | #8B008B | 139,0,139 | |
| darkolivegreen |
ダーク・オリーブ グリーン |
#556B2F | 85,107,47 | |
| darkorange | ダークオレンジ | #FF8C00 | 255,140,0 | |
| darkorchid | ダーク・オーキッド | #9932CC | 153,50,204 | |
| darkred | 暗赤色 | #8B0000 | 139,0,0 | |
| darksalmon | ダークサーモン | #E9967A | 233,150,122 | |
| darkseagreen |
ダークシー グリーン |
#8FBC8F | 143,188,143 | |
| darkslateblue | ダークスレート・ブルー | #483D8B | 72,61,139 | |
| darkslategray | ダークスレート・グレイ | #2F4F4F | 47,79,79 | |
| darkturquoise | ダークターコイズ | #00CED1 | 0,206,209 | |
| darkviolet | ダークバイオレット | #9400D3 | 148,0,211 | |
| deeppink | 深いピンク | #FF1493 | 255,20,147 | |
| deepskyblue | ディープスカイブルー | #00BFFF | 0,191,255 | |
| dimgray | 薄暗い灰色 | #696969 | 105,105,105 | |
| dodgerblue | ドジャーブルー | #1E90FF | 30,144,255 | |
| firebrick | 耐火レンガ | #B22222 | 178,34,34 | |
| floralwhite | フローラルホワイト | #FFFAF0 | 255,250,240 | |
| forestgreen | フォレストグリーン | #228B22 | #228B22 | |
| fuchsia | フクシア | #FF00FF | 255,0,255 | |
| gainsboro | ゲインズボロ | #DCDCDC | 220,220,220 | |
| ghostwhite | ゴースト・ホワイト | #F8F8FF | 248,248,255 | |
| gold | 金 | #FFD700 | 255,215,0 | |
| goldenrod | アキノキリンソウ | #DAA520 | 218,165,32 | |
| gray | グレー | #808080 | 128,128,128 | |
| green | 緑 | #008000 | 0,128,0 | |
| greenyellow | 黄緑 | #ADFF2F | 173,255,47 | |
| grey | グレー | #808080 | 128,128,128 | |
| honeydew | 甘露 | #F0FFF0 | 240,255,240 | |
| hotpink | ホトピンク | #FF69B4 | 255,105,180 | |
| indianred | インディアンレッド | #CD5C5C | 205,92,92 | |
| indigo | インデゴ | #4B0082 | 75,0,130 | |
| ivory | 象牙 | #FFFFF0 | 255,255,240 | |
| khaki | カーキ | #F0E68C | 240,230,140 | |
| lavender | ラベンダー | #E6E6FA | 230,230,250 | |
| lavenderblush | ラベンダーブラッシュ | #FFF0F5 | 255,240,245 | |
| lawngreen | ローングリーン | #7CFC00 | 124,252,0 | |
| lemonchiffon | レモンシフォン | #FFFACD | 255,250,205 | |
| lightblue | ライトブルー | #ADD8E6 | 173,216,230 | |
| lightcoral | ライトコーラル | #F08080 | 240,128,128 | |
| lightcyan | ライト・シアン | #E0FFFF | 224,255,255 | |
| lightgoldenrodyellow |
ライトゴールデン ロッドイエロー |
#FAFAD2 | 250,250,210 | |
| lightgray | ライトグレー | #D3D3D3 | 211,211,211 | |
| lightgreen | ライトグリーン | #90EE90 | 144,238,144 |
| color | カラー名 | 和名 | rgb | 16進 |
|---|---|---|---|---|
| lightpink | ライトピンク | 255,182,193 | #FFB6C1 | |
| lightsalmon | ライトサーモン | 255,160,122 | #FFA07A | |
| lightseagreen | ライトシーグリーン | 32,178,170 | #20B2AA | |
| lightskyblue | ライトスカイブルー | 135,206,250 | #87CEFA | |
| lightslategrey | ライトスレートグレー | 119,136,153 | #778899 | |
| lightsteelblue | ライトスチールブルー | 176,196,222 | #B0C4DE | |
| lightyellow | 淡黄色 | 255,255,224 | #FFFFE0 | |
| lime | ライム | 0,255,0 | #00FF00 | |
| limegreen | ライムグリーン | 50,205,50 | #32CD32 | |
| linen | リネン | 250,240,230 | #FAF0E6 | |
| magenta | 赤紫色 | 255,0,255 | #FF00FF | |
| maroon | あずき色 | 128,0,0 | #800000 | |
| mediumaquamarine | ミディアムアクアマリン | 102,205,170 | #66CDAA | |
| mediumblue | ミディアムブルー | 0,0,205 | #0000CD | |
| mediumorchid | ミディアムオーキッド | 186,85,211 | #BA55D3 | |
| mediumpurple | ミディアムパープル | 147,112,219 | #9370DB | |
| mediumseagreen | ミディアムシーグリーン | 60,179,113 | #3CB371 | |
| mediumslateblue | ミディアムスレートブルー | 123,104,238 | #7B68EE | |
| mediumspringgreen |
ミディアムスプリング グリーン |
0,250,154 | #00FA9A | |
| mediumturquoise | ミディアムターコイズ | 72,209,204 | #48D1CC | |
| mediumvioletred |
ミディアムバイオレット レッド |
199,21,133 | #C71585 | |
| midnightblue | ミッドナイトブルー | 25,25,112 | #191970 | |
| mintcream | ミントクリーム | 245,255,250 | #F5FFFA | |
| mistyrose | ミスティローズ | 255,228,225 | #FFE4E1 | |
| moccasin | モカシン | 255,228,181 | #FFE4B5 | |
| navajowhite | ナバホ・ホワイト | 255,222,173 | #FFDEAD | |
| navy | 海軍 | 0,0,128 | #000080 | |
| oldlace | サイドレース | 253,245,230 | #FDF5E6 | |
| olive | オリーブ | 128,128,0 | #808000 | |
| olivedrab | オリーブドラブ | 107,142,35 | #6B8E23 | |
| orange | オレンジ | 255,165,0 | #FFA500 | |
| orangered | オレンジレッド | 255,69,0 | #FF4500 | |
| orchid | 蘭 | 218,112,214 | #DA70D6 | |
| palegoldenrod | 淡いゴールデンロッド | 238,232,170 | #EEE8AA | |
| palegreen | 薄緑色 | 152,251,152 | #98FB98 | |
| paleturquoise | 淡いターコイズ | 175,238,238 | #AFEEEE | |
| palevioletred | 淡い紫 | 219,112,147 | #DB7093 | |
| papayawhip | パパイヤ・ホイップ | 255,239,213 | #FFEFD5 | |
| peachpuff | ピーチパフ | 255,218,185 | #FFDAB9 | |
| peru | ペルー | 205,133,63 | #CD853F | |
| pink | ピンク | 255,192,203 | #FFC0CB | |
| plum | 梅 | 221,160,221 | #DDA0DD | |
| powderblue | パウダーブルー | 176,224,230 | #B0E0E6 | |
| purple | 紫 | 128,0,128 | #800080 | |
| red | 赤 | 255,0,0 | #FF0000 | |
| rosybrown | ロージー・ブラウン | 188,143,143 | #BC8F8F | |
| royalblue | ロイヤルブルー | 65,105,225 | #4169E1 | |
| saddlebrown | サドルブラウン | 139,69,19 | #8B4513 | |
| salmon | サーモン | 250,128,114 | #FA8072 | |
| sandybrown | サンディブラウン | 244,164,96 | #F4A460 | |
| seagreen | 海の緑 | 46,139,87 | #2E8B57 | |
| seashell | 貝殻 | 255,245,238 | #FFF5EE | |
| sienna | シエナ | 160,82,45 | #A0522D | |
| silver | 銀 | 192,192,192 | #C0C0C0 | |
| skyblue | 空 | 135,206,235 | #87CEEB | |
| slateblue | スレートブルー | 106,90,205 | #6A5ACD | |
| slategrey | スレートグレイ | 112,128,144 | #708090 | |
| snow | 雪 | 255,250,250 | #FFFAFA | |
| springgreen | スプリンググリーン | 0,255,127 | #00FF7F | |
| steelblue | スティールブルー | 70,130,180 | #4682B4 | |
| tan | 日焼け | 210,180,140 | #D2B48C | |
| teal | ティール | 0,128,128 | #008080 | |
| thistle | アザミ | 216,191,216 | #D8BFD8 | |
| tomato | トマト | 255,99,71 | #FF6347 | |
| turquoise | ターコイズ | 64,224,208 | #40E0D0 | |
| violet | バイオレット | 238,130,238 | #EE82EE | |
| wheat | 小麦 | 245,222,179 | #F5DEB3 | |
| white | 白い | 255,255,255 | #FFFFFF | |
| whitesmoke | 白い煙 | 245,245,245 | #F5F5F5 | |
| yellow | 黄色 | 255,255,0 | #FFFF00 | |
| yellowgreen | 黄緑 | 154,205,50 | #9ACD32 |
システムカラーによる指定
CSS3では非推奨
スタイルシートでは、WindowsやMacOSのシステムカラーを指定することができます。ページの閲覧者にOS環境に合わせた色を見せることができます。
| ActiveBorder | アクティブなウィンドウの枠の色 |
| ActiveCaption | アクティブなウィンドウのタイトルバーの色 |
| AppWorkspace | アプリケーション内のウィンドウの背景色 |
| BackGround | デスクトップの背景色 |
| ButtonFace | 立体的なボタンの表面の色 |
| ButtonHighlight | 立体的なボタンの光のあたっている面の色 |
| ButtonShadow | 立体的なボタンの影になってる面の色 |
| ButtonText | 立体的なボタンのテキストの色 |
| CaptionText | タイトルバーのテキストの色 |
| GrayText | 選択できないテキストの色 |
| Highlight | 選択している状態の色 |
| HighlightText | 選択しているテキストの色 |
| InactiveBorder | アクティブでないウィンドウの枠の色 |
| InactiveCaption | アクティブでないウィンドウのタイトルバーの色 |
| InactiveCaptionText | アクティブでないウィンドウのタイトルバーのテキストの色 |
| InfoBackground | ツールチップの背景色 |
| InfoText | ツールチップのテキストの色 |
| Menu | メニューの背景色 |
| MenuText | メニューのテキストの色 |
| Scrollbar | スクロールバーの色 |
| ThreeDDarkShadow | 立体的に表示される部分の暗い影の色 |
| ThreeDFace | 立体的に表示される部分の表面の色 |
| ThreeDHighlight | 立体的に表示される部分の光の当たっている面の色 |
| ThreeDLightShadow | 立体的に表示される部分の明るい影の色 |
| ThreeDShadow | 立体的に表示される部分の影の色 |
| Window | ウィンドウの背景色 |
| WindowFrame | ウィンドウのフレーム色 |
| WindowText | ウィンドウのテキストの色 |
コメント