cssの色指定は難しくない！ざっくり解説します

Webサイトの色は、CSS（スタイル）で指定します。
しかし色の指定方法が独特で、はじめはよくわからないですね。

そこで今回は、CSSでの色指定についてざっくり解説します。

CSSをカラーコードで指定する

CSSで色を表現する方法はいくつかありますが、最もよく使用されるのがカラーコードです。
カラーコードは、#と6つの英数字を組み合わせたものです。

例えば、次のようなものです。

■カラーコードで色指定
色値 実際の色
#FF0000  赤 
#00FF00  緑 
#0000FF  青 

#の後に続く6つの英数字は、2桁毎に分割してそれぞれ

前2桁：赤色（red) 中2桁：緑色（green) 後2桁：青色（blue)

の3色の濃さを表現しています。

#FF0000なら、赤FF、緑00、青00です。

ここまでは簡単ですね。

0はわかりますが、FFとはなんでしょうか？

これは16進数といって、0から数えて16で桁上がりする、数字の表現方法です。

10以降は

a=10
b=11
c=12
d=13
e=14
f=15

となり、
桁が上がると、

10(16進数)=16(10進数)

となります。

CSSの色指定では、赤・緑・青の強さを2桁の16進数で表現します。

2桁の最高値はFFで、10進数にすると255なので、各色は256段階の強さを指定できることになります。

■10進数と16進数の対応表(0～127)
10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数
0 0 16 10 32 20 48 30 64 40 80 50 96 60 112 70
1 1 17 11 33 21 49 31 65 41 81 51 97 61 113 71
2 2 18 12 34 22 50 32 66 42 82 52 98 62 114 72
3 3 19 13 35 23 51 33 67 43 83 53 99 63 115 73
4 4 20 14 36 24 52 34 68 44 84 54 100 64 116 74
5 5 21 15 37 25 53 35 69 45 85 55 101 65 117 75
6 6 22 16 38 26 54 36 70 46 86 56 102 66 118 76
7 7 23 17 39 27 55 37 71 47 87 57 103 67 119 77
8 8 24 18 40 28 56 38 72 48 88 58 104 68 120 78
9 9 25 19 41 29 57 39 73 49 89 59 105 69 121 79
10 A 26 1A 42 2A 58 3A 74 4A 90 5A 106 6A 122 7A
11 B 27 1B 43 2B 59 3B 75 4B 91 5B 107 6B 123 7B
12 C 28 1C 44 2C 60 3C 76 4C 92 5C 108 6C 124 7C
13 D 29 1D 45 2D 61 3D 77 4D 93 5D 109 6D 125 7D
14 E 30 1E 46 2E 62 3E 78 4E 94 5E 110 6E 126 7E
15 F 31 1F 47 2F 63 3F 79 4F 95 5F 111 6F 127 7F
■10進数と16進数の対応表(128～255)
10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数 10進数 16進数
128 80 144 90 160 A0 176 B0 192 C0 208 D0 224 E0 240 F0
129 81 145 91 161 A1 177 B1 193 C1 209 D1 225 E1 241 F1
130 82 146 92 162 A2 178 B2 194 C2 210 D2 226 E2 242 F2
131 83 147 93 163 A3 179 B3 195 C3 211 D3 227 E3 243 F3
132 84 148 94 164 A4 180 B4 196 C4 212 D4 228 E4 244 F4
133 85 149 95 165 A5 181 B5 197 C5 213 D5 229 E5 245 F5
134 86 150 96 166 A6 182 B6 198 C6 214 D6 230 E6 246 F6
135 87 151 97 167 A7 183 B7 199 C7 215 D7 231 E7 247 F7
136 88 152 98 168 A8 184 B8 200 C8 216 D8 232 E8 248 F8
137 89 153 99 169 A9 185 B9 201 C9 217 D9 233 E9 249 F9
138 8A 154 9A 170 AA 186 BA 202 CA 218 DA 234 EA 250 FA
139 8B 155 9B 171 AB 187 BB 203 CB 219 DB 235 EB 251 FB
140 8C 156 9C 172 AC 188 BC 204 CC 220 DC 236 EC 252 FC
141 8D 157 9D 173 AD 189 BD 205 CD 221 DD 237 ED 253 FD
142 8E 158 9E 174 AE 190 BE 206 CE 222 DE 238 EE 254 FE
143 8F 159 9F 175 AF 191 BF 207 CF 223 DF 239 EF 255 FF

