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採用に十分な状況。
oklch(from var(--brand) calc(l + 0.1) c h) で動的計算color-mix()+Relative Colorで複合的な色生成var(--brand) を起点に色派生、Design Token構築| 項目 | 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));
}
bg-[oklch(from_var(--brand)_l_c_h)] 記法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柔軟性で優位。
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化が代替策。