透明度もOK！色の基本とCSSの色指定方法あれこれ（color-mixもあります）

※この記事は 4 分程度でお読みいただけます。

WEBサイトをデザインする時、さまざまな色を使ってレイアウトをしていきます。通常は、Figmaなどのグラフィック系のアプリで色を選びながら作っていきますが、Figmaで表示されている色のコードを、何も考えずにそのままコピーして使われている方も多いと思います。

もちろんそのやり方でもデザインはできます。ただ、色の基本を理解していないと、なかなかバランスのよい配色ができなかったり、色を調整するたびにアプリを立ち上げたり、面倒なシーンもたくさんでてきます。

今回は、WEBデザインやCSSで色を使うにあたって、知っておきたい色の基本の知識と、カラーコードだけでなく、コーディングで使える便利な色指定の方法を解説していきます。

まずは基本の色の話

まずはじめに、色の基本的な考え方を解説します。このあたりがまったく分からないと、CSSの色指定でかなり苦労します。おおよそのイメージでよいので理解しておきましょう。

モニターで見る色は「赤」「緑」「青」の組み合わせ

パソコンやスマートフォンのディスプレイで表示される色は、実は「赤」「緑」「青」の3色の組み合わせてつくられています。ディスプレイのなかにとても小さい液晶の粒がびっしりと敷きつめられていて、それぞれの液晶（画素といいます）が個別に発色することで、文字や写真、イラストや動画などを表示しています。

一般的なモニターの場合、1インチ（約2.54cm）に72個や96個、高画質のモニターになると200個以上の液晶が敷きつめられています（1インチ四方で4万個）。スマートフォンの場合はさらに高画質になって、400個以上になることもあります（1インチ四方でなんと16万個！）。

この値はPPI（Pixels Per Inch）と呼ばれます。数値が大きいほど液晶の粒は小さくなっていくので、より細かな表示ができるようになります。スマホの画面のほうが写真がきれいに見えるのは、この理由です。PPIは、72ppiや200ppiのように表記します。

それぞれの液晶が、「赤（Red）」「緑（Green）」「青（Blue）」の強弱をつけて発色することで、さまざまな色がつくられます。これをRGBカラー（加法混色）といいます。

紙などの印刷物は「シアン」「マゼンタ」「イエロー」「黒」の組み合わせ

一方、紙などの印刷物の場合は、「シアン（Cyan）」「マゼンタ（Magenta）」「イエロー（Yellow）」「キープレート（key plate ※黒ですがKuroではないです）」の4色を組み合わせてつくられます。一般的なインクジェットプリンターの場合、この4色のインクをセットしますが、極小のインクの粒を紙に濃淡をつけて吹きつけることで、印刷を行っています。この4つのインクを使った色のつくり方を、CMYKカラー（減法混色）といいます。

印刷物の場合は、1インチにおける粒の密度の単位はDPI（Dots Per Inch）であらわされます。一般的な印刷の場合は150～300dpi程度、写真など高画質の印刷物では、350dpi以上になることもあります。

RGBカラーとCMYKカラーで異なる色の混ざり方

液晶で使うRGBカラーと、印刷で使うCMYKカラーは、色のつくり方に大きな違いがあります。液晶で使う3つの色は光の三原色と呼ばれ、混ぜれば混ぜるほど明るくなり、白に近づいていきます。印刷物で使う3つの色（キープレートを除く）は色の三原色と呼ばれ、混ぜれば混ぜるほど暗くなり、黒に近づいていきます。いろんな絵の具を混ぜると汚く暗い色になっていくのと同じです。

RGBカラーは、ディスプレイのすべての液晶がついていない状態から色が入るのでベースが黒、CMYKカラーは真っ白な紙にインクで着色していくのでベースが白になります。CMYKカラーの黒（key plate）は、よりはっきりとした黒をつくったり、色を混ぜずに1色のインクで黒を印刷するために使います。

WEBデザインは液晶での表示なので、これ以降はすべてRGBカラーの内容で解説を進めていきます。

