2014/11/04
CSS3の色名147色(RGB、HEX16進カラーコード併記)
CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。
私は知りませんでした。
CSS2までのころは、たしか17色ぐらいしか使えず、まったく使うことがなかったのですが、CSS3になってからは147色の色名(「red」など欧文の色名)を使えるようになったようです。
X11 colorsという色名のセットと、グレースケールの色名を加えて147色です。
CSSで色を指定するとき、その色名で指定する方法もありますが、ほかに、#で始まる6ケタの16進カラーコード(HEXコード)、RGB(255, 255, 255)の2つの方法があります。
こっちのほうがポピュラーですよね。
それはさておき、今回は自分へのメモを兼ねて色名をまとめることにしました。
なぜかというと、HEXやRGBで書かれていても、よほど有名なわかりやすい色でないと、想像もできないし、結局ブラウザで確認するしかないからです。
色名のほうが、やっぱりわかりやすいですよね。
勉強にもなりますし。
そこで、色名と、HEXコード、RGB値と、実際のカラー=色見本をまとめてみました。
私以外に役立つかどうかはまったく不明ですが、ご参考になれば幸いです。
CSS3色見本147色
| 色名 | 16進カラーコード(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 | |
| 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 | |
| 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 | |
| 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 | |
| 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 | |
| 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 | |
| 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ダークオリーブグリーン | #808000 | 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 | |
| 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 | |
| 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 | |
| peruvペルー | #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 | |
| 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 | |
| gainsboroゲインズボロ | #dcdcdc | 220 220 220 | |
| lightgreyライトグレー | #d3d3d3 | 211 211 211 | |
| silverシルバー | #c0c0c0 | 192 192 192 | |
| darkgrayダークグレー | #a9a9a9 | 169 169 169 | |
| grayグレー | #808080 | 128 128 128 | |
| dimgrayディムグレー | #696969 | 105 105 105 | |
| lightslategrayライトスレートグレー | #778899 | 119 136 153 | |
| slategrayスレートグレー | #708090 | 112 128 144 | |
| darkslategrayダークスレートグレー | #2f4f4f | 47 79 79 | |
| blackブラック | #000000 | 0 0 0 |
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」
CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co
-
-
ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」
CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav
-
-
コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
ロイヤルティーフリー素材販売サイトShutterstockが2015年のカラートレンドを分析
高品質なロイヤルティーフリー素材販売サイトShutterstockが2015年のカラートレンドを分析
-
-
プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11
日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう
-
-
40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」
最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー
-
-
スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25
jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。
-
-
2014年春夏の流行色・トレンドカラーをLenzing(レンチング)社が提示
2014年春夏の流行色(トレンドカラー)については、前回の記事「2014年春夏の流行色・トレンドカラ
