6日でできる 新HTML&CSS入門｜Webカラーの基本

6日でできる 新HTML&CSS入門｜Webカラーの基本

Webカラーは、感覚で選ぶだけのものではなく、数字で読み解けるデザインの基本。RGBと16進数を理解して、色を自在に扱える力を身につけよう。

Webページでは、見出し、本文、背景、ボタン、リンク、枠線など、さまざまな場所で色が使われます。色はページの印象を大きく左右するため、Web制作ではとても大切な要素です。

たとえば、青を使うと信頼感や清潔感を出しやすく、赤を使うと注意や強調を伝えやすくなります。緑は安心感や自然な印象、オレンジは親しみやすさや元気さを表現しやすい色です。

ただし、Webカラーは感覚だけで選ぶものではありません。コンピュータは色を数値として扱います。Webでよく見る#FF5733のような表記も、実は赤、緑、青の強さを数字で表したものです。

この6桁の英数字は、RGBという色の考え方に基づいています。RGBは、Red、Green、Blueの頭文字で、赤、緑、青の光を組み合わせて色を作る仕組みです。

Webカラーを理解するためには、bit、byte、2進数、10進数、16進数といったコンピュータの数値表現も関係してきます。少し難しく感じるかもしれませんが、順番に見ていけば、#FF0000が赤になる理由や、#FFFFFFが白になる理由も自然に分かるようになります。

この記事では、コンピュータが色をどのように数値で扱うのか、RGBカラーコードがどのようにできているのか、16進数を使う理由、透明度やHSLなどの考え方、さらにアクセシビリティを意識した色選びまで、Webカラーの基本をやさしく解説していきます。

なお、ここではCSSの具体的なコード例は扱いません。CSSによる色指定の書き方や、文字色、背景色、ボタン色の設定方法については、CSSに関する記事以降で詳しく学んでいきましょう。

Webカラーは数値で管理されている

人間は色を見たときに、「明るい青」「落ち着いた緑」「赤みの強いオレンジ」のように感覚で捉えます。一方で、コンピュータは色を数値として扱います。

Webカラーでよく使われる考え方がRGBです。RGBでは、赤、緑、青の3つの光の強さを組み合わせて色を作ります。

それぞれの値が大きいほど、その色の成分が強くなります。反対に、0に近いほどその色の成分は弱くなります。

赤だけを最大にして、緑と青を0にすると赤になります。赤、緑、青をすべて最大にすると白になります。すべて0にすると、光がない状態なので黒になります。

このように、Webカラーは「どの色をどれくらい混ぜるか」を数値で指定して作られています。

図1：RGBで色を作る仕組み

この図から分かること

この図から、Webカラーは赤、緑、青の3つの光を組み合わせて作られていることが分かります。

RGBでは、それぞれの色の強さを0から255の範囲で表します。赤の値が大きければ赤みが強くなり、青の値が大きければ青みが強くなります。

3つの値を組み合わせることで、赤、青、緑だけでなく、黄色、紫、水色、白、黒、グレーなど、さまざまな色を表現できます。

Webカラーを学ぶときは、まず「色はR、G、Bの3つの数値で作られている」と考えると、後から出てくる16進カラーコードも理解しやすくなります。

bitとbyteはコンピュータの基本単位

コンピュータは、内部では0と1を使って情報を扱います。この0または1の最小単位をbitといいます。

そして、8個のbitをまとめたものをbyteといいます。1byteでは、0から255までの256通りの値を表すことができます。

RGBでは、赤、緑、青のそれぞれに1byte分の値を使います。そのため、R、G、Bの各値は0から255の範囲になります。

赤の強さに1byte、緑の強さに1byte、青の強さに1byteを使うため、RGBカラーは合計3byte、つまり24bitで表すことができます。

この仕組みによって、コンピュータは色を細かく数値管理できます。

2進数と10進数の考え方

私たちが普段使っている数字は、0から9までを使う10進数です。一方、コンピュータの基本は0と1だけを使う2進数です。

たとえば、2進数の1101を10進数に直すと、次のように考えます。

1×2³ + 1×2² + 0×2¹ + 1×2⁰
= 8 + 4 + 0 + 1
= 13

つまり、2進数の1101は、10進数では13になります。

反対に、10進数の13を2進数に戻す場合は、2で割って余りを確認します。

13 ÷ 2 → 6 余り1
 6 ÷ 2 → 3 余り0
 3 ÷ 2 → 1 余り1
 1 ÷ 2 → 0 余り1

