文字や背景に色をつける際 カラーコード を利用しますが、誰もが当たり前に知っている色ならば進数ではなく色名で記すことができます。
例えば文字を 赤 にしたい時。
「あれ?赤のカラーコードってなんだっけ?」と迷わずとも以下のように書けば赤くなります。
<span style="color: red;">赤くしたい文字</span>
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」... などなど。
カラーコードを探すよりも遥かに楽だと思いますので活用されると良いと思います。
- 月名の短縮表記について2018/09/07
- よくあるCSSの記述ミス2018/09/06
- ブログタイトルの折返しを制御する方法2018/09/05
- tableの使い方を理解してスマートフォンでも見やすくする2018/08/01
- lazy loadingで画像が出る前にローディングスピナーを表示させる方法2018/07/27
- GTmetrixスピードスコア D66%からA100%にするために行ったこと2018/07/26
- FC2ブログでレスポンシブテンプレートを設定したらプラグインにこのCSSを追加しておくと便利2018/07/21
- Lazy loadingにLQIP画像を利用してユーザービリティを高める2018/07/20