CSSで色を指定する

スポンサーリンク

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

  1. 色の名前を記述
  2. #で始まる6桁のカラーコードで指定
  3. RGB値で指定

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

色の名前で指定する

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

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

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

スポンサーリンク

カラーネーム指定のメリットとデメリット

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

  • 直感的に書くことができる
  • 覚えやすい
  • 簡潔

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

CSSのコード例

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

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

6桁のカラーコードで色指定する

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

カラーコード指定のメリットとデメリット

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

  • カラーバリエーションが豊富

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

  • 直感的に書くことができない
  • 覚えにくい

カラーコードで指定するCSSコード例

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

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

 

RGB値で色を指定する

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

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

カラーピッカー
カラーピッカー

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

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

RGB値で指定することのメリット

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

  • ある程度直感的に書ける
  • rgbaで指定することにより、透明度も加えることができる
  • 色合いを調整しやすい
  • カラーバリエーションが豊富

rgbaで指定するCSSコード例

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

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

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

まとめ

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

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

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

スポンサーリンク