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進数
0016103220483064408050966011270
1117113321493165418151976111371
2218123422503266428252986211472
3319133523513367438353996311573
44201436245234684484541006411674
55211537255335694585551016511775
66221638265436704686561026611876
77231739275537714787571036711977
88241840285638724888581046812078
99251941295739734989591056912179
10A261A422A583A744A905A1066A1227A
11B271B432B593B754B915B1076B1237B
12C281C442C603C764C925C1086C1247C
13D291D452D613D774D935D1096D1257D
14E301E462E623E784E945E1106E1267E
15F311F472F633F794F955F1116F1277F
■10進数と16進数の対応表(128~255)
10進数16進数10進数16進数10進数16進数10進数16進数10進数16進数10進数16進数10進数16進数10進数16進数
1288014490160A0176B0192C0208D0224E0240F0
1298114591161A1177B1193C1209D1225E1241F1
1308214692162A2178B2194C2210D2226E2242F2
1318314793163A3179B3195C3211D3227E3243F3
1328414894164A4180B4196C4212D4228E4244F4
1338514995165A5181B5197C5213D5229E5245F5
1348615096166A6182B6198C6214D6230E6246F6
1358715197167A7183B7199C7215D7231E7247F7
1368815298168A8184B8200C8216D8232E8248F8
1378915399169A9185B9201C9217D9233E9249F9
1388A1549A170AA186BA202CA218DA234EA250FA
1398B1559B171AB187BB203CB219DB235EB251FB
1408C1569C172AC188BC204CC220DC236EC252FC
1418D1579D173AD189BD205CD221DD237ED253FD
1428E1589E174AE190BE206CE222DE238EE254FE
1438F1599F175AF191BF207CF223DF239EF255FF

同じ数字は省略可能

