CSSで使える「カラーネーム」140色

CSの色指定の基本は10進数と16進数

赤の10進数(Decimal デシマル) --- rgb(255, 0, 0)
赤の16進数(Hexadecimal ヘキサデシマル) --- #ff0000
赤のカラーネーム --- red

CSSの色コード指定の推奨は10進数です。
みなさんにより馴染みがあるのは16進数の方だと思います。
個人的にもカスタマイズをよくされる方へはなるべく10進数を用いると良いと思います。

推奨は10進数

明度調整が簡単

例えば上記のような青系の背景を持つ要素があったとします。
少し色味がキツいので淡くしたいが色のテイストは変更したくない、という場合。
rgbカラーの場合 rが赤、gが緑、bが青 を意味し、それぞれの配分で決まります。
0により近いと黒系に、255により近いと白系になります。

色の混ざり具合が微妙な色合いを決めていますので、この配分を動かさずに淡くするには3つの数値をそれぞれ 255 に近づけることで実現します。同数値をこの3つに足せば良いわけです。
それぞれ30を足してみます。

255がmax値なのでそれを超えないようにします。
サンプルとは反対に濃くしたい場合は255の逆の0に近づけます。

こうして簡単に色の 明度 を変更することができ、16進数よりも直感的な操作が可能です。

不透明度指定が簡単

透明度ではなく 不透明度 です。
色の透け具体を指定するには rgba() (rgba function)を用います。
rgbの10進数に a (alpha アルファ = 不透明度)が追加されたものです。

先程の明度調整とは異なり、この青い色は透けていますので、仮に後ろに背景画像などがあればそれがうっすらと見えることになります。

10進数ならば簡単に不透明度を追加することができます。16進数ではできません。

不透明を設定する際に opacity を利用することがあり、「背景透過」と説明されていることがありますが間違いです。
opacityはやはり 不透明度 指定です。
そして 背景だけでなく前景も透過します。

下の青いボックスには rgb(83, 104, 195) と書いてありますが、背景の青色はもとより前景のテキストまでも透過の影響を受けて薄くなり、結果読めなくなってるのがわかります。

直感で使える「カラーネーム」

webセーフカラー というのがありますが、こちらは OS間で差異なく表現できる240色 のことを指します。
それとは別でhtmlには 全ブラウザ間で差異なく表現できる140色 を規定しています。
その140色については カラーネームの使用が認められています。

