CSSで使う色指定の種類、画像から色(カラーコード)を調べる方法を知ろう

今回のお題

クライアント

ナビゲーションに背景色をいれて、もっとメニューだと分かりやすい見た目に欲しい。ナビゲーションの配色は、ロゴと同じで、背景色が青・文字の色は白にしてください。

画像から色(カラーコード)を調べる方法

1.グラフィックツールで調べる
2.Chrome検証ツールで色を調べる

CSSで使われる4つの色指定方法

1. カラーキーワード
2. RGB/RGBA
3. Hex(16進数カラーコード)
4. HSL/HSLA
Chrome検証ツールで別の色指定形式も分かる

実習：navの背景色・文字色を指定する

1.CSSで色を指定する
2.余白を調整する

画像から色(カラーコード)を調べる方法

1.グラフィックツールで調べる

Abobe IllustratorやPhotoshopで、スポイトツールとカラーピッカーを使って色を調べることができます。Webデザイン/コーディングを行う場合は、デザインデータがあるので、この方法を使うことが多いでしょう。

1.画像もしくはデザインデータを開く
2.スポイトツールで色を選ぶ
3.取得した色をダブルクリックしてカラーピッカーを開く

このカラーピッカーの情報から、CSSで背景色や文字色を指定します。
色の設定方法はいくつかあります。

2.Chrome検証ツールで色を調べる

今回のように画像で使われている色を1つだけ調べたい、などグラフィックソフトを立ち上げるのは面倒なときもあります。
そんな時は、Google Chromeを使うと便利です。

1.画像をGoogle Chromeで開く
2.検証ツールを立ち上げる
3.bodyタグを選択
4.Stylesパネルでスウォッチのような部分をクリック
5.カラーピッカーが開く
6.色を知りたい部分をクリック

CSSで使われる4つの色指定方法

1. カラーキーワード

カラーキーワードは、whiteやblackなどの色名を記入する方法です。
CSSの書き方入門講座では、このカラーキーワードを使って色を指定しました。

カラーキーワードのメリットは、ひと目でどんな色にしたいかが分かること。

.box1{
    color: red;
    background: lightyellow;
}

このように書かれていれば、HTMLやCSSに詳しくなくても、どんな配色にしたいかはイメージできますね。

カラーキーワードを使用するデメリットは、設定できるカラーが限られている事。
微妙なニュアンスの色の表現には向いていません。
今回の「ロゴと同じ青」もカラーキーワードでは表現できない色です。

下記ページからカラーキーワードの一覧が確認できます。
<color> - CSS: カスケーディングスタイルシート | MDN

使いたい色が決まっている場合、そのカラーキーワードを探すのも大変です。
このため、blackやwhite、redなどハッキリとした色以外にはあまり使いません。

2. RGB/RGBA

RGBは光の三原色（Red・Green・Blue）の混ざり具合で色を表現する方法です。
CSSではRed・Green・Blueの各成分の値をrgb(R, G, B)という形で書きます。

RGBの値は、IllustratorなどAdobeソフトのカラーピッカーから確認できます。

ナビゲーション部分の背景色に適用するには、下記のように書きます。

nav{
  background: rgb(58, 110, 188);
}

/* カンマで区切らなくてもOK。お好きな方で書いてみてください */
nav{
  background: rgb(58 110 188);
}

【ブラウザ表示】

●RGBAとは

CSSの色指定では rbga () という書き方も使われています。
最後に加えられた「a」はAlpha(透明度)を設定します。

設定できる数値は、下記のどちらかです。

0.0 (完全透過) から 1.0 (完全不透明) の間
％指定（0％が完全透過、100%が完全不透明）

background: rgba(58, 110, 188, 0.5);
background: rgba(58, 110, 188, 50%);

/* カンマで区切らない場合は、スラッシュで透明度を区切ります */
background: rgba(58 110 188 / 70%);

※今回のナビゲーション部分では、透明度指定は使いません。

3. Hex(16進数カラーコード)

HexもRGB（Red，Green，Blue）を使った色指定方法。
rgb()との違いは、R,G,Bの値をそれぞれ2桁ずつ16進数で表していることです。
#FFFFFFのように、# + カラーコードで指定します。

カラーコードもIllustratorなどAdobeソフトのカラーピッカーから確認できます。
下図、赤線の場所に表示されているのが16進数カラーコードです。

nav{
  background: #3A6EBC;
}

１つだけコピーして貼り付ければ良いので、楽ですね。
古くから使われてきた色指定方法でもあるので、Webコーディングではオーソドックスと言っても良いほどよく使われています。

カラーコードの桁数の違い

#から始まるものの、6桁ではないカラーコードを目にする機会もあります。

【3桁表記の場合】
3桁のカラーコードは、6桁を省略したものです。
◇ #FFFFFFや◆ #334477など同じ数字が2つずつ連続する場合に限り、省略して書くことができます。

例

#FFFFFF → #FFF
#334477 → #347
#cc0000 → #c00

【8桁、4桁の場合】
#3a6ebcabのように8桁で書かれている場合は、最後の2つの数字が透明度を表しています。透明度の指定をする場合は、後記のRGBAを使う場合が多いのでが、時々Hexで書かれているコードもあります。

例）#000000aa

同じ数字が2つずつ連続する場合は、省略して4桁にできます。

例：#000000aa→#000a

Hex/RGBはどちらが良い？

CSSで使用する色指定としては、Hex(16進数カラーコード)とRGBAの２つが主流です。この２つはどちらを使っても問題ありません。

透明度がある場合はRGBAの方が指定が分かりやすく、グラフィックソフトで設定されている不透明度をそのまま入力することが出来ます。このため、透けるような色の指定にはRGBAを使うことが多いです。

4. HSL/HSLA

HSLは、H(Hue:色相)・S（Saturation:彩度）・L（Lightness/Luminance:輝度）の3要素を使って色を表現する方法です。RGBAと同じく、A（Alpha:透明度）を加えたHSLAも使えます。

【例】

background: hsla(290, 55%, 80%, 0.4);
color: hsl(290, 55, 50%);

HSL/HSLAは、RGBより直感的な色指定が出来る方法として、CSS3から導入されました。色相やトーンなど、統一性のあるカラーリングを作りたい時に便利です。

ただし、Adobe IllustratorやXDなどでは“HSB”という別の色の考え方が採用されているため、デザインツールから色を拾いにくいのが難点。

Chrome検証ツールで別の色指定形式も分かる

Google Chromeの検証ツールではHex(16進数カラーコード)、RGB、HSLを簡単に切り替えることができます。

HSLで色を指定しなければいけないときなどに便利です。
※検証ツール上で切り替えても保存されないので、表示された数値をCSSに書き写して使います。

実習：navの背景色・文字色を指定する

ナビゲーション部分の背景色・文字色を指定して、表示を整えましょう。

1.CSSで色を指定する

リンクになっている文字は白にしたいので、nav aをセレクタにcolorを指定します。
色の指定方法はHex、RGBどちらを使っても構いません。

style.css（例）

nav{
  background: rgb(58, 110, 188);
}

nav a{
  color: rgb(255, 255, 255);
}

ブラウザで、色の変更が出来ているか確認してください。

2.余白を調整する

背景色、文字色は指定通りになりました。
ですが、このままだとナビゲーションっぽく見えません。

nav部分の高さを少し大きくして、強調してみましょう。
paddingを追加します。