CSSの基本 ~ 文字色を指定する ~(色見本、カラーコード、カラーネーム)
~ 文字色の指定方法 ~
文字の色を指定するには「color」を使用します。色の指定方法は、色コード3桁(#xxx)、色コード6桁(#xxxxxx)、カラーネーム(red,blue,green…など)、RGB指定(rgb(xxx,xxx,xxx))です。
サンプル
.sample {
color: #F00; ※色コード3桁で指定
color: #00FF00; ※色コード6桁で指定
color: rgb(200,150,100); ※RGBで指定
color: white ※カラーネームで指定
}
カラー対応表(カラーネーム・色の指定・色見本)
セレクタにはいろいろな種類がありますが、よく使うのは以下のセレクタです。
カラーネーム | 色の指定方法 | 色見本 |
ホワイト | white #FFFFFF rgb(255,255,255) |
|
ホワイトスモーク | whitesmoke #F5F5F5 rgb(245,245,245) |
|
ゴーストホワイト | ghostwhite #F8F8FF rgb(248,248,255) |
|
アリスブルー | aliceblue #F0F8FF rgb(240,248,255) |
|
ラベンダー | lavender #E6E6FA rgb(230,230,250) |
|
アジュール | azure #F0FFFF rgb(240,255,255) |
|
ライトシアン | lightcyan #E0FFFF rgb(224,255,255) |
|
ミントクリーム | mintcream #F5FFFA rgb(245,255,250) |
|
ハニーデュー | honeydew #F0FFF0 rgb(240,255,240) |
|
アイボリー | ivory #FFFFF0 rgb(255,255,240) |
|
ベージュ | beige #F5F5DC rgb(245,245,220) |
|
ライトイエロー | lightyellow #FFFFE0 rgb(255,255,224) |
|
ライトゴールデンロッドイエロー | lightgoldenrodyellow #FAFAD2 rgb(250,250,210) |
|
レモンシフォン | lemonchiffon #FFFACD rgb(255,250,205) |
|
フローラルホワイト | floralwhite #FFFAF0 rgb(255,250,240) |
|
オールドレース | oldlace #FDF5E6 rgb(253,245,230) |
|
コーンシルク | cornsilk #FFF8DC rgb(255,248,220) |
|
パパイアホワイト | papayawhite #FFEFD5 rgb(255,239,213) |
|
ブランチドアーモンド | blanchedalmond #FFEBCD rgb(255,235,205) |
|
ビスク | bisque #FFE4C4 rgb(255,228,196) |
|
スノー | snow #FFFAFA rgb(255,250,250) |
|
リネン | linen #FAF0E6 rgb(250,240,230) |
|
アンティークホワイト | antiquewhite #FAEBD7 rgb(250,235,215) |
|
シーシェル | seashell #FFF5EE rgb(255,245,238) |
|
ラベンダーブラシ | lavenderblush #FFF0F5 rgb(255,240,245) |
|
ミスティーローズ | mistyrose #FFE4E1 rgb(255,228,225) |
|
ゲンズボロ | gainsboro #DCDCDC rgb(220,220,220) |
|
ライトグレー | lightgray #D3D3D3 rgb(211,211,211) |
|
ライトスチールブルー | lightsteelblue #B0C4DE rgb(176,196,222) |
|
ライトブルー | lightblue #ADD8E6 rgb(173,216,230) |
|
ライトスカイブルー | lightskyblue #87CEFA rgb(135,206,250) |
|
パウダーブルー | powderblue #B0E0E6 rgb(176,224,230) |
|
ペールターコイズ | paleturquoise #AFEEEE rgb(175,238,238) |
|
スカイブルー | skyblue #87CEEB rgb(135,206,235) |
|
ミディアムアクアマリン | mediumaquamarine #66CDAA rgb(102,205,170) |
|
アクアマリン | aquamarine #7FFFD4 rgb(127,255,212) |
|
ペールグリーン | palegreen #98FB98 rgb(152,251,152) |
|
ライトグリーン | lightgreen #90EE90 rgb(144,238,144) |
|
カーキ | khaki #F0E68C rgb(240,230,140) |
|
ペールゴールデンロッド | palegoldenrod #EEE8AA rgb(238,232,170) |
|
モカシン | moccasin #FFE4B5 rgb(255,228,181) |
|
ナバホホワイト | navajowhite #FFDEAD rgb(255,222,173) |
|
ピーチパフ | peachpuff #FFDAB9 rgb(255,218,185) |
|
ウィート | wheat #F5DEB3 rgb(245,222,179) |
|
ピンク | pink #FFC0CB rgb(255,192,203) |
|
ライトピンク | lightpink #FFB6C1 rgb(255,182,193) |
|
シスル | thistle #D8BFD8 rgb(216,191,216) |
|
プラム | plum #DDA0DD rgb(221,160,221) |
|
シルバー | silver #C0C0C0 rgb(192,192,192) |
|
ダークグレー | darkgray #A9A9A9 rgb(169,169,169) |
|
ライトスレートグレー | lightslategray #778899 rgb(119,136,153) |
|
スレートグレー | slategray #708090 rgb(112,128,144) |
|
スレートブルー | slateblue #6A5ACD rgb(106,90,205) |
|
スチールブルー | steelblue #4682B4 rgb(70,130,180) |
|
ミディアムスレートブルー | mediumslateblue #7B68EE rgb(123,104,238) |
|
ロイヤルブルー | royalblue #4169E1 rgb(65,105,225) |
|
ブルー | blue #0000FF rgb(0,0,255) |
|
ドジャーブルー | dodgerblue #1E90FF rgb(30,144,255) |
|
コーンフラワーブルー | cornflowerblue #6495ED rgb(100,149,237) |
|
ディープスカイブルー | deepskyblue #00BFFF rgb(0,191,255) |
|
シアン | cyan #00FFFF rgb(0,255,255) |
|
アクア | aqua #00FFFF rgb(0,255,255) |
|
ターコイズ | turquoise #40E0D0 rgb(64,224,208) |
|
ミディアムターコイズ | mediumturquoise #48D1CC rgb(72,209,204) |
|
ダークターコイズ | darkturquoise #00CED1 rgb(0,206,209) |
|
ライトシーグリーン | lightseagreen #20B2AA rgb(32,178,170) |
|
ミディアムスプリンググリーン | mediumspringgreen #00FA9A rgb(0,250,154) |
|
スプリンググリーン | springgreen #00FF7F rgb(0,255,127) |
|
ライム | lime #00FF00 rgb(0,255,0) |
|
ライムグリーン | limegreen #32CD32 rgb(50,205,50) |
|
イエローグリーン | yellowgreen #9ACD32 rgb(154,205,50) |
|
ローングリーン | lawngreen #7CFC00 rgb(124,252,0) |
|
シャルトリューズ | chartreuse #7FFF00 rgb(127,255,0) |
|
グリーンイエロー | greenyellow #ADFF2F rgb(173,255,47) |
|
イエロー | yellow #FFFF00 rgb(255,255,0) |
|
ゴールド | gold #FFD700 rgb(255,215,0) |
|
オレンジ | orange #FFA500 rgb(255,165,0) |
|
ダークオレンジ | darkorange #FF8C00 rgb(255,140,0) |
|
ゴールデンロッド | goldenrod #DAA520 rgb(218,165,32) |
|
バーリーウッド | burlywood #DEB887 rgb(222,184,135) |
|
タン | tan #D2B48C rgb(210,180,140) |
|
サンディーブラウン | sandybrown #F4A460 rgb(244,164,96) |
|
ダークサーモン | darksalmon #E9967A rgb(233,150,122) |
|
ライトコーラル | lightcoral #F08080 rgb(240,128,128) |
|
サーモン | salmon #FA8072 rgb(250,128,114) |
|
ライトサーモン | lightsalmon #FFA07A rgb(255,160,122) |
|
コーラル | coral #FF7F50 rgb(255,127,80) |
|
トマト | tomato #FF6347 rgb(255,99,71) |
|
オレンジレッド | orangered #FF4500 rgb(255,69,0) |
|
レッド | red #FF0000 rgb(255,0,0) |
|
ディープピンク | deeppink #FF1493 rgb(255,20,147) |
|
ホットピンク | hotpink #FF69B4 rgb(255,105,180) |
|
ペールバイオレットレッド | palevioletred #DB7093 rgb(219,112,147) |
|
バイオレット | violet #EE82EE rgb(238,130,238) |
|
オーキッド | orchid #DA70D6 rgb(218,112,214) |
|
マゼンタ | magenta #FF00FF rgb(255,0,255) |
|
フクシア | fuchsia #FF00FF rgb(255,0,255) |
|
ミディアムオーキッド | mediumorchid #BA55D3 rgb(186,85,211) |
|
ダークオーキッド | darkorchid #9932CC rgb(153,50,204) |
|
ダークバイオレット | darkviolet #9400D3 rgb(148,0,211) |
|
ブルーバイオレット | blueviolet #8A2BE2 rgb(138,43,226) |
|
ミディアムパープル | mediumpurple #9370DB rgb(147,112,219) |
|
グレー | gray #808080 rgb(128,128,128) |
|
ミディアムブルー | mediumblue #0000CD rgb(0,0,205) |
|
ダークシアン | darkcyan #008B8B rgb(0,139,139) |
|
カデットブルー | cadetblue #5F9EA0 rgb(95,158,160) |
|
ダークシーグリーン | darkseagreen #8FBC8F rgb(143,188,143) |
|
ミディアムシーグリーン | mediumseagreen #3CB371 rgb(60,179,113) |
|
ティール | teal #008080 rgb(0,128,128) |
|
フォレストグリーン | forestgreen #228B22 rgb(34,139,34) |
|
シーグリーン | seagreen #2E8B57 rgb(46,139,87) |
|
ダークカーキ | darkkhaki #BDB76B rgb(189,183,107) |
|
ペルー | peru #CD853F rgb(205,133,63) |
|
クリムソン | crimson #DC143C rgb(220,20,60) |
|
インディアンレッド | indianred #CD5C5C rgb(205,92,92) |
|
ロージーブラウン | rosybrown #BC8F8F rgb(188,143,143) |
|
ミディアムバイオレットレッド | mediumvioletred #C71585 rgb(199,21,133) |
|
ディムグレー | dimgray #696969 rgb(105,105,105) |
|
ブラック | black #000000 rgb(0,0,0) |
|
ミッドナイトブルー | midnightblue #191970 rgb(25,25,112) |
|
ダークスレートブルー | darkslateblue #483D8B rgb(72,61,139) |
|
ダークブルー | darkblue #00008B rgb(0,0,139) |
|
ネイビー | navy #000080 rgb(0,0,128) |
|
ダークスレートグレー | darkslategray #2F4F4F rgb(47,79,79) |
|
グリーン | green #008000 rgb(0,128,0) |
|
ダークグリーン | darkgreen #006400 rgb(0,100,0) |
|
ダークオリーブグリーン | darkolivegreen #556B2F rgb(85,107,47) |
|
オリーブドラブ | olivedrab #6B8E23 rgb(107,142,35) |
|
オリーブ | olive #808000 rgb(128,128,0) |
|
ダークゴールデンロッド | darkgoldenrod #B8860B rgb(184,134,11) |
|
チョコレート | chocolate #D2691E rgb(210,105,30) |
|
シエナ | sienna #A0522D rgb(160,82,45) |
|
サドルブラウン | saddlebrown #8B4513 rgb(139,69,19) |
|
ファイヤーブリック | firebrick #B22222 rgb(178,34,34) |
|
ブラウン | brown #A52A2A rgb(165,42,42) |
|
マルーン | maroon #800000 rgb(128,0,0) |
|
ダークレッド | darkred #8B0000 rgb(139,0,0) |
|
ダークマゼンタ | darkmagenta #8B008B rgb(139,0,139) |
|
パープル | purple #800080 rgb(128,0,128) |
|
インディゴ | indigo #4B0082 rgb(75,0,130) |
END