CSS Relative Color Syntax（シーエスエスリラティブカラーシンタックス）
2024年Baseline Newly available。color-mix()上位+rgb(from base r g b)+oklch(from var(--color) l c h)構文+色操作CSS Native+darken/lighten Sass代替。
概要
CSS Relative Color Syntaxは2024年に主要ブラウザで安定対応(Baseline Newly available)した新CSS仕様で、既存の色を起点として色変換・色操作を行う構文。Sassのlighten()/darken()/mix()といった色操作関数のCSS Native版で、JavaScript・Sass・PostCSSなしで色のシステムを構築できる。rgb(from var(--color) r g b / 0.5) で透明度変更、oklch(from var(--brand) calc(l + 0.1) c h) で明度+10%等、すべて純CSSで宣言的に記述可能。OKLCH/OKLab色空間に対応し、知覚的に均一な色変換が可能(従来のHSLやRGBより色の歪みが少ない)。Tailwind CSS 4.0は2024年12月にRelative Color Syntaxを採用し、ユーティリティクラスでの色変換を効率化。Chrome 119+/Firefox 120+/Safari 16.4+で対応済みで、2026年5月時点では Production採用に十分な状況。
主な特徴・仕組み
- rgb(from base r g b / a): ベース色からR/G/Bチャンネル個別操作、透明度設定
- hsl(from base h s l): HSL色空間での操作、明度・彩度の細かい調整
- oklch(from base l c h): OKLCH色空間、知覚的に均一な変換(Sassより自然)
- oklab(from base l a b): OKLab色空間、Lab* に近いが知覚均一性向上
- lch/lab from: 旧来のCIE LCH/LAB色空間、専門的色管理用途
- calc()併用:
oklch(from var(--brand) calc(l + 0.1) c h)で動的計算 - color-mix()と併用:
color-mix()+Relative Colorで複合的な色生成 - CSS Custom Properties統合:
var(--brand)を起点に色派生、Design Token構築 - Performance: Native実装、Sass前処理不要+ブラウザGPU処理
- Browser Support: Chrome 119+ Edge 119+ Firefox 120+ Safari 16.4+(全Baseline)
- MDN Browser Compatibility: 2024年安定確定、Baseline Newly availableマーク
スペック比較表
| 項目 | CSS Relative Color | CSS color-mix() | Sass darken/lighten | TailwindCSS 4 |
|---|---|---|---|---|
| 実装 | CSS Native | CSS Native | Sass前処理 | CSS Native(Relative Color活用) |
| 色空間 | RGB/HSL/OKLCH/OKLab/LCH/LAB | 任意 | RGB/HSL | OKLCH(by default) |
| 知覚均一性 | OKLCH ○ / RGB △ | 色空間依存 | △ HSL限定 | OKLCH ○ |
| Bundle Size | 0KB | 0KB | 前処理(Build時) | Native活用 |
| Browser Support | Chrome 119+ Baseline | 全ブラウザ Baseline | 前処理 | Chrome 119+ |
| Dynamic | ○ Custom Properties連携 | ○ | × (Build時固定) | ○ |
| Design Token | ○ Native | ○ | ○ Sass変数 | ○ Tailwind tokens |
| 学習曲線 | CSS知識 | CSS知識 | Sass知識 | Tailwindクラス |
具体例・対応製品
:root {
--brand: oklch(70% 0.15 250);
}
/* 透明度50%バリアント */
.button-translucent {
background: rgb(from var(--brand) r g b / 0.5);
}
/* 10%明度アップ(hover state) */
.button:hover {
background: oklch(from var(--brand) calc(l + 0.1) c h);
}
/* 暗い影(boxShadow) */
.card {
box-shadow: 0 4px 8px oklch(from var(--brand) calc(l - 0.3) c h / 0.3);
}
/* 補色生成 */
.complementary {
background: oklch(from var(--brand) l c calc(h + 180));
}
- Chrome 119+: 2023年10月リリース、stable動作
- Firefox 120+: 2023年11月リリース、stable動作
- Safari 16.4+: 2023年3月リリース、stable動作
- Tailwind CSS 4.0: 2024年12月Relative Color Syntax採用、
bg-[oklch(from_var(--brand)_l_c_h)]記法 - 競合機種: CSS color-mix()(2024年Baseline)、Sass(前処理)、PostCSS Color Plugin、Open Props
自作PCでの選び方・注意点
CSS Relative Color SyntaxはWeb開発者向けの新CSS仕様で、自作PCとは直接関係しないが、jisaku.comのデザインシステム構築では重要な技術。Tailwind CSS 4.0(jisaku.com採用済み)はRelative Color Syntaxを内部で活用しており、bg-brand-500/50のような透明度バリアントが Native CSSで実装される。Bundle Size削減(Sass前処理不要)+Runtime動的色変更(JavaScript からCustom Property変更で全色派生も自動更新)が主なメリット。OKLCH色空間採用で、Brand Color → Hover/Active/Disabledのバリアント生成が知覚的に均一になり、デザインシステムの一貫性が向上する。jisaku.com Design System(Tailwind CSS 4 ベース)では --color-brand: oklch(70% 0.15 250) を起点に、oklch(from var(--color-brand) calc(l + 0.1) c h) でHover state生成等の運用が標準化されている。Sassからの移行でDevelopment Build時間が10-30%短縮、Production Bundle Size が 5-10KB削減。Chrome/Firefox/Safari全Baseline対応で、Production採用にBlockerなし。Edge Cases として、Internet Explorer・Opera Mini等の古ブラウザは非対応だが、jisaku.comユーザー層では問題なし。
関連用語との違い
color-mix()との違い: color-mix()は2色の混合(color-mix(in oklch, red 50%, blue))、Relative Colorは1色を起点とした変換(oklch(from red l c h))。両者組合せで複雑な色操作可能。color-mix()は2色間補間、Relative Colorはチャンネル単位操作で役割が異なる。
Sass darken/lighten/mix()との違い: Sassは前処理(Build時に色固定)、Relative ColorはCSS Native(Runtime動的変更可能)。Sassは古いブラウザ対応で安心、Relative ColorはBundle削減+Runtime柔軟性で優位。
よくある質問（FAQ）
Q1: なぜOKLCHを使うべき？ A: 従来のHSL/RGBは知覚的に不均一(明度を10%上げてもチャンネルにより変化量が異なる)、OKLCHは知覚均一(明度+10%なら全色で同じ印象)。Brand Color のHover/Active states が自然に派生し、デザインシステムの一貫性が向上する。
Q2: TailwindCSS 4でどう活用される？
A: Tailwind 4は内部でoklch(from var(--color-X) ...) 構文を使い、bg-brand-500/50のような透明度ユーティリティをRelative Color Syntaxで実装。text-brand-700 のようなトーンバリアントも同様。Sass非依存+Pure CSS Build。
Q3: Internet Explorer 11対応は？ A: IE 11は完全非対応(EOL済み)。jisaku.comはIE非サポートのため問題なし。Microsoft Edge Chromium(2020年以降)はIE後継で完全対応、Edge 119+で動作する。レガシー環境ではPostCSS Pluginで前処理して通常CSS化が代替策。
まとめ
- CSS Relative Color Syntax = 2024年Baseline Newly available
- rgb(from base r g b)/oklch(from base l c h)構文で色変換
- OKLCH対応で知覚的に均一な色操作、Sass darken/lighten代替
- Tailwind CSS 4.0公式採用、Chrome 119+/Firefox 120+/Safari 16.4+
- Sass前処理不要、Bundle削減+Runtime動的色変更可能