次の条件を全て満たすとき、カラーコードを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)
■カラーコードで透過指定
指定値透明度(不透明度)指定値透明度(不透明度)
0100%(0%)  8C45%(55%)  
D95%(5%)  9940%(60%)  
1A90%(10%)  A635%(65%)  
2685%(15%)  B330%(70%)  
3380%(20%)  BF25%(75%)  
4075%(25%)  CC20%(80%)  
4D70%(30%)  D915%(85%)  
5965%(35%)  E610%(90%)  
6660%(40%)  F25%(95%)  
7355%(45%)  FF0%(100%)  
8050%(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#0000000,0,0
silver#C0C0C0192,192,192
gray#808080128,128,128
white#FFFFFF255,255,255
maroon#800000128,0,0
red#FF0000255,0,0
purple#800080128,0,128
fuchsia#FF00FF255,0,255
green#0080000,128,0
lime#00FF000,255,0
olive#808000128,128,0
yellow#FFFF00255,255,0
navy#0000800,0,128
blue#0000FF0,0,255
teal#0080800,128,128
aqua#00FFFF0,255,255

その他のカラーネーム

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

カラーネームカラーコード10進数(R,G,B)
whitesmoke#F5F5F5245,245,245
gainsboro#DCDCDC220,220,220
lightgray#D3D3D3211,211,211
lightgrey#D3D3D3211,211,211
darkgray#A9A9A9169,169,169
darkgrey#A9A9A9169,169,169
grey#808080128,128,128
dimgray#696969105,105,105
dimgrey#696969105,105,105
snow#FFFAFA255,250,250
ghostwhite#F8F8FF248,248,255
mintcream#F5FFFA245,255,250
ivory#FFFFF0255,255,240
floralwhite#FFFAF0255,250,240
lavenderblush#FFF0F5255,240,245
azure#F0FFFF240,255,255
honeydew#F0FFF0240,255,240
aliceblue#F0F8FF240,248,255
seashell#FFF5EE255,245,238
linen#FAF0E6250,240,230
lavender#E6E6FA230,230,250
oldlace#FDF5E6253,245,230
beige#F5F5DC245,245,220
thistle#D8BFD8216,191,216
mistyrose#FFE4E1255,228,225
lightyellow#FFFFE0255,255,224
lightcyan#E0FFFF224,255,255
slategray#708090112,128,144
slategrey#708090112,128,144
darkslategray#2F4F4F47,79,79
darkslategrey#2F4F4F47,79,79
lightslategray#778899119,136,153
lightslategrey#778899119,136,153
cornsilk#FFF8DC255,248,220
antiquewhite#FAEBD7250,235,215
lightgoldenrodyellow#FAFAD2250,250,210
papayawhip#FFEFD5255,239,213
rosybrown#BC8F8F188,143,143
darkseagreen#8FBC8F143,188,143
lightsteelblue#B0C4DE176,196,222
lemonchiffon#FFFACD255,250,205
blanchedalmond#FFEBCD255,235,205
powderblue#B0E0E6176,224,230
lightblue#ADD8E6173,216,230
bisque#FFE4C4255,228,196
darkolivegreen#556B2F85,107,47
plum#DDA0DD221,160,221
pink#FFC0CB255,192,203
paleturquoise#AFEEEE175,238,238
cadetblue#5F9EA095,158,160
wheat#F5DEB3245,222,179
palegoldenrod#EEE8AA238,232,170
peachpuff#FFDAB9255,218,185
tan#D2B48C210,180,140
lightpink#FFB6C1255,182,193
moccasin#FFE4B5255,228,181
darkslateblue#483D8B72,61,139
navajowhite#FFDEAD255,222,173
darkkhaki#BDB76B189,183,107
burlywood#DEB887222,184,135
midnightblue#19197025,25,112
seagreen#2E8B5746,139,87
lightgreen#90EE90144,238,144
palegreen#98FB98152,251,152
khaki#F0E68C240,230,140
skyblue#87CEEB135,206,235
darkgreen#0064000,100,0
mediumaquamarine#66CDAA102,205,170
forestgreen#228B2234,139,34
orchid#DA70D6218,112,214
palevioletred#DB7093219,112,147
mediumpurple#9370DB147,112,219
olivedrab#6B8E23107,142,35
violet#EE82EE238,130,238
steelblue#4682B470,130,180
darksalmon#E9967A233,150,122
lightcoral#F08080240,128,128
indianred#CD5C5C205,92,92
sienna#A0522D160,82,45
lightskyblue#87CEFA135,206,250
slateblue#6A5ACD106,90,205
mediumseagreen#3CB37160,179,113
saddlebrown#8B4513139,69,19
brown#A52A2A165,42,42
mediumorchid#BA55D3186,85,211
aquamarine#7FFFD4127,255,212
indigo#4B008275,0,130
lightsalmon#FFA07A255,160,122
mediumslateblue#7B68EE123,104,238
salmon#FA8072250,128,114
cornflowerblue#6495ED100,149,237
mediumturquoise#48D1CC72,209,204
darkmagenta#8B008B139,0,139
darkred#8B0000139,0,0
darkcyan#008B8B0,139,139
darkblue#00008B0,0,139
peru#CD853F205,133,63
firebrick#B22222178,34,34
lightseagreen#20B2AA32,178,170
sandybrown#F4A460244,164,96
hotpink#FF69B4255,105,180
darkorchid#9932CC153,50,204
yellowgreen#9ACD32154,205,50
limegreen#32CD3250,205,50
royalblue#4169E165,105,225
turquoise#40E0D064,224,208
darkgoldenrod#B8860B184,134,11
coral#FF7F50255,127,80
mediumvioletred#C71585199,21,133
chocolate#D2691E210,105,30
blueviolet#8A2BE2138,43,226
tomato#FF6347255,99,71
goldenrod#DAA520218,165,32
crimson#DC143C220,20,60
mediumblue#0000CD0,0,205
greenyellow#ADFF2F173,255,47
darkturquoise#00CED10,206,209
darkviolet#9400D3148,0,211
dodgerblue#1E90FF30,144,255
deeppink#FF1493255,20,147
mediumspringgreen#00FA9A0,250,154
lawngreen#7CFC00124,252,0
gold#FFD700255,215,0
orange#FFA500255,165,0
darkorange#FF8C00255,140,0
orangered#FF4500255,69,0
magenta#FF00FF255,0,255
chartreuse#7FFF00127,255,0
cyan#00FFFF0,255,255
springgreen#00FF7F0,255,127
deepskyblue#00BFFF0,191,255

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

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

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

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

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