CSSのcolor-mix()の使い方｜WordPressのテーマ色から濃淡・半透明色を作る

CSS の color-mix() は、2 つの色を指定した割合で混ぜた色を作る関数です。WordPress では、テーマが用意している色の変数（--wp--preset--color--スラッグ）と組み合わせると、テーマの配色を変えたときにホバー色や薄い背景色も一緒に変わるようになります。

この記事の書式と動作は、2026年11月時点の MDN の解説と CSS Color Module Level 5 に沿っています。

color-mix() の書式

color-mix(in 色空間, 色1 割合1, 色2 割合2)

• in 色空間 は、どの色空間で混ぜるかの指定です。srgb・oklab・oklch・hsl などが使えます。
• 割合は 0 から 100 までのパーセント値で、省略できます。
• 例: color-mix(in srgb, blue 30%, white) は「青 30%・白 70%」の色になります。

割合の決まりは次のとおりです。

最新の仕様では、色空間の指定を省略したとき（既定は oklab）や 3 色以上を混ぜる書き方も定義されていますが、これらはブラウザーの対応が揃っていません。この記事では、広く動く「2 色・色空間を明示する」書き方だけを使います。

色空間で混ざり方が変わる

同じ 2 色でも、混ぜる色空間によって中間の色が変わります。

濃淡を作るだけなら oklab か srgb、鮮やかなグラデーションの中間色を作るなら oklch が目安です。最終的には実際の画面で見比べて決めてください。

対応ブラウザー

2 色を混ぜる基本の書き方は、Chrome・Edge 111、Firefox 113、Safari 16.2 以降で使えます。MDN では 2023年5月以降、主要ブラウザーで広く使える機能（Baseline Widely available）として扱われています。古いブラウザーへの対策は後の「対応していないブラウザーへの備え」で説明します。

WordPress のどこに書くか

color-mix() は CSS の値なので、CSS を書ける場所ならどこでも使えます。

子テーマの作り方はWordPressの子テーマにCSSを追加する方法、theme.json についてはWordPressのtheme.jsonでデザインを設定する方法を参照してください。

テーマの色の変数を調べる

theme.json の settings.color.palette に登録された色は、WordPress がページに --wp--preset--color--スラッグ という CSS 変数として出力します。スラッグはテーマごとに違う（primary、contrast、accent-1 など）ので、まず自分のテーマの名前を確認します。

1. サイトをブラウザーで開き、開発者ツール（F12）を開く。
2. 「Elements」（要素）で body を選び、「Styles」（スタイル）に並ぶ --wp--preset--color-- で始まる変数を見る。

以下の例では、スラッグが primary の色があるものとして書きます。自分のテーマのスラッグに置き換えてください。

使用例 1: ボタンのホバー色を作る

元の色に黒を少し混ぜると、少し暗い色になります。テーマの色を変えるとホバー色も追従します。

.my-button {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

.my-button:hover,
.my-button:focus-visible {
	/* 元の色 85% に黒 15% を混ぜて少し暗くする */
	background-color: color-mix(in oklab, var(--wp--preset--color--primary) 85%, black);
}

ブロックエディターの「ボタン」ブロックに当てる場合は、ブロックの「高度な設定」→「追加 CSS クラス」に my-button を入れます。

使用例 2: 薄い背景色を作る

白を多めに混ぜると、同じ系統の薄い色になります。お知らせ枠や表の見出し行の背景に向いています。

.notice-box {
	background-color: color-mix(in oklab, var(--wp--preset--color--primary) 12%, white);
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: 1em 1.25em;
}

使用例 3: 半透明の色を作る

色を透けさせたいときは、transparent と混ぜます。混ぜた割合がそのまま不透明度になります。

.hero-overlay {
	/* 元の色を 70% の不透明度にする */
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}

rgba(color-mix(...), 0.7) のように rgba() の中に color-mix() を入れる書き方は CSS の文法にないため、宣言ごと無視されます。透明度の調整は上の形で書いてください。

使用例 4: グラデーションの中間色に使う

linear-gradient() の色の位置にも color-mix() を書けます。2 色の間に、oklch で混ぜた中間色をはさむと、途中がくすみにくくなります。

.gradient-band {
	background: linear-gradient(
		to right,
		#1e66f5,
		color-mix(in oklch, #1e66f5, #fe640b) 50%,
		#fe640b
	);
}

linear-gradient() 自体にも linear-gradient(in oklch to right, #1e66f5, #fe640b) のように補間の色空間を指定する書き方がありますが、color-mix() を使う上の書き方なら、中間色の位置と混ぜ方を個別に決められます。

対応していないブラウザーへの備え

var() を含まない値なら、先に通常の色を書き、後から color-mix() を書けば、対応していないブラウザーは後の行を無視して先の色を使います。

.notice-box {
	background-color: #eef3fe; /* 対応していないブラウザー用 */
	background-color: color-mix(in oklab, #1e66f5 12%, white);
}

ただし、var() を含む宣言はこの方法では守れません。var() を含む値は読み込み時には正しいものとして扱われ、表示の直前に無効と分かった時点で、先に書いた色ではなく初期値（背景なら透明）になります。テーマの変数と組み合わせる場合は @supports で分けます。

.notice-box {
	background-color: #eef3fe;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.notice-box {
		background-color: color-mix(in oklab, var(--wp--preset--color--primary) 12%, white);
	}
}

うまく色が付かないときの確認

• 開発者ツールで、その宣言に取り消し線が付いていないかを見る。付いていれば書式の誤り（in の書き忘れ、色空間名の誤り、割合が 0% と 0% など）です。
• 変数のスラッグが合っているかを確かめる。存在しない変数を使うと、宣言全体が無効になり初期値（背景なら透明）になります。
• キャッシュ系のプラグインや CDN を使っている場合は、CSS のキャッシュを消してから確認する。

関連記事

• WordPressのCSSグリッドレイアウトを使う方法
• WordPressのCSS Nesting（ネスト）を使う方法

参考: color-mix()（MDN）、CSS Color Module Level 5（W3C）