個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

CSS3の色名147色(RGB、HEX16進カラーコード併記)

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

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 5

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手な人必見!違和感のある配色を良い感じのカラーパレットに直してくれる「Cohesive Colors」

配色が苦手でも、まとまりのある良い感じのカラーパレットに直してくれるサービスをご紹介します。 便利

記事を読む

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう

記事を読む

カラーを遊べ!16進数のカラーコードのイベンダーゲームでHEX博士だ

カラーを遊べ!16進数カラーコードのイベンダーゲームでHEX博士だ

16進数カラーコードいわゆるHEXをイベンダーゲームで楽しみながら学べる「Hex Invaders」

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む