• HOME
  • WordPressでCSS相対カラー構文（Relative Color Syntax）を使う方法

2026年6月28日

  • シェア
  • ツイート

    • 2026年6月28日

    WordPressでCSS相対カラー構文（Relative Color Syntax）を使う方法

    CSSの相対カラー構文（Relative Color Syntax）を使うと、oklch(from var(--brand) calc(l - 0.1) c h) のように、元の色から明るさや透明度だけを変えた色をCSSだけで作れます。WordPressでは、theme.jsonのカラーパレットが出力するCSS変数を元色にすれば、ブランドカラーを1か所変えるだけでホバー色や薄い背景色まで追従させられます。この記事では、構文の読み方、WordPressテーマへの組み込み方、未対応ブラウザへのフォールバック、つまずきやすい点を順に解説します。

    相対カラー構文の基本

    相対カラー構文は、色関数の最初に from 元の色 を書き、その後ろに各チャンネルの値を並べる書き方です。元の色はチャンネルごとに分解され、r g b や l c h といったキーワードで参照できます。

    /* 元の色をそのまま再現する（変化なし） */
color: rgb(from #0073aa r g b);

/* 透明度だけを50%にする */
background: rgb(from #0073aa r g b / 0.5);

/* OKLCHに変換して明るさを0.1下げる */
color: oklch(from #0073aa calc(l - 0.1) c h);

/* 色相を180度回して補色にする */
color: hsl(from #0073aa calc(h + 180) s l);

    使えるキーワードは、外側に書いた色関数によって決まります。

    • rgb(): r g b（0〜255の数値）
    • hsl(): h（角度の数値）、s l
    • oklch() / lch(): l（明度）、c（彩度）、h（色相）
    • どの関数でも、スラッシュの後ろでは alpha で元の透明度を参照できます

    元の色が #0073aa のようなHEX値でも、oklch(from ...) と書けばOKLCHに変換したうえで計算されます。元の色をどの形式で書いたかと、計算に使う色空間は独立している、という点を押さえておくと読みやすくなります。

    明るさの調整にはoklch()が向いている

    明るさを変えたい場合は、hsl() よりも oklch() を使うのがおすすめです。HSLの明度は人の目の感じ方と一致しないため、同じ量だけ明るくしても、黄色と青では見た目の変化が大きく異なります。OKLCHの l は知覚的な明るさに近く、0（黒）〜1（白）の数値として扱えるため、「どの色でも0.1下げると同じくらい暗く見える」という調整がしやすくなります。

    hsl() でチャンネルを計算する場合、calc(l - 20%) のように数値とパーセントを混ぜた書き方は、現行の仕様では無効になることがあります。チャンネルキーワードは数値として扱われるため、計算は数値同士で書くのが安全です。色相を回すだけなら hsl() でも問題ありません。

    ブラウザの対応状況

    相対カラー構文は、Chrome・Edge 119以降、Firefox 128以降、Safari 18以降で現行の仕様に沿って使えます（2026年10月現在）。Safariは16.4から一部対応していましたが、初期の実装は現在の仕様と挙動が異なる部分があったため、古いiOSを使う訪問者が一定数いるサイトではフォールバックを用意してください。

    主要ブラウザの最新版はすべて対応していますが、対応がそろってからの期間はまだ短めです。古い端末の利用者が多いサイトかどうかは、アクセス解析のブラウザ別の割合で確認すると判断しやすくなります。

    WordPressテーマに組み込む

    元の色はtheme.jsonのパレットに置く

    ブロックテーマやtheme.jsonを使うクラシックテーマでは、settings.color.palette に登録した色が --wp--preset--color--{slug} というCSS変数として出力されます。

    {
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0073aa", "name": "Primary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" }
      ]
    }
  }
}

    パレットの color には相対カラー構文を書かず、通常の色だけを置いておくのが無難です。エディターの色選択UIは通常の色の値を前提にしているため、相対カラーを入れると編集画面で扱いにくくなります。派生色は、次のようにテーマのCSS側で作ります。

    派生色をCSS変数として定義する

    /* assets/css/colors.css */
:root {
  /* 未対応ブラウザ向けの固定値 */
  --theme-primary-hover: #005a87;
  --theme-primary-soft: #e5f1f7;
}

@supports (color: oklch(from red l c h)) {
  :root {
    --theme-primary-hover: oklch(from var(--wp--preset--color--primary) calc(l - 0.08) c h);
    --theme-primary-soft: oklch(from var(--wp--preset--color--primary) 0.96 calc(c * 0.3) h);
  }
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: var(--theme-primary-hover);
}

.is-soft-primary {
  background-color: var(--theme-primary-soft);
}

    --theme-primary-soft では、明度を0.96に固定し、彩度を元の3割にしています。これで「ブランドカラーと同じ色相の、ごく薄い背景色」になり、パレットの primary を別の色に変えても、ホバー色と薄い背景色が自動的に追従します。

    フロントとエディターの両方で読み込む

    このCSSは、フロント表示とブロックエディターの両方で読み込みます。エディター側にも読み込まないと、編集画面と公開ページで色が食い違います。

    <?php
// functions.php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'mytheme-colors',
		get_theme_file_uri( 'assets/css/colors.css' ),
		array(),
		wp_get_theme()->get( 'Version' )
	);
} );