カラーネーム (読み方)	色	10進数	16進数
赤系 9色
LightSalmon (ライトサーモン)		rgb(255, 160, 122)	#ffa07a
Salmon (サーモン)		rgb(250, 128, 114)	#fa8072
DarkSalmon (ダークサーモン)		rgb(233, 150, 122)	#e9967a
LightCoral (ライトコーラル)		rgb(240, 128, 128)	#f08080
IndianRed (インディアンレッド)		rgb(205, 92, 92)	#cd5c5c
Crimson (クリムゾン)		rgb(220, 20, 60)	#dc143c
Red (レッド)		rgb(255, 0, 0)	#ff0000
FireBrick (ファイアブリック)		rgb(178, 34, 34)	#b22222
DarkRed (ダークレッド)		rgb(139, 0, 0)	#8b0000
橙系 5色
Orange (オレンジ)		rgb(255, 165, 0)	#ffa500
DarkOrange (ダークオレンジ)		rgb(255, 140, 0)	#ff8c00
Coral (コーラル)		rgb(255, 127, 80)	#ff7f50
Tomato (トマト)		rgb(255, 99, 71)	#ff6347
OrangeRed (オレンジレッド)		rgb(255, 69, 0)	#ff4500
黄系 11色
Gold (ゴールド)		rgb(255, 215, 0)	#ffd700
Yellow (イエロー)		rgb(255, 255, 0)	#ffff00
LightYellow (ライトイエロー)		rgb(255, 255, 224)	#ffffe0
LemonChiffon (レモンシフォン)		rgb(255, 250, 205)	#fffacd
LightGoldenRodYellow (ライトゴールデンロッドイエロー)		rgb(250, 250, 210)	#fafad2
PapayaWhip (パパヤホィップ)		rgb(255, 239, 213)	#ffefd5
Moccasin (モカシン)		rgb(255, 228, 181)	#ffe4b5
PeachPuff (ピーチパフ)		rgb(255, 218, 185)	#ffdab9
PaleGoldenRod (ペイルゴールデンロッド)		rgb(238, 232, 170)	#eee8aa
Khaki (カーキ)		rgb(240, 230, 140)	#f0e68c
DarkKhaki (ダークカーキ)		rgb(189, 183, 107)	#bdb76b
緑系 22色
GreenYellow (グリーンイエロー)		rgb(173, 255, 47)	#adff2f
Chartreuse (シャルトリューズ)		rgb(127, 255, 0)	#7fff00
LawnGreen (ローングリーン)		rgb(124, 252, 0)	#7cfc00
Lime (ライム)		rgb(0, 255, 0)	#00ff00
LimeGreen (ライムグリーン)		rgb(50, 205, 50)	#32cd32
PaleGreen (ペイルグリーン)		rgb(152,251,152)	#98fb98
LightGreen (ライトグリーン)		rgb(144, 238, 144)	#90ee90
MediumSpringGreen (ミディアムスプリンググリーン)		rgb(0, 250, 154)	#00fa9a
SpringGreen (スプリンググリーン)		rgb(0, 255, 127)	#00ff7f
MediumSeaGreen (ミディアムシーグリーン)		rgb(60, 179, 113)	#3cb371
SeaGreen (シーグリーン)		rgb(46,139, 87)	#2e8b57
ForestGreen (フォレストグリーン)		rgb(34, 139, 34)	#228b22
Green (グリーン)		rgb(0, 128, 0)	#008000
DarkGreen (ダークグリーン)		rgb(0, 100, 0)	#006400
YellowGreen (イエローグリーン)		rgb(154, 205, 50)	#9acd32
OliveDrab (オリーブドラブ)		rgb(107, 142, 35)	#6b8e23
DarkOliveGreen (ダークオリーブグリーン)		rgb(85, 107, 47)	#556b2f
MediumAquaMarine (ミディアムアクアマリン)		rgb(102, 205, 170)	#66cdaa
DarkSeaGreen (ダークシーグリーン)		rgb(143, 188, 143)	#8fbc8f
LightSeaGreen (ライトシーグリーン)		rgb(32, 178, 170)	#20b2aa
DarkCyan (ダークシアン)		rgb(0, 139, 139)	#008b8b
Teal (ティール)		rgb(0, 128, 128)	#008080
青系 16色
CadetBlue (カデットブルー)		rgb(95, 158, 160)	#5f9ea0
SteelBlue (スティールブルー)		rgb(70, 130, 180)	#4682b4
LightSteelBlue (ライトスティールブルー)		rgb(176, 196, 222)	#b0c4de
LightBlue (ライトブルー)		rgb(173, 216, 230)	#add8e6
PowderBlue (パウダーブルー)		rgb(176, 224, 230)	#b0e0e6
LightSkyBlue (ライトスカイブルー)		rgb(135, 206, 250)	#87cefa
SkyBlue (スカイブルー)		rgb(135, 206, 235)	#87ceeb
CornflowerBlue (コーンフラワーブルー)		rgb(100, 149, 237)	#6495ed
DeepSkyBlue (ディープスカイブルー)		rgb(0, 191, 255)	#00bfff
DodgerBlue (ドジャーブルー)		rgb(30, 144, 255)	#1e90ff
RoyalBlue (ロイヤルブルー)		rgb(65, 105, 225)	#4169e1
Blue (ブルー)		rgb(0, 0, 255)	#0000ff
MediumBlue (ミディアムブルー)		rgb(0, 0, 205)	#0000cd
DarkBlue (ダークブルー)		rgb(0, 0, 139)	#00008b
Navy (ネイビー)		rgb(0, 0, 128)	#000080
MidnightBlue (ミッドナイトブルー)		rgb(25, 25, 112)	#191970
シアン系 8色
Aquq (アクア) *シアンと同色		rgb(0, 255, 255)	#00ffff
Cyan (シアン) *アクアと同色		rgb(0, 255, 255)	#00ffff
LightCyan (ライトシアン)		rgb(224, 255, 255)	#e0ffff
PaleTurquoise (ペイルターコイズ)		rgb(175, 238, 238)	#afeeee
Aquamarine (アクアマリン)		rgb(127, 255, 212)	#7fffd4
Turquoise (ターコイズ)		rgb(64, 224, 208)	#40e0d0
MediumTurquoise (ミディアムターコイズ)		rgb(72, 209, 204)	#48d1cc
DarkTurquoise (ダークターコイズ)		rgb(0, 206, 209)	#00ced1
紫系 19色
Lavender (ラベンダー)		rgb(230, 230, 250)	#e6e6fa
Thistle (シスル)		rgb(216, 191, 216)	#d8bfd8
Plum (プラム)		rgb(221, 160, 221)	#dda0dd
Orchid (オーキッド)		rgb(218, 112, 214)	#da70d6
Violet (バイオレット)		rgb(238, 130, 238)	#ee82ee
Fuchsia (フューシャ) *マジェンタと同色		rgb(255, 0, 255)	#ff00ff
Magenta (マジェンタ) *フューシャと同色		rgb(255, 0, 255)	#ff00ff
MediumOrchid (ミディアムオーキッド)		rgb(186, 85, 211)	#ba55d3
DarkOrchid (ダークオーキッド)		rgb(153, 50, 204)	#9932cc
DarkViolet (ダークバイオレット)		rgb(148, 0, 211)	#9400d3
BlueViolet (ブルーバイオレット)		rgb(138, 43, 226)	#8a2be2
DarkMagenta (ダークマジェンタ)		rgb(139, 0, 139)	#8b008b
Purple (パープル)		rgb(128, 0, 128)	#800080
MediumPurple (ミディアムパープル)		rgb(147, 112, 219)	#9370db
MediumSlateBlue (ミディアムスレートブルー)		rgb(123, 104, 238)	#7b68ee
SlateBlue (スレートブルー)		rgb(106, 90, 205)	#6a5acd
DarkSlateBlue (ダークスレートブルー)		rgb(72, 61, 139)	#483d8b
Indigo (インディゴ)		rgb(75, 0, 130)	#4b0082
ピンク系 6色
Pink (ピンク)		rgb(255, 192, 203)	#ffc0cb
LightPink (ライトピンク)		rgb(255, 182, 193)	#ffb6c1
HotPink (ホットピンク)		rgb(255, 105, 180)	#ff69b4
DeepPink (ディープピンク)		rgb(255, 20, 147)	#ff1493
PaleVioletRed (ペイルバイオレットレッド)		rgb(219, 112, 147)	#db7093
MediumVioletRed (ミディアムバイオレットレッド)		rgb(199, 21, 133)	#c71585
茶系 18色
Cornsilk (コーンシルク)		rgb(255, 248, 220)	#fff8dc
BlanchedAlmond (ブランチドアーモンド)		rgb(255, 235, 205)	#ffebcd
Bisque (ビスク)		rgb(255, 228, 196)	#ffe4c4
NavajoWhite (ナバホホワイト)		rgb(255, 222, 173)	#ffdead
Wheat (ウィート)		rgb(245, 222, 179)	#f5deb3
BurlyWood (バーリーウッド)		rgb(222, 184, 135)	#deb887
Tan (タン)		rgb(210, 180, 140)	#d2b48c
RosyBrown (ロージーブラウン)		rgb(188, 143, 143)	#bc8f8f
SandyBrown (サンディブラウン)		rgb(244, 164, 96)	#f4a460
GoldenRod (ゴールデンロッド)		rgb(218, 165, 32)	#daa520
DarkGoldenRod (ダークゴールデンロッド)		rgb(184, 134, 11)	#b8860b
Peru (ペルー)		rgb(205, 133, 63)	#cd853f
Chocolate (チョコレート)		rgb(210, 105, 30)	#d2691e
Olive (オリーブ)		rgb(128, 128, 0)	#808000
SaddleBrown (サドルブラウン)		rgb(139, 69, 19)	#8b4513
Sienna (シエナ)		rgb(160, 82, 45)	#a0522d
Brown (ブラウン)		rgb(165, 42, 42)	#a52a2a
Maroon (マルーン)		rgb(128, 0, 0)	#800000
白系 17色
White (ホワイト)		rgb(255, 255, 255)	#ffffff
Snow (スノウ)		rgb(255, 250, 250)	#fffafa
HoneyDew (ハニーデュー)		rgb(240, 255, 240)	#f0fff0
MintCream (ミントクリーム)		rgb(245, 255, 250)	#f5fffa
Azure (アジュール)		rgb(240, 255, 255)	#f0ffff
AliceBlue (アリスブルー)		rgb(240, 248, 255)	#f0f8ff
GhostWhite (ゴーストホワイト)		rgb(248, 248, 255)	#f8f8ff
WhiteSmoke (ホワイトスモーク)		rgb(245, 245, 245)	#f5f5f5
SeaShell (シーシェル)		rgb(255, 245, 238)	#fff5ee
Beige (ベージュ)		rgb(245, 245, 220)	#f5f5dc
OldLace (オールドレース)		rgb(253, 245, 230)	#fdf5e6
FloralWhite (フローラルホワイト)		rgb(255, 250, 240)	#fffaf0
Ivory (アイボリー)		rgb(255, 255, 240)	#fffff0
AntiqueWhite (アンティークホワイト)		rgb(250, 235, 215)	#faebd7
Linen (リネン)		rgb(250, 240, 230)	#faf0e6
LavenderBlush (ラベンダーブラッシュ)		rgb(255, 240, 245)	#fff0f5
MistyRose (ミスティローズ)		rgb(255, 228, 225)	#ffe4e1
グレー系 10色
Gainsboro (ゲインズボロ)		rgb(220, 220, 220)	#dcdcdc
LightGray (ライトグレー)		rgb(211, 211, 211)	#d3d3d3
Silver (シルバー)		rgb(192, 192, 192)	#c0c0c0
DarkGray (ダークグレー)		rgb(169, 169, 169)	#a9a9a9
DimGray (ディムグレー)		rgb(105, 105, 105)	#696969
Gray (グレー)		rgb(128, 128, 128)	#808080
LightSlateGray (ライトスレートグレー)		rgb(119, 136, 153)	#778899
SlateGray (スレートグレー)		rgb(112, 128, 144)	#708090
DarkSlateGray (ダークスレートグレー)		rgb(47, 79, 79)	#2f4f4f
Black (ブラック)		rgb(0, 0, 0)	#000000

まとめ

気に入った色はカラーネームを覚えておくとCSSですぐに適用できます。
良く利用する「black」「white」「gray」「red」... などなど。
カラーコードを探すよりも遥かに楽だと思いますので活用されると良いと思います。