Web配色とoklch設計

はじめに

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

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

色の三属性

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

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

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

同系色による配色

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

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

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

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

武蔵野美術大学 造形ファイル｜武蔵野美術大学による、美術とデザインの「素材・道具・技法」に関する情報提供サイト

造形ファイルは、武蔵野美術大学がインターネット上で公開している、美術とデザインに用いられる素材や道具についての用語や技法の情報を提供する知識モジュール群です。

武蔵野美術大学 造形ファイル

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

PCCS-tone/ビビッド・トーン - IROUSE/DATABASE・Color harmony

カラーコーディネート、ファッションイメージのサイト。イラストによる色彩/パーソナルカラー/ファッションイメージの解説をいたします。pccsトーンマップの各トーンサークル/vトーンにおける24色のトーン番号・PCCS記号・マンセル値・JIS色名・和洋色名・任意のRGB値やCMYK値などをご紹介するページです。

tee-room.info

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

PCCS-tone/ペール・トーン - IROUSE/DATABASE・Color harmony

カラーコーディネート、ファッションイメージのサイト。イラストによる色彩/パーソナルカラー/ファッションイメージの解説をいたします。pccsトーンマップの各トーンサークル/pトーンにおける24色のトーン番号・PCCS記号・マンセル値・JIS色名・和洋色名・任意のRGB値やCMYK値などをご紹介するページです。

tee-room.info

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

OKLCH による配色定義

CSS では、明度・彩度・色相を明示的に指定できる 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 サービスに取り入れています。

Fequest

ほしいとつくるを共有するプラットフォーム

fequest.vercel.app

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

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

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

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

Accessibility tests | Storybook docs

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Storybook

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

おわりに

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

s

silverbirder

Webソフトウェアエンジニア