Webデザインの色の基礎知識｜色相・彩度・明度、配色、カラーモード、便利ツールまで

Webデザインをするとき、「どんな色を使えばいいのか分からない」「好きな色を選んでいるけれど、なぜかまとまらない」と感じたことはないでしょうか。

色はWebサイトの印象を大きく左右します。

同じレイアウトでも、明るい色を使えば親しみやすい印象になり、暗い色を使えば落ち着いた印象になります。また、色には「目立たせる」「情報を区別する」「読みやすくする」といった役割もあります。

ただし、色選びをすべて感覚だけで行う必要はありません。

色には基本的な仕組みがあり、「色相・彩度・明度」「色相環」「補色」「類似色」などを理解すると、配色を考えやすくなります。

Webデザインで色を学ぶ理由

Webサイトを作るとき、最初にレイアウトを考え、そのあとで「ここは青」「ボタンはオレンジ」など、色を決めていくことがあります。

もちろん、自分が好きな色から考えることも悪くありません。

しかし、Webデザインでは「好きな色」だけではなく、「その色を使う目的」も考えることが大切です。

例えば、申し込みボタンを周囲と同じような色にしてしまうと、どこをクリックすればよいのか分かりにくくなります。

反対に、ページの中で一番目立たせたい場所だけにアクセントカラーを使えば、ユーザーの視線を自然に誘導できます。

企業サイトであれば信頼感、子ども向けサイトであれば楽しさ、カフェのサイトであれば落ち着きや温かさなど、伝えたいイメージによって適した色も変わります。

色は単なる装飾ではなく、情報を伝えるためのデザイン要素のひとつなのです。

光の色「RGB」と加法混色

最初に知っておきたいのが、色がどのように作られるのかという仕組みです。パソコンやスマートフォンなどのディスプレイでは、主に「RGB」という3つの色を使って色を表現します。

RGBは、　Red（赤）　Green（緑）　Blue（青）　の頭文字です。

ディスプレイでは、この3色の「光」を組み合わせてさまざまな色を作ります。

赤と緑の光を重ねると黄色、緑と青を重ねるとシアン、青と赤を重ねるとマゼンタに近い色になります。

そして赤・緑・青の3つの光をすべて強くすると白になります。

反対に、すべての光がない状態は黒です。

このように、光を加えるほど明るくなっていく色の混ぜ方を「加法混色」といいます。Webサイトやアプリ、写真、動画など、ディスプレイで見るものについて考えるときは、基本的にRGBを使うと覚えておくとよいでしょう。

印刷で使われる「CMYK」と減法混色

一方、パンフレットやチラシ、名刺などの印刷では、RGBではなく「CMYK」が使われます。

CMYKは、　Cyan（シアン）　Magenta（マゼンタ）　Yellow（イエロー）　Key plate / Black（黒）を使って色を表現します。

こちらはディスプレイの光とは違い、インクを重ねることで色を作ります。

白い紙にインクを重ねていくほど、反射する光が減り、色は暗くなっていきます。このような色の混ぜ方を「減法混色」といいます。

理論上はシアン・マゼンタ・イエローを重ねると黒に近づきますが、実際の印刷ではきれいな黒を表現することが難しいため、黒のインクを加えたCMYKが使われています。

Web制作ではRGB、印刷物ではCMYK。　まずはこの違いを覚えておきましょう。

PhotoshopやIllustratorなどで画像を作る場合も、「最終的にWebで使うのか」「印刷するのか」によって設定するカラーモードが変わります。

色を理解するための「色の三属性」

色を考えるときに特に重要なのが、

「色相」　「彩度」　「明度」の3つです。

これらは「色の三属性」と呼ばれます。色を感覚だけではなく、少し論理的に調整できるようになるためにも、この3つの違いを理解しておきましょう。

色相（Hue）とは「何色なのか」

色相とは、赤・オレンジ・黄色・緑・青・紫といった「色の種類」のことです。例えば、赤から少しずつ黄色に近づけていくと、途中でオレンジになります。黄色から青へ向かう途中には緑があります。

このように色相を順番に円形に並べたものを「色相環」といいます。

FigmaやPhotoshopなどのカラーピッカーを使っていると「H」という項目を見ることがあります。

このHはHue、つまり色相を表しています。

「この青をもう少し緑寄りにしたい」といった場合には、色相を変更して調整します。

彩度（Saturation）とは「色の鮮やかさ」

彩度は、色の鮮やかさを表します。彩度が高い色は、はっきりとした鮮やかな色になります。

逆に彩度を下げていくと、だんだん色味が弱くなり、グレーに近い落ち着いた色になります。

例えば、同じ青でも、彩度の高い青は元気で強い印象になりやすく、彩度を下げた青は落ち着いた印象になります。

「色が派手すぎる」と感じたとき、色そのものを別の色に変えるのではなく、彩度を少し下げるだけで使いやすくなる場合があります。

Webデザインでは、すべてを鮮やかな色にすると視線が分散してしまいます。

強調したい場所では彩度を高め、それ以外では少し落ち着いた色を使うなど、強弱を付けることも大切です。

明度（Brightness / Lightness）とは「色の明るさ」

明度は色の明るさを表します。明度が高くなると明るい色になり、低くなると暗い色になります。

例えば同じ青でも、右の図のように、水色のような明るい青と、ネイビーのような暗い青では印象が大きく違います。

明るい色は軽やかで柔らかな印象を作りやすく、暗い色は落ち着きや重厚感を出しやすくなります。

