CSSのRelative Color Syntaxとは？相対カラー構文を徹底解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

CSSで色を扱うとき、こんな経験はありませんか？
「ブランドカラーを元に、少し明るいホバー色を作りたいけど、いちいち別の色コードを用意するのが面倒だな」「透明度を変えた色をSass変数なしでどうにかしたい」「デザインシステムを整備したいけど、色の派生をCSSだけで完結させたい」——そんなモヤモヤを静岡県浜松市でWEBデザイナーとして日々感じてきました。

これまでの現場では、ベースカラーに対してホバー時の色やdisabled状態の薄い色を用意するために、デザインツールで別途カラーコードを生成してからCSS Custom Propertiesに1つずつ登録する、という作業が当たり前でした。
SassやLessなどのプリプロセッサを使えばある程度解決できましたが、ビルドプロセスが増える分、管理コストも上がってしまいます。

そんな悩みを根本から解決してくれるのが、CSS Relative Color Syntax（相対カラー構文）です。
この機能を使えば、既存の色をベースにしてCSSネイティブで明度・彩度・透明度などを自由に調整した新しい色を生成できます。
Sassなしで、JavaScriptなしで、ただのCSSだけで色のバリエーションをダイナミックに作れる時代がやってきました。

この記事では、Relative Color Syntaxの基本的な仕組みから、実務で使えるコード例、ブラウザ対応状況、注意点まで、WEBデザイナー・フロントエンドエンジニアが知っておくべきことを網羅的に解説します。
CSS Custom Propertiesとの組み合わせ、カラー関数との連携、実際のUIコンポーネントへの適用例も含め、明日のプロジェクトからすぐに使えるレベルまで理解を深めていただけます。

最後まで読むと、Relative Color Syntaxを使いこなして、Sassなしでも柔軟なカラーシステムをCSSだけで構築できるようになります。
それでは、まずRelative Color Syntaxとは何かという基本定義から確認していきましょう。

CSS Relative Color Syntaxとは？基本の定義と登場背景

Relative Color Syntaxの定義

CSS Relative Color Syntax（相対カラー構文）とは、既存の色（オリジンカラー）を元にして、そのチャンネル値を参照・操作しながら新しい色を生成できるCSS Color Level 5の機能です。
簡単に言えば、「この色を少しだけ明るくした色」「この色の透明度を50%にした色」といった派生色を、元の色コードを直接書き換えることなく動的に生成できます。

従来のCSSでは、例えば rgb(59, 130, 246)という青色に対して半透明バージョンが欲しければ、別途rgba(59, 130, 246, 0.5)という値を用意するしかありませんでした。
Relative Color Syntaxを使えば、元の色が変わっても自動的に派生色が追従するため、カラーシステムのメンテナンスが劇的にシンプルになります。

なぜ今この機能が注目されているのか

WEB開発の現場ではデザインシステムの重要性が年々高まっています。
静岡県浜松市の制作現場でも、ブランドカラーを一元管理しながらそこから派生する複数の色トーンを整合性を保って使い続けるという課題は共通の悩みです。

これまでこの課題はSassの lighten() や darken() 関数、またはCSS Custom Propertiesを複数用意することで対処されてきました。
しかし前者はビルドプロセスが必要で、後者は変更のたびに複数箇所の値を更新しなければなりません。

Relative Color SyntaxはこれらをCSSネイティブで解決し、さらにCSS Custom Propertiesと組み合わせることでビルド不要・ランタイムで動的に変化するカラーシステムを実現します。

仕様の位置づけ：CSS Color Level 5

Relative Color SyntaxはW3CのCSS Color Level 5仕様で定義されています。
CSS Color Level 4でHSL・HWB・Lab・LCH・Display P3などの色空間サポートが拡張されましたが、Level 5ではそれらの色をプログラマブルに操作する仕組みが加わりました。
Relative Color Syntaxはその中核をなす機能であり、color() / hsl() / oklch() など主要なカラー関数すべてで利用できます。

---

Relative Color Syntaxの基本構文と書き方

基本構文のパターン

Relative Color Syntaxの基本形は以下のとおりです。

/* 基本構文 */
カラー関数(from オリジンカラー チャンネル1 チャンネル2 チャンネル3)
カラー関数(from オリジンカラー チャンネル1 チャンネル2 チャンネル3 / アルファ)

from キーワードの後にオリジンカラー（元となる色）を指定し、その後に各チャンネルの値を並べます。
チャンネルの名前は使用するカラー関数によって異なります。

