cssで色を設定するにはRGBかHSLで指定しなければ表示されません。css3.0から導入された「current Color」もありますし、実際使用する際にはどの様に設定すれば良いのでしょうか。設定方法と一緒にご紹介致します。
目次
RGBで設定する方法
RGBは光の三原色と呼ばれ「赤（Red）」「緑（Green）」「青紫（Blue）」で構成されている色の事を指します。
＃rrggbbで設定
「#rrggbb」で設定する場合は、r（赤）・g（緑）・b（青）の数値を6桁で指定します。
CSS入力例
p要素を赤色にしたい。
p{
color: #ff0000;
}＃rgbで設定
「#rgb」で設定する場合は、r（赤）・g（緑）・b（青）の数値を16進数で1桁ずつ3桁で指定します。
例えば黒（#000）を指定すると#rrggbbに変換されて「#000000」と表現され、赤（#f00）を指定すると「#ff0000」と表現されます。
CSS入力例
p要素を赤色にしたい。
p{
color: #f00;
}rgb（r数値,g数値,b数値）
「#rgb」で設定する場合は、r（赤）・g（緑）・b（青）の数値を10進数で指定します。
数値は0～255を指定します。
CSS入力例
p要素を赤色にしたい。
p{
color: rgb(255,0,0);
}rgb（r％,g％,b％）
「#rgb」で設定する場合は、r（赤）・g（緑）・b（青）の数値を％（パーセント）で指定します。
CSS入力例
p要素を赤色にしたい。
p{
color: rgb(100%,0%,0%);
}RGBA （透過）で設定する方法
RGBAはRGBにアルファ（透過）を追加した設定方法です。
rgba（r数値,g数値,b数値,アルファ数値）
CSS入力例
p要素を赤色にして薄くしたい。
p{
color: rgba(255,0,0,0.5);
}数値は1に近い程濃くなり、0に近い程薄くなります。
rgba（r％,g％,b％,アルファ数値）
CSS入力例
p要素を赤色にして薄くしたい。
p{
color: rgba(100%,0%,0%,0.5);
}数値は1に近い程濃くなり、0に近い程薄くなります。。
HSLで設定する方法
HSLはRGBとは違い「色相（Hue）」「彩度（Saturation）」「輝度（Lightness）」で構成されている色の事を指します。
色相（Hue）の数値設定
色をカラーサークル上の「角度（0°～360°）」で指定します。
赤と緑と青を角度の数値で表現すると、赤（0か360）・緑（120）・青（240）となります。
彩度（Saturation）
彩度とは色の鮮やかさです。その度合を0％～100％で指定します。
輝度（Lightness）
輝度は色の明るさになります。その度合を0％～100％で指定します。
hsl（色相の数値,彩度の数値％,輝度の数値％）
CSS入力例
p要素を赤色にしたい。
p{
color: hsl(0,100%,50%);
}HSLA（透過）で設定する方法
HSLAはHSLにアルファ（透過）を追加した設定方法です。
hsl（色相の数値,彩度の数値％,輝度の数値％,アルファ数値）
CSS入力例
p要素を赤色にしたい。
p{
color: hsl(0,100%,50%,0.5);
}数値は1に近い程濃くなり、0に近い程薄くなります。
結局どっちで指定すればいいの？
「RGB」か「HSL」かどちらを使えばいいのでしょうか。
実際には「RGB」がほぼ100％を占めています。
正直な所HSLで使用する事が殆どなかったので、RGBじゃないとよく解らないという所もあります（笑）
CSS3.0から導入された「current Color」
「currentColor」はCSS3.0から導入された指定方法です。
入れ子にした要素に親の色を継承できる方法です。
HTML
<div class="container">
<p><span>テスト</span></p>
</div>CSS
.container{
color: #f00;
}
.container p{
background-color: currentcolor;
}
.container p span{
color: #000;
}結果
テスト
pに対して「background-color: currentcolor;」を設定すると、親の「color: #f00;」が適用されて、背景色が赤になりました。
そのままだとテキストも赤になってしまい見えないので、spanに黒色を設定して読める様にしました。
複数してする場合「currentcolor」を設定しておくと、親の色を変更するだけで「currentcolor」の部分は全て対象の色に変更できるので、設定数が多ければ多い程、管理が楽になりますね。
まとめ
私はRGB、RGBA以外は殆ど使いませんが、「currentcolor」は管理上も楽になるのでこれから使っていきたいと思います。
HSLも使う様になればもっと細かな色が設定できるのですが、現状あまり・・・。
CSSコーディングのオススメ本
CSS辞典 第5版 [CSS2/3/4対応]
本書は、Webデザインに必須の技術「CSS」の文法リファレンスです。大幅改訂となる第5版は、現時点の最新状況を反映し、Web制作を学ぶなら必ず押さえておきたい基本のCSS2.1、仕様の策定とブラウザでの実装が進められているCSS3、さらにはその次の規格であるCSS4(Level4モジュール)まで掲載しています。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ
予測しやすい、保守しやすい、最利用しやすい、拡張しやすい―コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説!
1冊ですべて身につくHTML＆CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
