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) }
カラーコード関連おすすめツール
好みの色のカラーコードを取得するためのツールを紹介します。
クリックだけでカラーコード取得
カラーパレットが表示されていて、使いたい色をクリックするだけで カラーコードがコピーされます。
上部のメニューからコピーする形式も選べるので非常に便利。
Googleのマテリアルデザインの色なので、いい感じに仕上がります^^
高機能な配色パターン作成ツール
フォトショで有名なアドビが無料で提供している配色パターン作成ツール。
直感的に色を変化させられ、5色の配色を確認しながら微妙な調整ができます。
Webページで使われているカラーコード取得
こちらは Chromeの拡張機能。
Webサイトを見ていると、「 あ、この色使いたいな」ってことがあると思います。
そういうときにこれを起動させて、調べたい色の上でクリックするとカラーコードが表示されるのでコピーして使えます。