同じ数字は省略可能

次の条件を全て満たすとき、カラーコードを3桁で表示できます。

(1) 赤色の二けたが同じ英数字（FF,AA,33など）
(2) 緑色の二けたが同じ英数字（FF,AA,33など）
(3) 青色の二けたが同じ英数字（FF,AA,33など）

例えば次のように省略できます。

#FFFFFF → #FFF
#33AA00 → #3A0

10進数で色を指定する方法

カラーコードは16進数で色を表現していました。
16進数が少し難しいという人は、10進数で表現する方法もあります。

rgb(赤,緑,青)

各色は、0から255までの10進数、またはパーセント(%)を指定します。

■10進数で色指定
色値 実際の色
rgb(255,0,0)  赤 
rgb(0,255,0)  緑 
rgb(0,0,255)  青 

%は、0が最も弱く、100が最も強い色を表します。

■パーセントで色指定
色値 実際の色
rgb(100%,0%,0%)  赤 
rgb(0%,100%,0%)  緑 
rgb(0%,0%,100%)  青 

※全て%指定しないと、適用されません。

色を透過させる方法

次は、色を半透明にしてみましょう。
色の半透明は、推奨する方法と、推奨できない方法があります。

推奨する方法 rgbaで指定

rgba()を使用することで、半透明な色を指定できます。

rgba(赤,緑,青,透明度（アルファ値）)

rgbではなくて、rgbaということに注意してください。

赤・緑・青は、0から255の10進数で指定します。

透明度（アルファ値）はパーセントで指定します。
0%(完全に透明)～100%(完全に不透明)となります。

しかし一般的には、0.0から1.0までの小数で指定することが多いようです。
0.0が見えない状態（完全に透明）で、1.0は透過させない状態（完全に不透明）となります。

■透明度の例
色値 透明度(不透明度) 実際の色
rgba(255,0,0,1.0) 0%(100%)   
rgba(255,0,0,0.75) 25%(75%)   
rgba(255,0,0,0.5) 50%(50%)   
rgba(255,0,0,0.25) 75%(25%)   
rgba(255,0,0,0.0) 100%(0%)   

推奨しない方法　カラーコードで指定

カラーコードの7桁と8桁目に16進数で透明度（アルファ値）を指定することができます。

#赤(00～FF)緑(00～FF)青(00～FF)透明度(00～FF)
■カラーコードで透過指定
指定値 透明度(不透明度) 指定値 透明度(不透明度)
0 100%(0%)    8C 45%(55%)   
D 95%(5%)    99 40%(60%)   
1A 90%(10%)    A6 35%(65%)   
26 85%(15%)    B3 30%(70%)   
33 80%(20%)    BF 25%(75%)   
40 75%(25%)    CC 20%(80%)   
4D 70%(30%)    D9 15%(85%)   
59 65%(35%)    E6 10%(90%)   
66 60%(40%)    F2 5%(95%)   
73 55%(45%)    FF 0%(100%)   
80 50%(50%)       
ブラウザによっては、カラーコードでの透過指定をサポートしていません。
画面上に表示されないことがあるので、使用をおススメできません。

100%透過させるときは、transparentを使用する

