CSSの色の指定方法とそれぞれのメリット・デメリット

2020年12月8日2021年3月31日CSS

CSSでは、いろいろな色をいくつかの方法で表現することができます。 それぞれメリット・デメリットがあるので、その方法と具体的な使い方をみていきましょう。

CSSの色の指定方法

CSSで色を指定する場合、次のような方法があります。

• 色キーワードで指定する方法
• RGBAを使った色の表現方法
• 16進数で表現する方法
• HSLAで指定する方法
• 透明度の指定

色キーワードで指定する方法

CSSでは、redやblueといった英単語で色を指定することができます。 色キーワードによる指定は、直感的でコードを見てもわかりやすいという特徴があります。 その反面、細かい色の指定は他の方法より制限がかかります。 他にもたくさんあり、最も信頼性の高いMDNで検索するといいでしょう。 https://developer.mozilla.org/ja/docs/Web/CSS/color_value

RGBAを使った色の表現方法

RGBやRGBAを使った色の表現方法も可能です。 RGBAはレッド(R)、グリーン(G)、ブルー(B)にアルファ（A,alpha、透明度）を加えたものです。 透明度は指定しなければ最大の1の意味になります。 全部の色を最大にすると白色になり、最小にすると黒になります。 たくさんの色をわかりやすく表現することができます。 その反面、記述が長くなります。

16進数で表現する方法

RGBAを16進数で表現することも可能です。 16進数は、0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,fの16文字で表します。 その16文字を使って、RGBAをそれぞれ二桁で書き表します。 00やffなど同じであれば1文字に省略することもできます。 さらに、透明度が最大の1の場合は、省略することができます。 このように、16進数のほうがとても短く書くことができるというメリットがあります。 その反面慣れていないとぱっとみて色を理解することは困難です。

HSLAを使った色の表現方法

HSLAは、

• Hueは色相
• Saturationは彩度
• Lightnessは明度
• Alphaは透明度

のことです。 Hueは色相環をイメージするとわかりやすいでしょう。 Saturation　彩度は100％なら鮮やかな色、0％はくすんだ色になります。 Lightness　明度は100％なら明るい色、0％は暗い色になります。 Alpha　透明度で、RGBAと同じで1がくっきり、0が透明です。1の場合、省略できます。

HSLAの便利な点

HSLAは他の色表現にはない、メリットがあります。 Lightnessをずらすだけで下のような色の変化をつけることができます。 また、Hue をずらすだけで下のような同じトーンの色変化をつけることができます。 その反面、書き方はやや長くなってしまいます。

透明度を指定するOpacity

透明度は、上で紹介した色表現でかく方法もありますが、たくさんCSSで指定しないといけない場合、すべてにaを0.5と記載するのはとても大変です。 そこでopacityプロパティをつかって要素全体を指定してあげると一回ですむようになります。 opacityプロパティの値は1~0で、alphaと同じで1がくっきり、0が透明です。 また、画像の透明度を変更したい場合は、rgbaではできませんが、opacityなら可能です。