相対カラー構文で、色変数の明るさ・彩度・色相をチャンネルごとに調整する

どんな時に使う？

color-mix() で1つのブランド色からホバー用の濃い色・薄い背景色を作る は「黒や白を混ぜる」ので、濃くすると彩度まで落ちてくすむことがある。「明るさだけ上げたい」「彩度だけ半分にしたい」「色相を少しずらした補助色がほしい」といった、1つの性質だけを動かしたい場面では相対カラー構文のほうが狙いどおりになる。

コード

:root {
  --brand: oklch(0.62 0.19 255);

  /* 元の色そのまま（l c h をそのまま返す） */
  --brand-base: oklch(from var(--brand) l c h);

  /* 明るさだけ +0.1（彩度・色相は維持） */
  --brand-lighter: oklch(from var(--brand) calc(l + 0.1) c h);

  /* 明るさだけ -0.1（ホバー・押下用。黒を混ぜるよりくすみにくい） */
  --brand-darker: oklch(from var(--brand) calc(l - 0.1) c h);

  /* 彩度を半分に（落ち着いた「洗いざらし」の色） */
  --brand-washed: oklch(from var(--brand) l calc(c / 2) h);

  /* 色相を 30 度回して補助色に */
  --brand-accent: oklch(from var(--brand) l c calc(h + 30));

  /* 透明度を付ける（/ の後ろがアルファ） */
  --brand-soft: oklch(from var(--brand) l c h / 0.15);
}

.button { background: var(--brand); }
.button:hover { background: var(--brand-darker); }
.tag { background: var(--brand-washed); }

• from <色> の後ろでは、元の色のチャンネルが l c h（oklch の場合）というキーワードで使える。そのまま書けば値を引き継ぎ、calc() で計算すれば変えられる。
• 元の色は hex や rgb() でも構わない。oklch(from #3b82f6 ...) のように書けば、いったん oklch に変換してから計算される。
• oklch は明るさ（l: 0〜1）が人の見た目に近いので、calc(l + 0.1) のような一律の調整でもバラつきにくい。rgb(from ...) や hsl(from ...) でも同じ書き方ができる。

注意点・対応状況

• 相対カラー構文は Chrome / Edge 119+、Safari 18+、Firefox 128+ で使える（Baseline 2024）。それより古い環境向けには、手前に固定色のフォールバックを書いておく。
• calc(l + 0.1) で 1 を超えたり、c を上げすぎて表示可能な範囲（色域）を出たりすると、ブラウザが近い色に丸める。思った色にならない時は値を控えめにする。
• 色相の回転や彩度変更は、元の色によって見え方が大きく変わる。派生色を作ったら、文字とのコントラストは実際の色で確認すること。
• 単に透明度を変えるだけなら、alpha()（alpha() でカラートークンの薄い背景色を作る）のほうが短く書ける。

出典

• @gkurttech（2026-11-08、CSS tip）