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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」
CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV
-
2014年夏のトレンドカラー・流行色:Le Cuir発表
2014年春夏の流行色(トレンドカラー)については、前回の記事 「2014年春夏の流行色・トレンド
-
アイコンフォントはもはや常識!アイコンフォントを無料で利用できるサービス ベスト10
好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。
-
UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」
UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」
CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる
-
コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」
イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利
-
Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」
Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま
-
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail
-
これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」
こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利