余りを下から読むと1101になります。

Webカラーを使うときに、毎回2進数を計算する必要はありません。ただし、コンピュータが0と1を組み合わせて数値を扱っていることを知っておくと、後で16進数の意味が理解しやすくなります。

16進数を使う理由

Webカラーでは、2進数をそのまま書くことはほとんどありません。理由は、2進数で書くと長くなりすぎるからです。

たとえば、赤255、緑87、青51という色を2進数で表すと、かなり長い表記になります。

16進数では、0から9までの数字に加えて、AからFまでの文字を使います。

RGBの各成分は0から255の範囲なので、16進数では00からFFの2桁で表せます。

つまり、赤、緑、青をそれぞれ2桁ずつ並べれば、6桁で色を表現できます。これが#RRGGBB形式の基本です。

16進カラーコードの基本

Webカラーでよく見る#FF5733のような表記は、16進カラーコードです。

基本の形は#RRGGBBです。

たとえば、#FF5733は次のように分解できます。

#FF5733

FF → 赤 255
57 → 緑 87
33 → 青 51

赤が最大に近く、緑が少し入り、青が弱いため、あたたかいオレンジ系の色になります。

このように、カラーコードは2桁ずつに分けると読みやすくなります。

図2：16進カラーコードの読み方

この図から分かること

この図から、16進カラーコードは、赤、緑、青を2桁ずつ並べて表していることが分かります。

#FF5733では、FFが赤、57が緑、33が青です。赤が強く、青が弱いため、全体としてオレンジ寄りのあたたかい色になります。

カラーコードを見るときは、6桁をそのまま覚えようとするのではなく、2桁ずつに分けて考えると理解しやすくなります。

先頭2桁が赤、中央2桁が緑、最後2桁が青。この順番を覚えておくと、色の傾向を読み取りやすくなります。

代表的なカラーコードを確認する

Webカラーには、覚えやすい代表的なカラーコードがあります。最初は、白、黒、赤、緑、青のような基本色から確認すると理解しやすくなります。

#000000は、赤、緑、青がすべて0なので黒です。

#FFFFFFは、赤、緑、青がすべて最大なので白です。

#FF0000は、赤だけが最大なので赤になります。同じように、#00FF00は緑、#0000FFは青です。

このような基本色を見ていくと、カラーコードの仕組みがだんだん分かってきます。

3桁の短縮カラーコード

16進カラーコードには、6桁の表記だけでなく、3桁の短縮表記もあります。

たとえば、#00FF88は#0F8のように短く書けます。

ただし、短縮できるのは、各色の2桁が同じ文字の組み合わせになっている場合です。

短縮表記は便利ですが、すべての色で使えるわけではありません。最初の学習段階では、6桁の#RRGGBBで考えるほうが分かりやすいです。

透明度を表すAlpha

色には、透明度を加えることもできます。透明度を表す値をAlphaといいます。

Alphaは、完全に透明なのか、半透明なのか、完全に不透明なのかを表します。

たとえば、青い背景を少しだけ薄く見せたい場合、透明度を加えることでやわらかい印象にできます。

また、16進数では8桁表記で透明度を含めることもできます。#1E90FF4Dのように、最後の2桁が透明度を表します。

透明度を使うときは、背景色との重なり方を意識することが大切です。透明な色は、後ろにある色の影響を受けて見え方が変わります。

図3：カラーコードと透明度の関係

この図から分かること

この図から、Webカラーは赤、緑、青の3つの値だけでなく、透明度も組み合わせて表現できることが分かります。

#RRGGBB形式では、赤、緑、青を2桁ずつ指定します。透明度を加える場合は、Alphaという考え方が関係します。

同じ青でも、透明度が高いと薄く見え、透明度が低いとしっかりした色に見えます。背景に重ねる色や、目立たせたい度合いによって、透明度を調整するとデザインの幅が広がります。

ただし、透明度を使うと文字が読みにくくなることもあります。特に文字の背景に透明色を使う場合は、読みやすさを確認することが大切です。

HSLは色の印象で考えやすい表記

Webカラーには、RGBや16進数以外にもHSLという表記があります。

HSLは、Hue、Saturation、Lightnessの頭文字です。日本語では、色相、彩度、明度と考えると分かりやすいです。