色の種類「色相」

色は、「色相」「彩度」「明度」の3つの組み合わせでつくられます。これを色の三属性といいます。まず色相は「赤」「青」「緑」「黄」など、色の種類のことです。色相環という図であらわされることが多いですが、基点になる0°の赤からはじまり、120°は緑、240°は青、360°は基点に戻って赤、のように、角度で指定します。

色の鮮やかさ「彩度」と、光の強さ「明度」

彩度は色の鮮やかさです。彩度が高いほど純粋で鮮やかな色になり、彩度が低くなると色がくすみ、黒やグレーなど無彩色に近づいていきます。0～100%の割合で指定され、0%が完全な無彩色、100%が最も鮮やかな色（純粋な色）になります。

明度は色の明るさです。WEBデザインなどCSSで使用される場合は、明度が高いほど白に近づき、低くなると黒に近づきます。こちらも0～100%の割合で指定され、0%が最も暗い色（黒）、100%が最も明るい色（白）、50%が純色（純粋な色）になります。

色はこの3つの組み合わせで決められます。例えば「色相 0° / 彩度 100% / 明度 50%」の場合は、純粋な赤になります。

「トーンをあわせる」というのは「彩度」と「明度」をあわせること

よく、トーンをあわせるという言い方をしますが、これはいわゆる彩度と明度をあわせた配色のことを指します。複数の色を使う時、彩度や明度がばらばらだと、まとまりのない落ち着かない印象を与えてしまいます。

彩度と明度をあわせずに色を指定すると、

このように、統一感がなく、バランスの悪い配色になります。しかし、彩度と明度をあわせて色を指定すると、

このように、トーンがあったバランスのよい配色になります。デザインのなかで、ここだけ色が浮いて見える、という時は、この彩度と明度を確認してみてください。あまりにも他の色と数値がかけ離れているようでしたら、彩度と明度を近い値に調整してあげれば、色がなじむようになります。

基本的なCSSの色の指定方法

それでは、この色の基本をおさえつつ、CSSの色指定の解説に入りたいと思います。CSSで色の指定をする場合、一般的には「16進数（#からはじまるカラーコード）」や「RGB値」がよく使われますが、それ以外でもいろいろな指定方法があります。キーワード指定、カラーコード指定、RGB指定、HSL指定、HWB指定の5種類をご紹介します。

キーワードで指定

色名のキーワードを使った指定方法です。CSSには、あらかじめ定義された色名が約150種類用意されていて、キーワードを指定することで、該当の色を適用させることができます。決められている色しか使えないため、企業のブランドカラーにあわせる、色を微調整してトーンをあわせる、のような使い方はできません。

上記の理由から、この指定方法が使われることはほとんどありませんが、「white（白）」「black（黒）」「transparent（透明）」など、基準の色で使われることはあります。特に「transparent」は、すでに設定されている罫線の色を消したり、最後に説明する「color-mix」を使った色の組み合わせで、よく使用されます。

/* 白を指定 */
color: white;

/* 黒を指定 */
color: black;

/* 赤を指定 */
color: red;

/* 透明を指定（色がない透明の状態） */
color: transparent;

指定できるキーワードについては、MDN「named-color」をご覧ください。

16進数カラーコード（#からはじまる）で指定

最も一般的でよく使われる、16進数カラーコードを使った指定方法です。#からはじまる色の指定方法は、グラフィック系ツールでもCSSでもおなじみだと思います。カラーコードをそのままコピーして使われている方も多いと思いますが、この#に続く文字列、ちゃんと意味があります。

#から続く文字列が6桁で指定されている場合、最初の2桁が赤（Red）、次の2桁が緑（Green）、最後の2桁が青（Blue）を指しています。この2桁を16進数という数え方で、強さを指定しています。通常、生活のなかで数字を数える時は、10ごとに桁が増える10進数を使っています。コンピュータの世界では、16ごとに桁が増える16進数がよく使われます。

