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

HTML/CSS

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

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

 

スポンサーリンク

CSSでの色の指定方法

カラーネームで指定する

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

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

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

CSS

p { color : red}

 

16進数で指定する ①

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

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

CSS

p { color : #ff00ff }

 

16進数で指定する ②

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

CSS

p { color : #f00 }

 

10進数で指定する

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

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

CSS

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

 

10進数で透明度も同時に指定する

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

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

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

CSS

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

 

スポンサーリンク

カラーコード関連おすすめツール

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

 

クリックだけでカラーコード取得

Material UI Colors

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

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

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

 

高機能な配色パターン作成ツール

Adobe Color CC

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

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

 

Webページで使われているカラーコード取得

ColorPick Eyedropper

こちらは Chromeの拡張機能。

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

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