RGBの場合は r ・ g ・ b、
HSLの場合は h ・ s ・ l、
OKLCHの場合は l ・ c ・ h となります。

チャンネル値をそのまま使う・変換する

まず最も基本的な使い方として、オリジンカラーのチャンネル値をそのまま参照する例を見てみましょう。

/* 元の色をそのまま再現する（意味はないが構文の確認に） */
.element {
  color: rgb(from #3b82f6 r g b);
}

/* 透明度を0.5にする */
.element--semi {
  color: rgb(from #3b82f6 r g b / 0.5);
}

上の例では #3b82f6 をオリジンカラーとして、r ・ g ・ b をそのまま参照しています。
2番目の例ではアルファ値のみ0.5に変更しているため、元の青色の半透明バージョンが生成されます。

calc()と組み合わせた色の変換

Relative Color Syntaxの真価は calc() と組み合わせたときに発揮されます。

/* HSLで明度を20%上げる */
.element--lighter {
  color: hsl(from #3b82f6 h s calc(l + 20%));
}

/* HSLで彩度を半分にする */
.element--desaturated {
  color: hsl(from #3b82f6 h calc(s / 2) l);
}

/* OKLCHで明度を調整してより知覚的に均一な明るさにする */
.element--oklch-lighter {
  color: oklch(from #3b82f6 calc(l + 0.2) c h);
}

HSLを使えば色相（H）・彩度（S）・明度（L）を個別に操作でき、直感的に「明るい色」「くすんだ色」を生成できます。
さらに知覚的に均一な色空間であるOKLCHを使うと、人間の目に自然に見える明度変化が実現できるため、アクセシビリティを意識したカラー操作にはOKLCHの使用が特に推奨されます。

CSS Custom Propertiesとの組み合わせ

実務で最も力を発揮するのが、CSS Custom Properties（カスタムプロパティ）との組み合わせです。

:root {
  --brand-color: #3b82f6;
}

.button {
  background-color: var(--brand-color);
}

.button:hover {
  /* ブランドカラーをそのまま使いつつ、明度を15%上げる */
  background-color: hsl(from var(--brand-color) h s calc(l + 15%));
}

.button:disabled {
  /* 透明度を40%にしてdisabled表現 */
  background-color: rgb(from var(--brand-color) r g b / 0.4);
}

--brand-color を1箇所変更するだけで、ホバー色・disabled色が自動的に追従します。
これにより、クライアントから「やっぱりブランドカラーを少し変えたい」という依頼が来ても、1行の変更で済むようになります。

---

使えるカラー関数と色空間の選び方

Relative Color Syntaxが使える主なカラー関数

Relative Color Syntaxは以下のカラー関数すべてで使用できます。

色空間ごとの使い分けポイント

どの色空間を選ぶかは用途によって変わります。

RGB系を使うべき場面は、既存のRGBカラーコードを維持しつつ透明度だけ変えたい場合です。
明度や彩度を操作したい場合はRGBチャンネルの直接計算では人間の目に自然に見えないため、向いていません。

HSLを使うべき場面は、色相・彩度・明度という概念でデザイン的に色を操作したいときです。
「少し明るくする」「少しくすませる」「補色を求める」といった操作がわかりやすく記述できます。

OKLCHを使うべき場面は、アクセシビリティ基準（WCAG）を意識してコントラスト比を均一に保ちながら明度を変えたい場合です。
知覚的に均一な色空間なので、明度をl + 0.2にしたときの「明るさの変化量」がどの色相でも同程度に見えます。
浜松市の案件でもアクセシビリティ対応が求められるサイトが増えており、OKLCHの重要性はこれからますます高まると感じています。

色空間の変換もRelative Color Syntaxでできる

Relative Color Syntaxには色空間の変換という強力な使い方もあります。
例えばhex値で指定した色をOKLCHの各チャンネルとして取り出し、OKLCHで再構成するといったことが1行で書けます。

/* #3b82f6をOKLCHに変換して取得し、明度だけ上げる */
.element {
  color: oklch(from #3b82f6 calc(l + 0.15) c h);
}

/* Display P3色空間に変換して鮮やかに表示 */
.element--vivid {
  color: color(from #3b82f6 display-p3 r g b);
}

ブラウザが自動的に色空間を変換してチャンネル値を算出してくれるため、開発者が変換計算を自前で書く必要はありません。
オリジンカラーがどの色空間で書かれていても、変換先の色空間のチャンネル値として自動的に参照できるのはRelative Color Syntaxの大きな魅力です。

---

実務で使えるRelative Color Syntaxの活用パターン

パターン1：ボタンのホバー・アクティブ・disabled色を一元管理

静岡県浜松市の案件でも最も頻繁に発生するのが「ボタンの色ステート管理」です。
Relative Color Syntaxを使えば、ベースカラー1つから全ステートの色を自動生成できます。

:root {
  --btn-color: #3b82f6;
}

.btn {
  background-color: var(--btn-color);
  color: #fff;
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 0.375em;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: hsl(from var(--btn-color) h s calc(l + 10%));
}

.btn:active {
  background-color: hsl(from var(--btn-color) h s calc(l - 10%));
}

.btn:disabled {
  background-color: rgb(from var(--btn-color) r g b / 0.4);
  cursor: not-allowed;
}

--btn-color を変えるだけで、ホバー色・アクティブ色・disabled色がすべて追従します。
ブランドカラーの変更があっても修正箇所は1行だけで完結します。

パターン2：テーマカラーからの自動カラーパレット生成

ランディングページやコーポレートサイトで、ブランドカラーに沿ったUI全体のカラーパレットを生成する例です。

:root {
  --primary: #3b82f6;
  --primary-50:  oklch(from var(--primary) 0.97 0.02 h);
  --primary-100: oklch(from var(--primary) 0.93 0.05 h);
  --primary-200: oklch(from var(--primary) 0.85 0.1  h);
  --primary-400: oklch(from var(--primary) 0.65 0.18 h);
  --primary-600: oklch(from var(--primary) 0.5  0.2  h);
  --primary-800: oklch(from var(--primary) 0.38 0.15 h);
  --primary-900: oklch(from var(--primary) 0.28 0.1  h);
}

OKLCHで明度（l）を段階的に下げながらパレットを構築することで、Tailwind CSSのようなカラースケールをCSSネイティブで再現できます。

パターン3：ダークモード対応を簡単にする

ダークモードでは多くの色を反転・調整する必要がありますが、Relative Color Syntaxで明度を反転させる処理が非常にシンプルに書けます。

:root {
  --bg: #f8fafc;
  --text: #1e293b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e293b;
    --text: #f8fafc;
    /* アクセントカラーはそのままだが、背景に合わせてalphaを調整 */
    --accent-muted: rgb(from #3b82f6 r g b / 0.2);
  }
}

パターン4：コンポーネント単位でのカラーカスタマイズ

汎用コンポーネントにカラーバリエーションを持たせる際、Relative Color Syntaxで派生色をスコープ内で定義できます。

.card {
  --card-color: #3b82f6; /* ここだけ変えると全派生色が変わる */
  background-color: rgb(from var(--card-color) r g b / 0.08);
  border: 1px solid rgb(from var(--card-color) r g b / 0.3);
  color: hsl(from var(--card-color) h s calc(l - 25%));
}

.card--success {
  --card-color: #22c55e;
}

.card--warning {
  --card-color: #f59e0b;
}

.card--danger {
  --card-color: #ef4444;
}

--card-color を変えるだけで背景・ボーダー・テキスト色がすべて変わり、コンポーネントのバリエーション管理が非常にクリーンになります。
コンポーネントスコープのカスタムプロパティとRelative Color Syntaxの組み合わせは、保守性の高いUIシステムを構築する現代的な手法として注目されています。

---

ブラウザ対応状況と今すぐ使うための注意点

2024〜2025年時点のブラウザサポート状況

2025年現在、Relative Color Syntaxの主要ブラウザ対応状況は以下のとおりです。

Can I Useのデータでは、グローバルカバレッジが90%以上に達しており、最新のメジャーブラウザすべてで利用可能な状況になっています。
国内のビジネスサイト・コーポレートサイトで主要ターゲットとなるユーザー層のブラウザでは、すでに十分な普及率があると言えるでしょう。

フォールバックの書き方

古いブラウザへの対応が必要な場合は、@supportsを使ったフォールバックを記述します。

/* フォールバック（古いブラウザ向け） */
.button {
  background-color: #2563eb; /* 固定値で代替 */
}

/* Relative Color Syntaxが使える環境だけ上書き */
@supports (color: hsl(from red h s l)) {
  .button:hover {
    background-color: hsl(from var(--btn-color) h s calc(l + 10%));
  }
}

@supports のカッコ内では color: hsl(from red h s l) という形で機能検出ができます。
フォールバックを固定値にしておくことで、非対応ブラウザでもデザインが崩れずに表示されます。

Relative Color Syntaxを使う上での注意点

ブラウザカバレッジは十分に高まってきているため、プログレッシブエンハンスメントとして積極的に導入を検討する価値があります。

---

Sassや従来手法との比較：何が変わるのか

Sassのlighten・darken関数との違い

Sassを使っている開発者にとって lighten() や darken() は馴染み深い関数です。
しかしSassのこれらの関数はHSLの明度（l）を上下させる処理であり、知覚的な明るさとはズレが生じることがありました。
また、ビルドプロセスが必須なため、純粋なCSSプロジェクトやCDNで配信するスタイルシートには使えませんでした。

Relative Color Syntaxでは hsl(from color h s calc(l + 20%)) がSassの lighten(color, 20%) とほぼ同等の役割を果たし、さらにOKLCHを使えばより知覚的に正確な明度調整が可能です。
ビルド不要でランタイムに動的変化するのは大きなアドバンテージです。

CSS Custom Properties複数定義との比較

これまでは1つのブランドカラーに対してホバー色・disabled色・薄い背景色など複数のCSS Custom Propertiesを事前に定義しておく方法が一般的でした。
このアプローチの問題点は、ベースカラーを変更したときにすべての派生色を手動で更新しなければならない点です。

Relative Color Syntaxを使えば派生色の定義が「ベースカラーを操作する式」になるため、ベースカラーの変更が自動的に全派生色に波及します。
とくにCSS Custom Propertiesと組み合わせれば、JavaScript不要・ビルドツール不要の完全CSSネイティブなダイナミックカラーシステムが完成します。

JavaScriptによるカラー計算との比較

JavaScriptでカラー計算を行うライブラリ（chroma.js・tinycolor2など）を使う方法もありましたが、ライブラリの読み込みコストが発生し、CSSとJSの間で値の受け渡しが必要になります。
Relative Color SyntaxはCSS側で完結するため、ネットワークリクエスト・実行コストともに不要です。
パフォーマンスとメンテナンスコスト両面で、Relative Color SyntaxはCSS Color Manpulationの最もクリーンな解法と言えます。

---

アクセシビリティとRelative Color Syntax

コントラスト比を維持した色設計

WCAG 2.1ではテキストと背景のコントラスト比について「AA基準：4.5:1以上」「AAA基準：7:1以上」が定められています。
色のバリエーションを自動生成するときにこの基準を満たすかどうかは重要な問題です。

OKLCHを使ったRelative Color Syntaxでは、明度（l）の値を0〜1の範囲で制御でき、かつ知覚的に均一なため、テキスト色と背景色の明度差を計算しやすくなっています。
例えばテキストをoklch(0.2 0.05 h)、背景をoklch(0.95 0.02 h)のように設定すれば、知覚的に大きなコントラスト差を確保できます。

ハイコントラストモード・強制カラーモードへの配慮

Windowsの「ハイコントラストモード」やCSSの forced-colors メディアクエリが有効な環境では、ブラウザがシステムカラーでスタイルを上書きします。
Relative Color Syntaxで生成した派生色も同様にシステムカラーで置き換えられるため、この環境ではRelative Color Syntaxの動作は無効化されます。
@media (forced-colors: active) でフォールバックスタイルを定義しておくのがベストプラクティスです。

色だけに依存しない情報伝達の設計

Relative Color Syntaxで多様な色バリエーションを生成できるようになったとしても、情報を色のみで伝えるデザインは避けなければなりません。
エラー状態・成功状態・警告状態は色の変化だけでなく、アイコン・テキスト・aria属性などを併用して伝えることがアクセシビリティの基本です。
Relative Color Syntaxはあくまでビジュアル表現を豊かにするツールであり、アクセシビリティは別途セマンティクスとARIA属性で担保する設計が必要です。

---

まとめ：Relative Color Syntaxを活用してCSSカラー管理を進化させよう

ここまでCSS Relative Color Syntax（相対カラー構文）について、基本定義から構文・実務活用パターン・ブラウザ対応・Sassとの比較・アクセシビリティまで幅広く解説してきました。
最後に重要なポイントを整理します。

CSSのカラー操作はこれからますますネイティブで完結できる時代になっていきます。
静岡県浜松市のWEBデザイナーとして、これからも最新のCSS仕様をキャッチアップしながら、クライアントにとって保守しやすく・アクセシブルで・美しいWEBサイトを作り続けていきたいと思います。

Relative Color Syntaxはまさにその中心にある技術です。
ぜひ今日から小さなプロジェクトで試してみてください。