16進数は、「0123456789」の数字に、アルファベット「ABCDEF」を加えた16個の文字が使われます。「00」からはじまり「01」「02」と数字が増えていって「09」の次は「0A」になります。「0F」までいくと桁が増えて「10」になって、また「11」「12」・・・「1E」「1F」桁があがって「20」「21」・・・と増えていきます。

カラーコードによる指定では、#から続く6桁の文字列で、2桁ずつRGBそれぞれの光の強さを、16進数の「00（最小）」から「FF（最大）」までの値で指定しています。つまり、最初の2桁が「00」の時は赤がまったく光っていない状態、「FF」の時は赤が100%の強さで光っている状態です。

色の基本で解説した、RGBカラーの光の三原色を思い返してください。RGBの3色ともまったく光っていない状態は、真っ暗なので「#000000」は「黒」になります。反対に、RGBすべてが100%で光っている状態は「#FFFFFF」で白になります。Rだけが100%で、GBが光っていなければ「#FF0000」で赤になります。

なお、カラーコードで使用される英数文字は、大文字と小文字どちらで指定しても問題ありません。また、RGBそれぞれの値がすべて、同じ文字のペア（00、AA、FFなど）になっているときは、「#FF0000」を「#F00」に、「#66DDBB」を「#6DB」にのように、3桁に省略しての指定が可能です。

/* 白を指定（または省略して#FFF） */
color: #FFFFFF;

/* 黒を指定（または省略して#000） */
color: #000000;

/* 赤を指定（または省略して#F00） */
color: #FF0000;

/* ベージュを指定（色のキーワード「beige」 */
color: #F5F5DC;

RGBで指定（R：赤 / G：緑 / B：青）

カラーコードで解説した16進数を、そのまま数値に置き換えたのがRGBでの指定です。16進数を10進数に置き換えると、最小の「00」が「0」、最大の「FF」が「255」になります。この0～255までの数値で、光の強さを指定します。

従来は、RGBの値をカンマで区切って指定していましたが、現在ではカンマで区切らない指定方法が推奨されています。この後にご紹介する透明度の指定でも、カンマで区切らない方が指定しやすいので、ぜひこちらを使ってください。

カラーコードと同様に、左からRGBの順番でそれぞれの光の強さを指定します。

/* ---- 現在推奨されている指定方法（カンマ不要） ---- */

/* 白を指定（#FFFFFFと同じ） */
color: rgb(255 255 255);

/* 黒を指定（#000000と同じ） */
color: rgb(0 0 0);

/* 赤を指定（#FF0000と同じ） */
color: rgb(255 0 0);

/* ベージュを指定（色のキーワード「beige」。#F5F5DCと同じ */
color: rgb(245 245 220);


/* ---- 従来の指定方法（カンマあり） ---- */

/* 白を指定（#FFFFFFと同じ） */
color: rgb(255, 255, 255);

/* 黒を指定（#000000と同じ） */
color: rgb(0, 0, 0);

/* 赤を指定（#FF0000と同じ） */
color: rgb(255, 0, 0);

/* ベージュを指定（色のキーワード「beige」。#F5F5DCと同じ */
color: rgb(245, 245, 220);

HSLで指定（H：色相 / S：彩度 / L：明度）

RGBの光の強さではなく、色相（Hue）、彩度（Saturation）、明度（Lightness）を組み合わせたHSLでの指定です。RGBで指定する場合は、同じ色相で彩度や明度だけを微調整したい、同じトーンで色相だけを変えたい、という場合は、グラフィックツールなどで色をつくり、カラーコードやRGB値を確認するしかやり方がありませんでした。しかし、HSLでの指定の場合は、何かしらの基準の色から、同系色やトーンをあわせた色を指定することが容易になります。

HSLもRGBと同様に、カンマで区切らない指定方法が推奨されています。左から、色相（0～360。色相だけ単位は不要）、彩度（0%～100%。純色は100%）、明度（0%～100%。純色は50%）で指定します。

/* ---- 現在推奨されている指定方法（カンマ不要） ---- */

/* 赤を指定（#FF0000と同じ） */
color: hsl(0 100% 50%);