Webサイトの背景、見出し、文字、ボタンなどを考えるときも、色相だけを見るのではなく明度の違いを見ることが重要です。

特に文字色と背景色の明度が近すぎると、文字が読みにくくなることがあります。

色の印象を考える「トーン」

配色を考えるときによく出てくる言葉に「トーン」があります。

トーンとは、主に明度と彩度を組み合わせた「色の調子」を表す考え方です。

例えば同じ赤系の色でも、

鮮やかで強い赤
明るく柔らかいピンク
少しくすんだ落ち着いた赤
黒に近い深い赤

では印象が大きく変わります。

色相が違っていても、彩度や明度が近い色を組み合わせることで、全体に統一感を持たせることもできます。

例えば「淡く明るい色」でそろえると柔らかい印象になり、「少し暗く彩度を抑えた色」でそろえると落ち着いた大人っぽい印象になります。

Webデザインで「色は違うのに、なぜかまとまって見える」というデザインでは、トーンがそろっていることも少なくありません。

色相環を使って配色を考える

色相・彩度・明度が分かったら、次は複数の色を組み合わせてみましょう。

配色を考えるときに便利なのが「色相環」です。色相環を見ると、色同士の距離や関係が分かります。

なんとなく2色、3色を選ぶより、色相環上の位置関係を知ることで、配色の理由を説明できるようになります。

類似色とは

色相環の中で近い位置にある色を組み合わせる方法があります。

例えば、黄色・黄緑・緑、青・青紫・紫といった組み合わせです。

このような近い色同士はまとまりやすく、自然で統一感のある配色を作りやすい特徴があります。

Webデザイン初心者の場合も、まずは近い色を使って配色すると大きく失敗しにくくなります。

ただし、似た色だけではページ全体が単調になる場合があります。

その場合は、重要なボタンなどに別のアクセントカラーを使うとメリハリが生まれます。

補色とは

補色とは、色相環のほぼ反対側に位置する色の組み合わせです。

例えば青系とオレンジ系など、互いの違いが大きな組み合わせになります。

補色を使うとコントラストが強くなり、色を目立たせることができます。

そのため、メインカラーに対して「申し込み」「購入」「お問い合わせ」など重要なボタンを目立たせたいときに、補色に近い色をアクセントとして使う方法があります。

ただし、補色同士を同じ面積・同じ強さで大量に使うと、色同士が主張しすぎて見づらくなることがあります。

「反対側の色だから全部半分ずつ使う」のではなく、一方をメインにして、もう一方をアクセントとして少量使うほうが扱いやすいでしょう。

配色では「色の数」だけでなく「使う量」も考える

配色を考えるとき、「3色選べば完成」と考えてしまいがちですが、色を使う面積も重要です。

例えば、背景など広い範囲に使うベースカラー、サイトの印象を決めるメインカラー、ボタンなど特に目立たせたい部分に使うアクセントカラーというように、役割を分けて考えると配色しやすくなります。

アクセントカラーは「アクセント」という名前の通り、使う場所を絞ったほうが効果的です。

ページのいたるところで同じように目立つ色を使ってしまうと、結局どこを見ればよいのか分からなくなります。

配色は色選びだけではなく、「どの色を、どこに、どのくらい使うか」まで考えることが大切です。

暖色と寒色による印象の違い

色には、温度を感じさせるような違いもあります。

赤・オレンジ・黄色などは「暖色」と呼ばれ、温かさ、活発さ、親しみなどを感じやすい色です。

青・青緑などは「寒色」と呼ばれ、涼しさ、冷静さ、清潔感などを感じやすい色です。

ただし、「青なら必ず信頼感」「赤なら必ず情熱」と決まっているわけではありません。

色の印象は、彩度や明度、周囲の色、写真、フォント、余白などによっても変わります。

色だけでサイトのイメージを決めるのではなく、デザイン全体との組み合わせを考えていきましょう。

Web制作で知っておきたい色の表し方

Web制作では、RGB以外にもさまざまな方法で色を指定します。よく使われるのがHEX、RGB、HSLです。

例えばCSSでは、同じ色でも、

#3a7bd5

rgb(58 123 213)

hsl(214 64% 53%)

のように異なる形式で指定できます。

HEXは「#」から始まる6桁などの16進数で表す方法で、Web制作では非常によく使われています。

RGBは赤・緑・青の値を使って指定します。

HSLはHue（色相）、Saturation（彩度）、Lightness（明度）という考え方で色を指定します。

ここで注意したいのは、HEXはRGBやCMYKと同じ意味での「カラーモード」ではなく、色の値を記述する方法のひとつだということです。

デザインツールで選んだ色をCSSで使用するときには、HEXやRGBなどの値をコピーして使うことができます。

「きれいな配色」だけではなく「読みやすい配色」を考える

Webデザインでは、見た目がきれいであればそれでよいわけではありません。

利用する人が文字を読み、ボタンやリンクを認識できることが重要です。

例えば、白い背景に非常に薄いグレーの文字を配置すると、デザインとしてはすっきり見えるかもしれません。

しかし、人によっては文字がほとんど見えないことがあります。

そこで確認したいのが、文字色と背景色の「コントラスト」です。

Webアクセシビリティの国際的なガイドラインであるWCAG 2.2では、Level AAの場合、通常の文字は原則として背景とのコントラスト比4.5:1以上、大きな文字では3:1以上が基準となっています。

色を決めるときは、「自分には見えるから大丈夫」ではなく、さまざまな人が利用することを考えることが大切です。

特に本文、ボタン、フォーム、ナビゲーションなどでは、読みやすさもしっかり確認しましょう。