CSSで色を指定する

CSSで色を指定する方法は主に3つあります。

それぞれどのように書けばよいのか、詳しく見ていきましょう。

Contents

色の名前で指定する

既に決められているカラーネームで指定します。

例えば、blue, red, pink, greenなどの様に英語で色の名前を指定します。

この方法では指定できるバリエーションが少ないと思われがちですが、その数なんと140通りもあります。
詳しい、色の指定方法は、こちらの記事を参考にされるとよいでしょう。

カラーネームで指定することのメリットは以下の通りです。

また、デメリットとしては、すべてのブラウザに対応しているわけではない、という点が挙げられます。

See the Pen YzqdzyQ by M2RnRT (@m2rnrt) on CodePen.

このように、色の名前を値として入力することで、簡単に指定することができます。
微妙な色の名前は憶えづらいですが、よくある色を指定したいときには、最も効率的に指定することができます。

ハッシュ＃から始まる6桁のコードで指定します。
例えば、「#000000」とすると、黒色が指定できます。この組み合わせは、数えきれないほどあり、あらゆる色を指定することができます。
こちらのウェブサイトを参考にすれば、当分色に困ることはないでしょう。

カラーコードで色を指定する方法のメリットは以下の点が考えられます。

デメリットは次のことが考えられます。

See the Pen rNeoLNX by M2RnRT (@m2rnrt) on CodePen.

すべて、＃から始まる6桁のコードで記述されていることが分かるかと思います。
例のような微妙な色は、色の名前ではうまく表現できませんが、カラーコードならどんな色も表現できます。

光の三原色である赤、緑、青（Red, Green, Blue）の度合いで色を指定する方法です。
この指定方法は最もよく使われます。なぜならば、rgbaで指定すると、透明度も一緒に指定できるからです。

Googleで「カラーピッカー」と検索すると、値をどのようにすればよいのかが最速でわかります。

カラーピッカーでは、複数の指定方法による数値が確認できます。
前の項で紹介したカラーコードも一緒に確認できます。

R, G, B の値はそれぞれ0～255の範囲で指定できます。さらに、Aを0～1の範囲の少数で指定することで、透明度を与えることができます。

RGB値で指定することのメリットに次のことが挙げられます。

See the Pen wvGRvdY by M2RnRT (@m2rnrt) on CodePen.

例の様に、rgbに加え、rgbaとして値を入力すると、透明度が追加されます。aの値は0～1までの少数で記載し、0だと完全に透明で1だと透明度はありません。

例の青色では、上のほうが、透明度は指定せず、下のほうは透明度は0.7と指定してあります。

これで色の指定方法が分かるようになりました。これでどんな色もあなたの手の中にあります。
しかし、大事なことはどのように色を使っていくかです。

色と感情は直結していて、見ている人にどんな印象を持ってもらいたいかによって使い分けるといいよ。

色の世界も奥が深いようですねえ。