色の基本！色の種類、色の三要素、色相環で見る色の関係、CSSの指定方法などを解説
色の正体って？｜物体色と光源色の違い
物体色と光源色
色とは、目で感じることができる視覚的な現象です。
色は大きく分けると、物体色(物体の色)と光源色(光の色)があります。
物体色と光源色で、色が見える仕組みや特徴が異なります。
【 物体色と光源色の大きな違い 】
| 物体色 |
|
|---|---|
| 光源色 |
|
原色とは他の色を混ぜて作ることができない、色の元（ベース）になる色のことです。
人間の目は、光を発しているものしか見られません。
物体は光と違って自ら発光することはできませんが、光の力を利用して視覚することが可能です。
光に照らされた物体は光を反射し、私たちの目に届いて視覚できます。
また、物体の物質によって反射・吸収する"色(波長)の光"が異なり、この違いが色となります。
多くの人は、明るい場所ではりんごが赤く見えます。
赤く見える流れは、最初にいろんな色(波長)が含まれる白色光がりんごへ当たります。
次に、りんごが白色光に含まれる赤色の光だけを反射し、それ以外の"色(波長)の光"は吸収されます。
最後に、反射した赤色の光が私たちの目に届くことで赤いりんごが見えます。
物体色の種類｜透明色と不透明色
物体色の種類は、透明色と不透明色があります。
透明色は色付きガラスや色付きの液体など透けて見える物体色で、不透明色はそれ以外の透過しない物体色のことです。
【 透明色と不透明色の大きな違い 】
| 透明色 |
|
|---|---|
| 不透明色 |
|
光源色の種類｜白色光とスペクトル光
光源色の種類は、大きく分けると白色光とスペクトル光があります。
白色光は複数の色(波長)が含まれた光で、スペクトル光は特定の色(単色の波長)が含まれた色付きの光です。
【 白色光とスペクトル光の大きな違い 】
| 白色光 |
|
|---|---|
| スペクトル光 |
|
色の三要素(三属性)｜色の基本的な3つの構成
色は、色相(どんな色か)・明度(明るさ)・彩度(鮮やかさ)の3つで構成されています。
【 色の三要素(三属性) 】
| 色相 |
光の波長/どんな色か。 例：赤、青、緑など 基本、"赤→橙→黄緑→青→紫→赤紫"の順で帯状に表現。 
|
|---|---|
| 明度 |
色の明るさ。 明度が高いほど白くなり、低いほど黒くなる。 
|
| 彩度 |
色の鮮やかさ。 彩度が高いほど鮮やかになり、低いほどくすむ。 
|
同じ色(色相)でも、明度・彩度によって違ってくるんだね！
色相を代表する色のことを純色と呼びます。
白、黒、灰色など色味のない色をを無彩色と呼びます。
一方、少しでも色味がある色を有彩色と呼びます。
色相環｜色相を円で表現
色相環とは
色相の帯を円状に表した、色相環があります。
色相環は、色相の帯の両端(赤と赤紫)を繋いで円として表します。
色相環から見る色の関係
色相環の
色関係暖色・寒色・中性色
色相上の色に対して心理的効果ごとに大きく分けると暖色・寒色・中性色の3種類があります。
【 暖色・寒色・中性色の違い 】
| 暖色 |
温かみが感じられる色。 膨張色とも言われ、色が前に出てきたり大きく見えたりする。 例）赤、橙、黄など |
|---|---|
| 寒色 |
寒さが感じられる色。 収縮色とも言われ、色が後退したり小さく見えたりする。 例）明るい青、青、青紫など |
| 中性色 |
暖色・寒色以外の中間な色。 例）黄緑、緑、赤紫など |
色相環の
色関係補色（ダイアド）
補色（ダイアド）は、正反対の位置にある色のことです。
〜 補色を使った配色効果 〜
色相環の
色関係類似色
類似色は、隣接した位置にある色のことです。
〜 類似色を使った配色効果 〜
色相環の
色関係分裂補色（スプリットコンプリメンタリー）
分裂補色（スプリットコンプリメンタリー）は、補色に対する類似色のことです。
〜 分裂補色を使った配色効果 〜
色相環の
色関係三角形関係（トライアド）
三角形関係（トライアド）は、正三角形の位置に置かれた3色のことです。
〜 三角形関係を使った配色効果 〜
色相環の
色関係正方形・長方形関係（テトラード）
正方形・長方形関係（テトラード）は、対象の色と補色を二組選んだ、合計4色のことです。
また、ダブル補色との違いは二組を合わせて必ず正方形または長方形となることです。
〜 正方形・長方形関係を使った配色効果 〜
色相環の
色関係ダブル補色
ダブル補色は、対象の色と補色を二組選んだ、合計4色のことです。
また、正方形・長方形関係（テトラード）との違いは任意の二組であることです。
ダブル補色を用いた配色は、非常に難しくバランスを崩しやすいため上級者向けです。
〜 ダブル補色を使った配色効果 〜
トーン（色調）｜明度と彩度をセットで表した"色の調子"
トーン（色調）とは明度と彩度をセットで表した"色の調子"のことです。
同じ色相でも、トーンの違いによって色の印象が変わります。
配色を決める際、トーンを合わせることで調和の取れた配色にすることができます。
【 トーンに関する記事 】
色のトーン！トーン17種類と色見本、トーンの分類を解説！トーンで調和の取れた配色を考えよう！
こじはなNote
色覚の多様性｜色弱は、日本人の男性5%、女性0.2%
区別可能な色が少ない色弱は、日本人の男性5%、女性0.2%で発症していると言われています。
日本人男性の割合は約20人に1人だよ！
クラスに1人いる可能性が高いレベル！
【 色覚の種類 】
| 一般（コモン） |
〜 色相を見たとき 〜 
|
|---|---|
| 1型（プロタン） |
〜 色相を見たとき 〜 
※見える色は実際とは異なる場合があります。 |
| 2型（デュータン） |
〜 色相を見たとき 〜 
※見える色は実際とは異なる場合があります。 |
| 3型（トリタン） |
〜 色相を見たとき 〜 
※見える色は実際とは異なる場合があります。 |
| 全色盲（1色覚） |
|
色覚異常を持つ方にとっても見やすいデザインにする必要があります。
誰もが区別しやすくするポイントは、文字と背景の明度差やコントラスト差を強化することです。
また、色の区別以外に文字やマークで補うのも1つの工夫ポイントです。
コントラストとは色相、明度、彩度など要素の違いを際立たせることです。
どの要素に対して差を広げるかによって印象が変わってきます。
【 色関係のコントラスト 】
| 色相コントラスト |
色相の差。補色の組み合わせが最も差が大きい。 |
|---|---|
| 明暗コントラスト |
明度の差。明るい色×暗い色。 |
| 彩度コントラスト |
彩度の差。鮮やかな色×くすんだ色。 |
Webセーフカラー｜どのモニターで見ても表示が変わりにくい色
Webセーフカラーとはどのモニターで見ても表示が変わりにくい色のことです。
Webセーフカラーは全部で216色あります。
ディスプレイに表示する画面の色を選ぶ際、Webセーフカラーを使うと印象が変わりにくくなります。
モニターによって、同じ色でも見え方が全然違うことあるよね！
【 Webセーフカラーの一覧が見られるサイト 】
Webセーフカラー web216 - Web Safe Colors
Webセーフカラーのカラーコードが一目でわかるWEB色見本
https://www.colordic.org/s
CSSの色指定
CSSで色を指定する書き方はたくさんあります。本記事では6種類ご紹介します。
CSS
色指定カラーネーム｜色の英語名で指定
赤はred、青はblueなどカラーネーム(色の英語名)で指定することができます。
CSSでは約280色ほどのカラーネームが定義されています。
【 カラーネーム一覧が見られるサイト 】
WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/
【 カラーネーム指定の書き方 】
セレクタ {
プロパティ: カラーネーム;
}
〜 例 〜
.color-test {
color: blue; /* 文字の色指定 */
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
色指定RGB｜光の三原色RGBの数値を指定
光の三原色であるRGBをそれぞれ0〜255の数値で指定することができます。
"rgb()"の中にRGBの数値を指定します。
RGBの数値は、左から順にR(red)、G(green)、B(blue)の値をカンマ区切りで指定します。
【 RGB指定の書き方 】
セレクタ {
プロパティ: rgb(Rの値, Gの値, Bの値);
}
〜 例 〜
.color-test {
color: rgb(255, 0, 0); /* 文字の色を赤に指定 */
background-color: rgb(0, 255, 0); /* 背景の色を緑に指定 */
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
色指定RGBA｜RGB＋透明度を指定
RGBAは、光の三原色であるRGBに加え、透明度を0.0〜1.0の数値で指定することができます。
透明度の値について、0.0は最大の透明度で、1.0は透明度0となり全く透過しない状態です。
"rgba()"の中にRGB＋透明度の数値を指定します。
RGBAの数値は、左から順にR(red)、G(green)、B(blue)、A(透明度)の値をカンマ区切りで指定します。
【 RGBA指定の書き方 】
セレクタ {
プロパティ: rgba(Rの値, Gの値, Bの値, 透明度);
}
〜 例 〜
.color-test {
color: rgba(255, 0, 0, 0.5); /* 文字の色：半透明な赤 */
background-color: rgba(0, 255, 0, 0.8); /* 背景の色：ちょっと透けた緑 */
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
色指定16進数｜光の三原色RGBを16進数で指定
16進数で、光の三原色であるRGBの値を指定できます。
"#"＋16進数6桁で表現します。
この6桁は、左2桁をR(red)、中央2桁をG(green)、右2桁をB(blue)の値となります。
16進数は0~Fで表現する数のことです。
ちなみに、私たちが日常で使う0~9で表現できる数は10進数です。
例）16進数"A"=10進数"10"、16進数"F"=10進数"15"、16進数"10"=10進数"16"、16進数"FF"=10進数"255"となります。
【 10進数・16進数の対応表 】
| 10進数 | 16進数 |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10進数 | 16進数 |
|---|---|
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
| 16 | 10 |
| 17 | 11 |
| 18 | 12 |
| 19 | 13 |
| 10進数 | 16進数 |
|---|---|
| 20 | 14 |
| … | … |
| 26 | 1A |
| … | … |
| 31 | 1F |
| 32 | 20 |
| … | … |
| 240 | F0 |
| … | … |
| 255 | FF |
【 色に対応した16進数値の一覧が見られるサイト 】
WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/
【 16進数で指定の書き方 】
セレクタ {
プロパティ: #Rの値(2桁)Gの値(2桁)Bの値(2桁);
}
〜 例 〜
.color-test {
color: #ff0000; /* 文字の色を赤に指定 */
background-color: #00ff00; /* 背景の色を緑に指定 */
}
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
色指定HSL｜色の三要素の色相(Hue)・彩度(Saturation)・明度(Lightness)で指定
HSLは色の三要素である色相(Hue)・彩度(Saturation)・明度(Lightness)をそれぞれ指定する方法です。
"hsl()"の中に"色の三要素"の数値を指定します。
"色の三要素"の数値は、左から順に色相(Hue)、彩度(Saturation)、明度(Lightness)の値をカンマ区切りで指定します。
【 HSL指定の書き方 】
セレクタ {
プロパティ: hsl(色相(Hue)の値, 彩度(Saturation)の値, 明度(Lightness)の値);
}
〜 例 〜
.color-test {
color: hsl(0, 100%, 50%); /* 文字の色：鮮やかな赤 */
background-color: hsl(120, 80%, 20%); /* 背景の色：暗い緑 */
}
【 "hsl()"に指定する値の説明 】
| 色相(Hue) |
色相環上の角度。 整数値で指定。 例）0(0°)が赤、120(120°)が緑、240(240°)が青
|
|---|---|
| 彩度(Saturation) |
鮮やかさの度合い。 0%~100%のパーセンテージ(%)で指定。 例）80%は鮮やか気味な色、10%は くすみ気味な色
|
| 明度(Lightness) |
明るさの度合い。 0%~100%のパーセンテージ(%)で指定。 例）80%は明るめな色、50%は中間、20%は暗い色
|
【 コード例 】
ブラウザで実行するとこんな感じです。
CSS
色指定HSLA｜HSL＋透明度を指定
HSLAは、色の三要素である色相(Hue)・彩度(Saturation)・明度(Lightness)に加え、透明度を0.0〜1.0の数値で指定することができます。
透明度の値について、0.0は最大の透明度で、1.0は透明度0となり全く透過しない状態です。
"hsla()"の中にHSL＋透明度の数値を指定します。
HSLAの数値は、左から順に色相(Hue)、彩度(Saturation)、明度(Lightness)、A(透明度)の値をカンマ区切りで指定します。
【 HSLA指定の書き方 】
セレクタ {
プロパティ: hsla(色相(Hue)の値, 彩度(Saturation)の値, 明度(Lightness)の値, 透明度);
}
〜 例 〜
.color-test {
color: hsla(0, 100%, 50%, 0.5); /* 文字の色：鮮やかな赤＋半透明 */
background-color: hsla(120, 80%, 20%, 0.8); /* 背景の色：暗い緑＋ちょっと透明 */
}
【 "hsl()"に指定する値の説明 】
| 色相(Hue) |
色相環上の角度。 整数値で指定。 例）0(0°)が赤、120(120°)が緑、240(240°)が青
|
|---|---|
| 彩度(Saturation) |
鮮やかさの度合い。 0%~100%のパーセンテージ(%)で指定。 例）80%は鮮やか気味な色、10%は くすみ気味な色
|
| 明度(Lightness) |
明るさの度合い。 0%~100%のパーセンテージ(%)で指定。 例）80%は明るめな色、50%は中間、20%は暗い色
|
【 コード例 】
ブラウザで実行するとこんな感じです。
物体は光を反射してるから見えるんだ〜！なんだか不思議！