/* 赤のパステル調の色を指定 */
color: hsl(0 50% 80%);

/* 赤の明度を少し落とした色を指定（ボタンのホバー時など） */
color: hsl(0 100% 40%);

/* 彩度 60%、明度 50%の赤を指定（トーンを揃えた色 ①） */
color: hsl(0 60% 50%);

/* 彩度 60%、明度 50%の緑を指定（トーンを揃えた色 ②） */
color: hsl(120 60% 50%);

/* 彩度 60%、明度 50%の青を指定（トーンを揃えた色 ③） */
color: hsl(240 60% 50%);


/* ---- 従来の指定方法（カンマあり） ---- */

/* 赤を指定（#FF0000と同じ） */
color: hsl(0, 100%, 50%);

/* 赤のパステル調の色を指定 */
color: hsl(0, 50%, 80%);

/* 赤の明度を少し落とした色を指定（ボタンのhover時など） */
color: hsl(0, 100%, 40%);

/* 彩度 60%、明度 50%の赤を指定（トーンを揃えた色 ①） */
color: hsl(0, 60%, 50%);

/* 彩度 60%、明度 50%の緑を指定（トーンを揃えた色 ②） */
color: hsl(120, 60%, 50%);

/* 彩度 60%、明度 50%の青を指定（トーンを揃えた色 ③） */
color: hsl(240, 60%, 50%);

HWBで指定（H：色相 / W：白を足す / B：黒を足す）

最後にご紹介するのが、数年前に主要なほとんどのブラウザで対応された新しい指定方法、HWBです。HWBは、色相（Hue）、白を足す（Whiteness）、黒を足す（Blackness）で指定します。HSLでは彩度や明度で色を調整しましたが、HWBの場合は、どちらかというと絵の具を混ぜるような感覚で、色に白や黒を混ぜていきます。HSLよりも、より直感的に色を調整することができます。

HWBは新しい指定方法のため、RGBやHSLのような従来のカンマありの指定はできません。左から、色相（0～360。色相だけ単位は不要）、白（0%～100%。純色は0%）、黒（0%～100%。純色は0%）で指定します。

/* 赤を指定（#FF0000と同じ） */
color: hwb(0 0% 0%);

/* 赤に白を20%足した指定 */
color: hwb(0 20% 0%);

/* 赤に黒を20%足した指定 */
color: hwb(0 0% 20%);

/* 赤に白を20%、黒を40%足した指定 */
color: hwb(0 20% 40%);

指定による色の変化は、下のようになります。左上の「白 0% / 黒 0%（純粋な赤）」を基点に、右にいくほど白の足す量を増やし、下にいくほど黒の足す量を増やしています。なお、白と黒の合計値が100%を超えた場合は、白と黒の色の比率を守ったまま自動で再計算され、無彩色になります。ですので、「白 60% / 黒 60%」「白 80% / 黒 80%」「白 100% / 黒 100%」は、いずれも白と黒の割合が同じなので、ちょうど中間的なグレーになります。

See the Pen 2943_01 by Matsuyama (@nakanaka-design) on CodePen.

明度や彩度ではなく、白黒の量でより直感的な指定ができるHWB。ボタンのホバー時に少しだけ白っぽく（黒っぽく）したいなど、基準にある色を調整したい時に便利です。

しかしこのHWB指定、CSSでは問題なく使用できますが、新しい指定方法のため、FigmaやIllustrator、Photoshopなどのグラフィックツールではほとんど対応していません（今後対応していくと思われます）。その場合、YUTSUZO.COM「カラーコード相互変換ツール」のようなサイトで他の指定方法から変換するか、各アプリの拡張機能などを使って指定します。

いずれにしても、ベースになる色が決まってしまえば、その色からの調整ができるので、HSL同様に便利に使うことができます。

グラフィック系アプリや VSCode ならかんたんに切り替えができる

HWB以外の色については、グラフィック系アプリや Visual Studio Code でかんたんに切り替えることができます。コーディングをするうえで調整がしやすい指定方法を選択して、CSSで使用してください。

