JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

CSSの基本 ~ 文字色を指定する ~(色見本、カラーコード、カラーネーム)

f:id:vw-dsg:20200601063047p:plain

~ 文字色の指定方法 ~

文字の色を指定するには「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