CSSで設定する色の指定方法「RGB」と「HSL」をご紹介

cssで色を設定するにはRGBかHSLで指定しなければ表示されません。css3.0から導入された「current Color」もありますし、実際使用する際にはどの様に設定すれば良いのでしょうか。設定方法と一緒にご紹介致します。

RGBで設定する方法

RGBは光の三原色と呼ばれ「赤(Red)」「緑(Green)」「青紫(Blue)」で構成されている色の事を指します。

#rrggbbで設定

「#rrggbb」で設定する場合は、r(赤)・g(緑)・b(青)の数値を6桁で指定します。

CSS入力例

p要素を赤色にしたい。

#rgbで設定

「#rgb」で設定する場合は、r(赤)・g(緑)・b(青)の数値を16進数で1桁ずつ3桁で指定します。
例えば黒(#000)を指定すると#rrggbbに変換されて「#000000」と表現され、赤(#f00)を指定すると「#ff0000」と表現されます。

CSS入力例

p要素を赤色にしたい。

rgb(r数値,g数値,b数値)

「#rgb」で設定する場合は、r(赤)・g(緑)・b(青)の数値を10進数で指定します。
数値は0~255を指定します。

CSS入力例

p要素を赤色にしたい。

rgb(r%,g%,b%)

「#rgb」で設定する場合は、r(赤)・g(緑)・b(青)の数値を%(パーセント)で指定します。

CSS入力例

p要素を赤色にしたい。

RGBA (透過)で設定する方法

RGBAはRGBにアルファ(透過)を追加した設定方法です。

rgba(r数値,g数値,b数値,アルファ数値)

CSS入力例

p要素を赤色にして薄くしたい。

数値は1に近い程濃くなり、0に近い程薄くなります。

rgba(r%,g%,b%,アルファ数値)

CSS入力例

p要素を赤色にして薄くしたい。

数値は1に近い程濃くなり、0に近い程薄くなります。。

HSLで設定する方法

HSLはRGBとは違い「色相(Hue)」「彩度(Saturation)」「輝度(Lightness)」で構成されている色の事を指します。

色相(Hue)の数値設定

色をカラーサークル上の「角度(0°~360°)」で指定します。
赤と緑と青を角度の数値で表現すると、赤(0か360)・緑(120)・青(240)となります。

彩度(Saturation)

彩度とは色の鮮やかさです。その度合を0%~100%で指定します。

輝度(Lightness)

輝度は色の明るさになります。その度合を0%~100%で指定します。

hsl(色相の数値,彩度の数値%,輝度の数値%)

CSS入力例

p要素を赤色にしたい。

HSLA(透過)で設定する方法

HSLAはHSLにアルファ(透過)を追加した設定方法です。

hsl(色相の数値,彩度の数値%,輝度の数値%,アルファ数値)

CSS入力例

p要素を赤色にしたい。

数値は1に近い程濃くなり、0に近い程薄くなります。

結局どっちで指定すればいいの?

「RGB」か「HSL」かどちらを使えばいいのでしょうか。
実際には「RGB」がほぼ100%を占めています。
正直な所HSLで使用する事が殆どなかったので、RGBじゃないとよく解らないという所もあります(笑)

CSS3.0から導入された「current Color」

「currentColor」はCSS3.0から導入された指定方法です。
入れ子にした要素に親の色を継承できる方法です。

HTML

CSS

結果

テスト

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冊ですべて学べる!

初心者からちゃんとしたプロになる HTML+CSS標準入門

HTML&CSSの使い方が全部わかる。プロを目指すなら、最初に選ぶ本!