色の基礎と配色のコツ — HEX・RGB・HSLとコントラスト
色を扱うとき、HEXやRGB、HSLなど表し方は複数ある。どれも同じ色を別の物差しで測っているにすぎないが、配色やコントラストには押さえておくべき基本がある。ここでは色の仕組みと、見やすい配色をつくるための考え方を整理する。
色の三属性 — 色相・彩度・明度
どんな色も、おおよそ3つの要素で言い表せる。これを色の三属性と呼ぶ。配色を考えるときの共通言語になるので、まずここを押さえておきたい。
- 色相（Hue）：赤・黄・緑・青といった色味そのもの。色を環状に並べた「色相環」で表され、0度から360度の角度で位置を示す。
- 彩度（Saturation）：色の鮮やかさ。彩度が高いほど純色に近く、低いほど灰色に近づく。
- 明度（Lightness/Brightness）：色の明るさ。高いほど白に、低いほど黒に近づく。
この三属性をそのまま数値にしたのがHSLという表し方だ。Hが色相（0度から360度）、Sが彩度（0から100パーセント）、Lが明度（0から100パーセント）に対応する。「もう少し明るく」「彩度を落として落ち着かせたい」といった調整が、HSLなら直感的に行える。
カラーコードの表し方
Webやアプリで色を指定する方法は主に3つある。中身は同じ色でも、目的によって使い分けると扱いやすい。
| 表記 | 形式 | 向いている場面 |
|---|---|---|
| HEX | #RRGGBB（16進数） | コードへの貼り付け、デザイン共有 |
| RGB | 各成分0から255 | 画面表示の理解、透明度（RGBA）付与 |
| HSL | 色相・彩度・明度 | 色の微調整、トーンをそろえた配色づくり |
HEXは赤・緑・青それぞれを2桁の16進数で並べたものだ。たとえば「#FF0000」は赤が最大、緑と青がゼロなので純粋な赤になる。RGBはその各成分を0から255の10進数で表したもので、「#FF0000」は「rgb(255, 0, 0)」と等しい。HEXとRGBは見た目が違うだけで同じ仕組みであり、相互に変換できる。一方HSLは前述のとおり人の感覚に近いため、配色の調整に向く。
配色の基本パターン
色相環上での色どうしの位置関係から、まとまりや対比のある配色を組み立てられる。代表的なパターンは次のとおりだ。
- 同系色（モノクロマティック）：1つの色相だけを使い、彩度や明度を変えて濃淡をつくる。統一感が出て失敗しにくい。
- 類似色：色相環で隣り合う色を組み合わせる。自然で穏やかな印象になる。
- 補色：色相環で正反対に位置する2色。互いを引き立て合い、強い対比が生まれる。
- トライアド：色相環を3等分した位置にある3色。バランスを保ちつつ華やかにまとまる。
どのパターンを選んでも、色数を増やしすぎないことが見やすさの近道になる。迷ったらまず同系色か類似色から始めるとよい。
配色比率の目安
色を「何色使うか」と同じくらい「どの割合で使うか」が仕上がりを左右する。よく使われる目安が、ベース・メイン・アクセントの3段構成だ。
- ベース 約70パーセント：背景や余白を占める土台の色。明度が高く主張の少ない色が向く。
- メイン 約25パーセント：そのデザインの印象を決める主役の色。
- アクセント 約5パーセント：ボタンやリンクなど、目を引かせたい部分に絞って使う差し色。
アクセントを欲張って増やすと、どこを見ればよいか分からなくなる。少量に絞るほど効果が際立つと覚えておきたい。
アクセシビリティとコントラスト
どれだけ美しい配色でも、文字が読めなければ意味がない。文字色と背景色の明暗の差を数値化したものがコントラスト比であり、ここには明確な基準がある。
W3Cが定めるWCAG（Webコンテンツアクセシビリティガイドライン）では、通常サイズの文字と背景のコントラスト比を4.5:1以上、大きい文字では3:1以上を満たすことが目安とされている。比率が高いほど読みやすく、最大は黒と白の組み合わせで21:1になる。
もう一つ大切なのが、色だけに情報を頼らない配慮だ。色の見え方には個人差があり、赤と緑の区別がつきにくい人もいる。「赤は必須項目」のように色だけで意味を伝えると、伝わらない読者が出てしまう。アイコンや文字、下線などを併用し、色は補助として使うのが安全だ。
よくある質問
Q. 補色を隣り合わせると、ちらついて見づらいのはなぜ？
補色は対比が最も強い組み合わせのため、境界で互いの色が干渉し、目がちらつくように感じやすい。特に彩度が高い純色どうしだと顕著になる。どちらかの彩度や明度を下げる、間に白や黒・灰色のような無彩色を挟む、といった工夫で目への負担を和らげられる。
Q. Webで読みやすい配色をつくるコツは？
まず文字と背景のコントラスト比を確かめ、本文なら4.5:1以上を満たすことを優先したい。その上で同系色や類似色でトーンをそろえ、アクセントは差し色として少量に絞る。色数を増やすより、明度差で見やすさを確保するほうが堅実だ。
Q. HEXとRGB、どちらを覚えればよい？
両方とも同じ色を別の書き方で表しているだけなので、どちらか一方で困ることはない。コードへ貼るならHEX、透明度を扱うならRGBA、色を微調整するならHSL、と場面に応じて変換して使えば十分だ。
当サイトの「色変換・配色ツール」では、HEX・RGB・HSLの相互変換や、2色のコントラスト比の判定が手軽に行える。配色を決める前のチェックに役立ててほしい。
※ 本記事のコントラスト比の基準値はWCAGの一般的な目安であり、用途や対象環境によって最適な配色は変わる。最終的な見やすさは実際の表示で確認することをすすめる。