透明度（アルファチャンネル）も指定できる

CSSで透明度を指定するといえば「opacity」ですが、「opacity」を指定すると要素全体に透明度が反映されるため、子孫要素（文字や画像など）も一緒に透明になってしまいます。指定した背景色や罫線だけを透明にしたい、というときには、色自体に直接透明度（アルファチャンネル）を指定します。

16進数カラーコードで透明度を指定

16進数カラーコードでは、#に6桁の文字列で色を指定しましたが、7～8桁目を追加することで、透明度を指定することができます。透明度も16進数で指定するので、「00」が「透明度 0%（透明）」、「FF」が「透明度 100%（透明ではない）」の状態になります。6桁指定と同様に、8桁の場合も省略可能なので、すべての2桁がペアの場合は、まとめて4桁で指定することもできます

/* 透明度0%の赤を指定（または省略して#F000。透明で見えない状態） */
color: #FF000000;

/* 透明度50%の赤を指定（半透明の状態） */
color: #FF000080;

/* 透明度100%の赤を指定（または省略して#F00F。通常の赤） */
color: #FF0000FF;

16進数カラーコードでの透明度の指定は、数値のパーセント（0～100%）と16進数（00～FF）の置き換えが難しいので、感覚的にはすこし分かりづらいかもしれません。ただ、「00」が「透明」、「FF」が「透明ではない」などでは、使えるシーンはあると思います。

See the Pen 2943_02 by Matsuyama (@nakanaka-design) on CodePen.

RGB・HSL・HWBで透明度を指定

RGB、HSL、HWBの場合は、もっと分かりやすく透明度を指定できます。しかし、色指定のカンマの有無で、透明度の指定方法が変わるので注意が必要です。

現在推奨されているカンマ無しの指定の場合は、3つの数字のあとに「/」で区切り、透明度を指定します。指定する値は「0%～100%」か、または「opacity」と同様に「0～1」で指定します。

/* ---- RGBで透明度を含めた指定 ---- */

/* 透明度50%の赤を指定（#FF0000と同じ） */
color: rgb(255 0 0 / 50%);
color: rgb(255 0 0 / 0.5);


/* ---- HSLで透明度を含めた指定 ---- */

/* 透明度50%の赤を指定（#FF0000と同じ） */
color: hsl(0 100% 50% / 50%);
color: hsl(0 100% 50% / 0.5);


/* ---- HWBで透明度を含めた指定 ---- */

/* 透明度50%の赤を指定（#FF0000と同じ） */
color: hwb(0 0% 0% / 50%);
color: hwb(0 0% 0% / 0.5);

カンマありの指定の場合は、透明度以外の部分での書き換えが必要になります。色指定の部分の「rgb」を「rgba」に、「hsl」を「hsla」に書き換えたうえで、3つの数字のあとに「,（カンマ）」で区切り、透明度を指定します。こちらも、「0%～100%」で「0～1」で指定します。なお、HWBはカンマありの指定にそもそも対応していないため、この指定方法はできません。

/* ---- RGBで透明度を含めた指定 ---- */

/* 透明度50%の赤を指定（#FF0000と同じ） */
color: rgba(255, 0, 0, 50%);
color: rgba(255, 0, 0, 0.5);


/* ---- HSLで透明度を含めた指定 ---- */

/* 透明度50%の赤を指定（#FF0000と同じ） */
color: hsla(0, 100%, 50%, 50%);
color: hsla(0, 100%, 50%, 0.5);

どちらの指定方法を使っても、まったく同じ色を指定できますが、カンマありの場合は、透明度以外の部分の書き換えが必要になります。使いやすさを考えると、推奨されているカンマ無しの指定方法がおすすめです。

新しい指定方法「color-mix」

最後にご紹介するのが、「color-mix」を使用した指定方法です。「color-mix」は、色を直接指定するというよりも、2つの色を組み合わせる指定方法です。

まず、基本的な指定方法が下のようになります。