transparent(トランスペアレント）を指定すると、色を透明にすることができます。

指定例：

background-color:transparent;

既に指定されている色を、打ち消すときなどに使用します。

HTML

<div class="color-exp">
<p>背景赤</p>
<p class="no-exp">背景打消し</p>
</div>

CSS

<style>
.color-exp{
    padding:2em;
    background-color:#cecece;
}
.color-exp p{
    background-color:#FF0000;
}
.color-exp p.no-exp{
    background-color:transparent;
}
</style>

背景赤

背景打消し

色の変化を見てみよう

実際に各色が増減すると、どんな色になるのか試してみましょう。

次のツールは、スライダーを左右に移動することで、赤緑青それぞれの色の強さを変更できます。

  

  

  

  

作成された色：  【透過  】

カラーコード：

rgb(10進数)：

rgb(%)：

※rgbaの透過値は%指定も可能です。

練習：文字と背景の色を変えてみよう

次に色指定のイメージをつかむために、色を変更してみましょう。

次のようなHTMLがあります。

<div class="haikei">
<p>テスト</p>
</div>

実際に、画面上に表示すると次のようになります。

テスト

次のスタイルの青枠を変更すると、上記の表示内容が変更されます。
試してみてください。

.haikei{
    padding:5em 1em;
    border:1px dotted #666;
    background-color:;
}
.haikei p{
    color:;
}

名前で指定することも可能

CSSでの色指定は、カラーコードやrgbの他に、カラーネームでの指定も可能です。

標準16色

HTMLで定義されている基本の16色です。

カラーネーム 色 カラーコード 10進数(R,G,B)
black #000000 0,0,0
silver #C0C0C0 192,192,192
gray #808080 128,128,128
white #FFFFFF 255,255,255
maroon #800000 128,0,0
red #FF0000 255,0,0
purple #800080 128,0,128
fuchsia #FF00FF 255,0,255
green #008000 0,128,0
lime #00FF00 0,255,0
olive #808000 128,128,0
yellow #FFFF00 255,255,0
navy #000080 0,0,128
blue #0000FF 0,0,255
teal #008080 0,128,128
aqua #00FFFF 0,255,255

その他のカラーネーム

ブラウザによっては、対応していないカラーネームもあるようです。
カラーコードまたはrgbで色を指定したほうが無難かもしれません。

カラーネーム 色 カラーコード 10進数(R,G,B)
whitesmoke #F5F5F5 245,245,245
gainsboro #DCDCDC 220,220,220
lightgray #D3D3D3 211,211,211
lightgrey #D3D3D3 211,211,211
darkgray #A9A9A9 169,169,169
darkgrey #A9A9A9 169,169,169
grey #808080 128,128,128
dimgray #696969 105,105,105
dimgrey #696969 105,105,105
snow #FFFAFA 255,250,250
ghostwhite #F8F8FF 248,248,255
mintcream #F5FFFA 245,255,250
ivory #FFFFF0 255,255,240
floralwhite #FFFAF0 255,250,240
lavenderblush #FFF0F5 255,240,245
azure #F0FFFF 240,255,255
honeydew #F0FFF0 240,255,240
aliceblue #F0F8FF 240,248,255
seashell #FFF5EE 255,245,238
linen #FAF0E6 250,240,230
lavender #E6E6FA 230,230,250
oldlace #FDF5E6 253,245,230
beige #F5F5DC 245,245,220
thistle #D8BFD8 216,191,216
mistyrose #FFE4E1 255,228,225
lightyellow #FFFFE0 255,255,224
lightcyan #E0FFFF 224,255,255
slategray #708090 112,128,144
slategrey #708090 112,128,144
darkslategray #2F4F4F 47,79,79
darkslategrey #2F4F4F 47,79,79
lightslategray #778899 119,136,153
lightslategrey #778899 119,136,153
cornsilk #FFF8DC 255,248,220
antiquewhite #FAEBD7 250,235,215
lightgoldenrodyellow #FAFAD2 250,250,210
papayawhip #FFEFD5 255,239,213
rosybrown #BC8F8F 188,143,143
darkseagreen #8FBC8F 143,188,143
lightsteelblue #B0C4DE 176,196,222
lemonchiffon #FFFACD 255,250,205
blanchedalmond #FFEBCD 255,235,205
powderblue #B0E0E6 176,224,230
lightblue #ADD8E6 173,216,230
bisque #FFE4C4 255,228,196
darkolivegreen #556B2F 85,107,47
plum #DDA0DD 221,160,221
pink #FFC0CB 255,192,203
paleturquoise #AFEEEE 175,238,238
cadetblue #5F9EA0 95,158,160
wheat #F5DEB3 245,222,179
palegoldenrod #EEE8AA 238,232,170
peachpuff #FFDAB9 255,218,185
tan #D2B48C 210,180,140
lightpink #FFB6C1 255,182,193
moccasin #FFE4B5 255,228,181
darkslateblue #483D8B 72,61,139
navajowhite #FFDEAD 255,222,173
darkkhaki #BDB76B 189,183,107
burlywood #DEB887 222,184,135
midnightblue #191970 25,25,112
seagreen #2E8B57 46,139,87
lightgreen #90EE90 144,238,144
palegreen #98FB98 152,251,152
khaki #F0E68C 240,230,140
skyblue #87CEEB 135,206,235
darkgreen #006400 0,100,0
mediumaquamarine #66CDAA 102,205,170
forestgreen #228B22 34,139,34
orchid #DA70D6 218,112,214
palevioletred #DB7093 219,112,147
mediumpurple #9370DB 147,112,219
olivedrab #6B8E23 107,142,35
violet #EE82EE 238,130,238
steelblue #4682B4 70,130,180
darksalmon #E9967A 233,150,122
lightcoral #F08080 240,128,128
indianred #CD5C5C 205,92,92
sienna #A0522D 160,82,45
lightskyblue #87CEFA 135,206,250
slateblue #6A5ACD 106,90,205
mediumseagreen #3CB371 60,179,113
saddlebrown #8B4513 139,69,19
brown #A52A2A 165,42,42
mediumorchid #BA55D3 186,85,211
aquamarine #7FFFD4 127,255,212
indigo #4B0082 75,0,130
lightsalmon #FFA07A 255,160,122
mediumslateblue #7B68EE 123,104,238
salmon #FA8072 250,128,114
cornflowerblue #6495ED 100,149,237
mediumturquoise #48D1CC 72,209,204
darkmagenta #8B008B 139,0,139
darkred #8B0000 139,0,0
darkcyan #008B8B 0,139,139
darkblue #00008B 0,0,139
peru #CD853F 205,133,63
firebrick #B22222 178,34,34
lightseagreen #20B2AA 32,178,170
sandybrown #F4A460 244,164,96
hotpink #FF69B4 255,105,180
darkorchid #9932CC 153,50,204
yellowgreen #9ACD32 154,205,50
limegreen #32CD32 50,205,50
royalblue #4169E1 65,105,225
turquoise #40E0D0 64,224,208
darkgoldenrod #B8860B 184,134,11
coral #FF7F50 255,127,80
mediumvioletred #C71585 199,21,133
chocolate #D2691E 210,105,30
blueviolet #8A2BE2 138,43,226
tomato #FF6347 255,99,71
goldenrod #DAA520 218,165,32
crimson #DC143C 220,20,60
mediumblue #0000CD 0,0,205
greenyellow #ADFF2F 173,255,47
darkturquoise #00CED1 0,206,209
darkviolet #9400D3 148,0,211
dodgerblue #1E90FF 30,144,255
deeppink #FF1493 255,20,147
mediumspringgreen #00FA9A 0,250,154
lawngreen #7CFC00 124,252,0
gold #FFD700 255,215,0
orange #FFA500 255,165,0
darkorange #FF8C00 255,140,0
orangered #FF4500 255,69,0
magenta #FF00FF 255,0,255
chartreuse #7FFF00 127,255,0
cyan #00FFFF 0,255,255
springgreen #00FF7F 0,255,127
deepskyblue #00BFFF 0,191,255

色の見え方は機器によって異なる

CSSでの色指定は、わかってしまえば簡単です。
Webサイトは色を変更するだけで雰囲気がガラッと変わるので、サイトのイメージにあう色を探してみてください。

ただし、同じカラーコードやrgbでも、パソコンやスマホなどの機器によって見え方が異なります。
また同じ種類の機器であっても、色合いを変更したり、ブルーライトをカットするなどで、発色が大きく変わります。

そのため自分のパソコンでお気に入りの色が表示できても、Webサイトの閲覧者が見ているのは異なる色です。

Webサイトの雰囲気に合う色を選ぶことはとても大切ですが、微妙な色の差にこだわるのはあまり意味がないことかもしれませんね。