Web配色とoklch設計

2025年12月27日

はじめに

Webの配色設計では、ベースカラー・メインカラー・アクセントカラーの3つを軸に考えることが多くあります。サービスのコンセプトや性質に応じて、どのような色を採用するかを検討していきます。

本記事では、色の基本的な構成要素を整理したうえで、CSS の oklch を用いた配色設計と、その運用例について紹介します。

色の三属性

色は主に、色相・明度・彩度の3要素で構成されています。

色相は赤や青といった色味の違いを表し、明度は色の明るさを示します。彩度は色の鮮やかさを表し、数値が高いほど視認性が高くなります。

これらの要素をどのように組み合わせるかによって、画面全体の印象が決まります。

同系色による配色

色相を同じ、もしくは近い値に揃えた配色は、同系色配色と呼ばれます。この配色では、全体に統一感が生まれ、落ち着いた印象を与えやすくなります。

色同士が過度に主張し合わないため、視覚的なノイズが抑えられ、配色設計に慣れていない場合でも扱いやすい点が特徴です。

色調（トーン）という考え方

色相ではなく、明度や彩度を揃える設計もあります。この考え方は「色調（トーン）」と呼ばれ、以下の資料で詳しく解説されています。

https://zokeifile.musabi.ac.jp/%E8%89%B2%E8%AA%BF/

例えば、彩度を最も高く揃えたビビッドトーンの配色があります。ビビッドトーンは鮮やかさが強く、活気のある印象を与えます。

https://tee-room.info/color/tone-v.html

一方で、彩度を抑え、明度を高くしたペールトーンという配色もあります。ペールトーンは淡い色合いとなり、柔らかく穏やかな印象を持ちます。

https://tee-room.info/color/tone-p.html

これらの配色体系については、「PCCS 日本色研配色体系」で調べると、体系的に学ぶことができます。

OKLCH による配色定義

CSS では、明度・彩度・色相を明示的に指定できる oklch カラーモデルを利用できます。このモデルを用いることで、配色の意図を数値として保持したまま設計できます。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/color_value/oklch

以下は、色相を1つに限定した同系色配色の例です。まず、色相・明度・彩度を変数として定義します。

:root {
  /* 色相は1つだけ */
  --hue-base: 238deg;

  /* 明度はいくつか用意する */
  --lightness-95: 0.95;
  --lightness-92: 0.92;
  --lightness-90: 0.9;

  /* 彩度もいくつか用意する */
  --chroma-20: 0.017;
  --chroma-10: 0.01;
  --chroma-0: 0.006;
}

これらの変数を組み合わせて色を定義します。以下は、背景色に適用した例です。

:root {
  --background: oklch(var(--lightness-95) var(--chroma-0) var(--hue-base));
}

色相の変更によるテーマ切り替え

上記の同系色配色を、個人開発の Web サービスに取り入れています。

https://fequest.vercel.app

Fequest（Feature Request の略）は、機能リクエストを送信できるサービスです。このサイトでは、ログイン後の設定ページから色相を変更できるようにしています。

色相を切り替えることで、選択した色味に応じてページ全体の配色が変化します。同系色配色を採用しているため、どの色相を選んでも落ち着いた印象を保てます。

色のコントラストと可読性

配色設計では、見た目だけでなく可読性の確保も重要です。 Storybook の a11y アドオンを有効にすると、各 Story に対して色コントラストの検証を行えます。

https://storybook.js.org/docs/writing-tests/accessibility-testing

このチェックを前提として開発を進めることで、最低限の色コントラストを継続的に維持できます。

おわりに

oklch を用いた配色設計は、色の意図を数値として管理しやすく、テーマ展開やアクセシビリティ対応とも相性の良い方法です。色を感覚だけで扱うのではなく、構造として整理できる点が、この手法の特徴だと考えています。