まず最初に、色をどのように混ぜるかを指定します。現在は、一般的には「in srgb」を指定することが多いですが、色相をベースに色を混ぜる「in hsl（色がくすみずらい）」や、より人間の視覚に直感的に色を混ぜられる「in oklch」などもあります。

次に、色を2つ指定します。「色1」を「色2」に混ぜる、という考え方が分かりやすいと思います。それぞれには、これまでご紹介してきたキーワードや16進数カラーコード、RGBやHSL、HWBなどの指定を使います。

色の指定では、混ぜる割合も指定できます。色の後に半角スペースで区切って、「0%～100%」の数値で指定します。割合の指定は省略できますが、両方指定しない場合はそれぞれ「50%」、片方だけ指定した場合はもう片方に残りの割合、2つの割合の合計が100%を超えた場合は、比率を保ったまま自動で計算されます。

/* 赤「#FF0000」を、青「#0000FF」に混ぜる（割合を指定していないので、赤50%:青50% で混ざる） */
color-mix(in srgb, #FF0000, #0000FF);

/* 赤「#FF0000」70%を、青「#0000FF」に混ぜる（青の割合を指定していないので、赤70%:青30% で混ざる。赤みが強い紫） */
color-mix(in srgb, #FF0000 70%, #0000FF);

/* 赤「#FF0000」30%を、青「#0000FF」70%に混ぜる（赤30%:青70% で混ざる。青みが強い紫） */
color-mix(in srgb, #FF0000 30%, #0000FF 70%);

透明度の指定でも使える！

色を混ぜることで、特定の色をベースに少しだけ他の色を混ぜる、白や黒を混ぜる、のような使い方ができます。また、この「color-mix」は、透明度の指定でもとても有効です。

例えば、赤を半透明にしたい場合、「色2」の値をキーワードの「transparent（透明）」にします。これで「色1」を「透明」に混ぜるという考え方になるので、

/* 赤「#FF0000」50%を、透明に混ぜる（透明度50%の赤） */
color-mix(in srgb, rgb(255 0 0) 50%, transparent);

/* rgbで透明度を指定した場合（透明度50%の赤） */
rgb(255 0 0 / 50%);

この2つが、まったく同じ色と透明度の指定になります。

一見、「color-mix」を使った方がコードが長く複雑になってしまいますが、この指定のメリットがもうひとつあります。RGBやHSL、HWGで透明度を指定した場合、色自体が透明になるので、背景にある要素が透けて見えます。しかし「color-mix」の場合は、混ぜ合わせる色を指定できるので、

/* 赤「#FF0000」50%を、白に混ぜる（透明度50%の赤。背景が透けない） */
color-mix(in srgb, rgb(255 0 0) 50%, white);

/* 赤「#FF0000」50%を、透明に混ぜる（透明度50%の赤。背景が透ける） */
color-mix(in srgb, rgb(255 0 0) 50%, transparent);

と、「色2」の指定「white」に変えることで、背景が透けない半透明の色を指定することができます。上の例では、背面が白い箇所に配置した場合は、両方がまったく同じ色になります。しかし、背面に何かしらの色や画像などがあった場合は、背景の透け方で色が変わります。

See the Pen 2943_01 by Matsuyama (@nakanaka-design) on CodePen.

同じ透明度の指定でも、単純にその色を薄くしたいときと、透明にさせて薄くしたいときの使い分けができるようになります。

変数を使えばもっと便利！色の仕組みは面白い！

今回ご紹介しませんでしたが、CSSの変数を使うことで、WEBサイト内の色の管理や調整がずっとやりやすくなります。また、色の基本的な考え方や、CSSでの値がそれぞれ何を指しているかを理解することで、バランスのよい配色がより簡単ににできるようになります。

色の知識は、CSSでの指定など実務面でももちろん役に立ちますが、知識としてとても面白いです。ご興味のある方は、印刷での色の指定やPANTONEやDICなどの特色など、いろいろ調べてみてください。色彩検定やカラーコーディネーター検定試験などの検定もあるので、ぜひ挑戦してください！

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。