RGBは、赤、緑、青の光の強さで色を考える方法です。一方、HSLは、色の種類、鮮やかさ、明るさで考えるため、人間の感覚に近い形で色を調整しやすいことがあります。

たとえば、同じ青系のまま少し明るくしたい場合や、色を淡くしたい場合は、HSLの考え方が役立ちます。

最初からすべての表記を覚える必要はありません。まずはRGBと16進カラーコードを理解し、その後でHSLのような表記に進むと理解しやすくなります。

labなどの新しい色表現

最近のWeb制作では、labなどの新しい色表現も使われるようになっています。

labは、人間の見え方に近い色の差を扱いやすくするための色空間です。RGBよりも、色の違いをより均一に扱いやすいという特徴があります。

ただし、最初の段階では、labまで深く覚える必要はありません。

Webカラーの基礎としては、RGB、16進数、Alpha、HSLの考え方を順番に理解していくとよいでしょう。

CSS変数で色を再利用する考え方

Webページでは、同じ色を何度も使うことがあります。たとえば、ブランドカラーを見出し、リンク、ボタンなどに使い回す場合です。

このようなとき、CSS変数を使うと、色を一か所で管理しやすくなります。

ここではCSSの具体的な書き方は扱いませんが、Web制作では色を毎回ばらばらに指定するのではなく、使い回しやすい形で管理する考え方も大切です。

色の指定方法そのものはCSSに関する記事以降で詳しく解説します。

16進カラーを手早く読むコツ

16進カラーコードを読むときは、まず6桁を2桁ずつに分けます。

#FF5733

FF → 赤
57 → 緑
33 → 青

先頭2桁が赤、次の2桁が緑、最後の2桁が青です。

それぞれの値が大きいほど、その色の成分が強くなります。FFは最大、00は最小です。

カラーコードを見てすぐに正確な色を思い浮かべる必要はありません。まずは、どの成分が強いかを読み取る練習をしましょう。

赤が強く、青が弱ければ、あたたかい印象になりやすいです。青が強く、赤が弱ければ、涼しげな印象になりやすいです。

アクセシビリティを意識した色選び

Webカラーを選ぶときは、見た目の美しさだけでなく、読みやすさも大切です。

特に、文字色と背景色の差が小さいと、文字が読みにくくなります。薄い背景に薄い文字を置いたり、濃い背景に暗い文字を置いたりすると、内容を読み取りにくくなることがあります。

アクセシビリティの基準では、通常の文字と背景のコントラスト比は4.5:1以上が目安とされることがあります。

たとえば、白い背景に薄い黄色の文字を置くと、見た目はやわらかくても読みづらくなります。一方、濃い青の背景に白い文字を置くと、文字がはっきり見えやすくなります。

Webページは、さまざまな環境や人に見られます。明るい場所でスマートフォンを見る人もいれば、色の見え方に違いがある人もいます。そのため、色を選ぶときは、誰にとっても読みやすいかを意識することが大切です。

色だけで意味を伝えない

色は情報を分かりやすくするために便利ですが、色だけで意味を伝えるのは避けたほうがよい場合があります。

たとえば、入力フォームで赤い枠だけを表示してエラーを示しても、何が問題なのか分からないことがあります。また、赤と緑の違いだけで状態を伝えると、人によっては判別しにくい場合があります。

色に加えて、文字やアイコン、説明文も使うと、より多くの人に伝わりやすくなります。

Webデザインでは、「見た目がきれいか」だけでなく、「情報が正しく伝わるか」も大切です。

Webカラーでよく使う用語

Webカラーを学ぶときに出てくる主な用語を整理しておきましょう。

最初に覚えたいのは、RGBとHexです。

RGBは、赤、緑、青の数値で色を作る考え方です。Hexは、そのRGBの値を16進数で短く書いたものです。

この2つが分かると、#FF0000、#FFFFFF、#333333のようなカラーコードの意味が少しずつ読み取れるようになります。

Webカラーを扱うときに意識したいこと

Webカラーを扱うときは、色の見た目だけでなく、数値の意味や読みやすさも意識しましょう。

Webカラーは、デザインの印象を作る大切な要素です。同時に、読みやすさや分かりやすさにも大きく関わります。

まずは、#RRGGBBの6桁を2桁ずつに分けて、赤、緑、青として読む練習をしてみましょう。そこから、透明度、HSL、アクセシビリティを意識した色選びへと学習を広げていくと、より実践的なWebカラーの使い方が身につきます。