add_action( 'after_setup_theme', function () {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'assets/css/colors.css' );
} );

    add_editor_style() で読み込んだCSSは、エディター内では本文の領域に限定されるようにセレクターが書き換えられます。:root に定義した変数もエディターの本文内で使えるようになりますが、表示が想定どおりかは、実際にボタンブロックなどを置いて確かめてください。

    未対応ブラウザへのフォールバックの注意点

    通常のプロパティなら、固定値を先に書いて相対カラーを後に書けば、未対応のブラウザは理解できない2行目を無視し、1行目の固定値を使います。

    .site-header {
  background-color: #005a87;
  background-color: oklch(from #0073aa calc(l - 0.08) c h);
}

    ところが、CSS変数（カスタムプロパティ）の中に相対カラーを書くと、この仕組みが働きません。カスタムプロパティはどんな値でもいったん受け入れるため、未対応ブラウザでも「無効な値を持った変数」が定義され、使う側のプロパティで初めて無効になります。その結果、固定値に戻るのではなく、色が指定されていない状態（透明や継承色）になります。先ほどの例で @supports を使って切り替えているのはこのためです。

    @supports の条件には、実際に使う関数と同じ形を書いておくと判定がずれにくくなります。oklch(from ...) を使うなら oklch(from red l c h)、rgb(from ...) を使うなら rgb(from red r g b) を条件にします。ただし、初期実装のSafari（16.4〜17系）は @supports の判定を通過しても、チャンネルを含む calc() の扱いが現行仕様と異なる場合があります。古いiOSの利用者が多いサイトでは、実機で派生色が表示されるかを確認してください。

    つまずきやすい点

    • コントラストは自動では保証されない: 明度を下げたホバー色でも、文字色との組み合わせによっては読みにくくなります。派生色を作ったら、コントラストチェッカーで文字色との比を確認してください
    • 元の変数が未定義だと全体が無効になる: var(--wp--preset--color--primary) のスラッグを書き間違えると、相対カラー全体が無効になります。開発者ツールの「Computed（計算済み）」で、最終的な色が出ているかを確認すると見つけやすくなります
    • 色域の外に出る値: oklch() で彩度を上げすぎると、画面で表示できる範囲を超えることがあります。ブラウザが近い色に丸めて表示しますが、意図した色にならない場合は彩度を控えめにします
    • 単純な混色ならcolor-mix()も選択肢: 「白を20%混ぜる」程度の調整であれば、color-mix(in oklch, var(--wp--preset--color--primary), white 20%) でも書けます。相対カラーはチャンネルを個別に操作したいときに向いています

    動作を確認する

    開発者ツールで要素を選び、「Styles（スタイル）」パネルに相対カラーの宣言が取り消し線なしで表示されているか、「Computed」パネルで計算後の色が想定どおりかを確認します。フォールバックの確認は、古いSafariなどを実機やテストサービスで開くのが基本ですが、手元にない場合は @supports の条件をわざと誤った書き方に変え、固定値の表示に切り替わるかを試すことでも挙動を確かめられます。

    まとめ

    • 相対カラー構文は from 元の色 でチャンネルを分解し、明るさや透明度だけを変えた色を作る書き方
    • 明るさの調整には、知覚に近い明度を持つ oklch() が扱いやすい。計算は数値同士で書く
    • 2026年10月現在、主要ブラウザの最新版は対応済み。古いSafari向けにはフォールバックを用意する
    • WordPressでは、theme.jsonのパレット変数を元色にし、派生色はテーマのCSSで定義してフロントとエディターの両方に読み込む
    • CSS変数に相対カラーを入れる場合は、重ね書きのフォールバックが効かないため @supports で切り替える
    Views: 38

    お気軽にご相談ください

    お見積りへ お問い合わせへ
    閉じる
    ▲