【CSS】色の指定方法とカラーコード取得ツールの紹介

CSSで色の指定方法についてまとめました。

好みの色を16進数で取得するのはめんどい、というかムリなので、色を取得するツールも紹介します。

CSSでの色の指定方法

これはそのまま色の名前で指定する方法です。

赤なら「red」、青なら「blue」という感じです。

簡単ですが微妙な色は表現できません。

CSS

p { color : red}

「#」に続けて RGB（Red Green Blue）の値をそれぞれ2桁ずつの16進数で指定する方法で、一番メジャーな方法です。

例えば、赤なら #ff0000、青なら #0000ffといった感じで、それぞれ 00~ff までの256段階で指定します。

CSS

p { color : #ff00ff }

#ff0000 形式で例えば#112233 のように同じ数字が並ぶ場合、#123 のように 3ケタにすることができます。

CSS

p { color : #f00 }

RGBを 10進数（0~255までの256段階）で表す方法です。

rgb( ) のカッコの中に RGBをカンマで区切って入れます。

CSS

p { color : rgb(255, 0, 0) }

rgb( ) の形式に透明度を表す alpha を追加した形式です。

4番目の値に 0~1までの実数を入れます。

0は完全に透明で、0.5だと 50%透明、1で不透明です。

CSS

p { color : rgba(255, 0, 0, 0.5) }

好みの色のカラーコードを取得するためのツールを紹介します。

カラーパレットが表示されていて、使いたい色をクリックするだけでカラーコードがコピーされます。

上部のメニューからコピーする形式も選べるので非常に便利。

Googleのマテリアルデザインの色なので、いい感じに仕上がります^^

フォトショで有名なアドビが無料で提供している配色パターン作成ツール。

直感的に色を変化させられ、5色の配色を確認しながら微妙な調整ができます。

こちらは Chromeの拡張機能。

Webサイトを見ていると、「あ、この色使いたいな」ってことがあると思います。

そういうときにこれを起動させて、調べたい色の上でクリックするとカラーコードが表示されるのでコピーして使えます。