Webアニメーションにおいて、時間帯やユーザーインタラクションに応じてカラーテーマを変更したい場面は多々あります。従来は各色をハードコーディングするか、複雑なSCSS関数を使用する必要がありました。しかし、CSS相対色(Relative Color)とOKLCH色空間を活用すれば、一つの基本色(--foundation)からシステマティックに全体のカラーパレットを生成できます。本記事では、この強力な技術を実践的なSVGアニメーションに適用する具体的な方法を解説します。詳細な根拠資料はSmashing Magazineの原文でご確認いただけます。
核心概念：相対色とOKLCH
CSS相対色の構文はoklch(from [基本色] [調整値])の形式で使用します。OKLCH色空間は、Lightness(明度)、Chroma(彩度)、Hue(色相)の3チャンネルで構成されており、色を直感的に調整するのに適しています。
/* 1. 基本色を定義（任意の色形式で可） */
--foundation: #5accd6;
/* 2. 相対色で派生色を作成 */
/* 明度を調整（暗くする） */
--foundation-dark: oklch(from var(--foundation) calc(l - 0.20) c h);
/* 彩度を調整（比率で減らす） */
--foundation-muted: oklch(from var(--foundation) l calc(c * 0.5) h);
/* 色相を調整（補色を作成 - 180度回転） */
--foundation-complement: oklch(from var(--foundation) l c calc(h + 180));
上記のコードでは、l、c、hは基本色の明度、彩度、色相の値を指します。calc()を使用してこれらの値を調整することで、新しい色を生成できます。
実践応用：アニメーション・テーマシステムの構築
色の関係性を定義する原則
実務経験から、著者は以下のようにまとめています：
- 明度(Lightness)は加算・減算(Move It)：絶対値での変更が自然です。
- 彩度(Chroma)は比率で乗算(Scale It)：基本色に対する彩度の比率を維持する必要があります。
- 色相(Hue)は回転(Rotate It)：角度(degree)を加算または減算して調整します。
SVGグラデーションへの適用
/* SVG内部スタイル */
<linearGradient id="bgGradient">
<stop offset="0%" style="stop-color: var(--grad-start);" />
<stop offset="100%" style="stop-color: var(--grad-end);" />
</linearGradient>
/* CSSでグラデーション色を定義 */
--foundation: #5accd6;
--grad-end: var(--foundation);
--grad-start: oklch(from var(--foundation)
calc(l - 0.2357) /* 明度減少 */
calc(c * 0.833) /* 彩度比率調整 */
h); /* 色相維持 */
これで、--foundationの値だけを変更すれば、グラデーションの開始色と終了色が自動的に調整されます。手動計算はもう必要ありません。
上級技法：色そのものをアニメーションさせる
静的な色変更を超えて、基本色自体をアニメーションさせることも可能です。@propertyルールで型を登録すれば、スムーズな補間が可能になります。
/* 1. OKLCHチャンネルを個別のCSS変数として登録 */
@property --f-l { syntax: '<number>'; inherits: true; initial-value: 0.40; }
@property --f-c { syntax: '<number>'; inherits: true; initial-value: 0.11; }
@property --f-h { syntax: '<number>'; inherits: true; initial-value: 305; }
/* 2. 登録された変数から基本色を再構築 */
--foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
/* 3. キーフレームでチャンネルアニメーションを定義 */
@keyframes breathe {
0%, 100% { --f-l: 0.36; }
50% { --f-l: 0.46; }
}
/* 4. アニメーションを適用 */
.toon-title {
animation: breathe 10s ease-in-out infinite;
}
--foundationが動くと、そこから派生した全ての色(--foundation-dark、--grad-startなど)が一斉に命を吹き込まれます。一つの値だけを制御するだけで全体のカラーシステムが反応するため、保守性も大幅に向上します。
CSS相対色は単なる構文ではなく、デザインシステムを構築する強力なパラダイムです。ボタンの状態、ダークモード、視覚的フィードバックなど、様々なインターフェース要素に応用してみてください。色に対する考え方が根本から変わるでしょう。