CSSの oklch() と oklab() は、OKLab という色空間で色を指定する関数です。#0f74c5 のようなHEX値や rgb() と違い、「明るさ」「鮮やかさ」「色合い」を、人の目の感じ方に近い尺度で直接指定できます。この記事では、値の読み方、WordPressのテーマや追加CSSでの使い方、配色の段階を作る方法、古いブラウザへのフォールバックを順に説明します。
oklch() の書き方
color: oklch(0.55 0.15 250); /* 明度 彩度 色相 */
color: oklch(55% 0.15 250deg); /* 明度は%でも書ける */
color: oklch(0.55 0.15 250 / 0.5); /* スラッシュの後ろは透明度 */| 値 | 意味 | 書ける範囲 |
|---|---|---|
| L（明度） | 明るさ。0が黒、1が白 | 0〜1（パーセントでも指定できる） |
| C（彩度） | 鮮やかさ。0は灰色 | 0以上。パーセントで書くと0.4を基準にした割合になる（50%は0.2） |
| H（色相） | 色合いの角度 | 数値または角度（deg など） |
| A（透明度） | スラッシュの後ろに書く。省略時は不透明 | 0〜1（パーセントでも指定できる） |
彩度は理論上の上限がありませんが、画面で表示できる色の範囲は限られています。oklch(0.9 1 25) のように彩度を大きくしすぎると、ブラウザは表示できる範囲の色に変換して表示するため、指定した値どおりの色にはなりません。sRGBの範囲で使う場合、彩度は0.1〜0.2前後を目安にし、表示を見ながら調整します。
色相の角度は hsl() とは一致しません。たとえば、明度0.55・彩度0.15のとき、色相30は赤茶系、140は緑系、250は青系になります。
oklab() との違い
oklab() は同じ色空間を、明度 L と2つの軸 a・b で表します。a は緑〜赤、b は青〜黄の方向です。
color: oklab(0.55 -0.05 -0.14);oklch() は、この a・b を「彩度（中心からの距離）」と「色相（角度）」に置き換えた書き方です。色合いを保ったまま明るさだけを変える、色相だけを回す、といった調整は oklch() のほうが直感的に書けます。2色の間を補間する用途では、色相が回り込まない oklab が向いている場合があります（後述のグラデーションを参照）。
oklch() を使う利点
hsl() の明度（L）は、数値が同じでも色によって見た目の明るさが大きく違います。彩度と明度を同じ値にして黄色と青を hsl() で並べると、黄色のほうがずっと明るく見えます。
oklch() の明度は、見た目の明るさに近くなるよう設計されています。そのため、
- 色相だけを変えても、明るさの印象がそろいやすい
- 明度を0.1ずつ変えると、どの色でも似た幅で明るさが変わる
- ブランドカラーから、薄い背景色や濃い文字色の段階を数値で作りやすい
といった扱いやすさがあります。
ただし、oklch() で書いたからといって、文字と背景のコントラストが自動的に確保されるわけではありません。この点は後の「注意点」で説明します。
ブラウザの対応状況
oklch() と oklab() は、2023年5月以降、Chrome・Edge・Firefox・Safariの現行版で使えます（2026年10月時点、MDNのBaseline「Widely available」）。古い端末やブラウザから訪問者が来る可能性がある場合は、次の章のフォールバックを用意してください。
WordPressテーマに組み込む
どこに書くか
| 方法 | 書く場所 | 向いている場面 |
|---|---|---|
| 追加CSS（クラシックテーマ） | 外観 → カスタマイズ → 追加CSS | 少しの色を変えたいとき |
| 追加CSS（ブロックテーマ） | 外観 → エディター（サイトエディター）の「スタイル」のメニューにある「追加CSS」 | 少しの色を変えたいとき |
| テーマ（子テーマ）のCSS | style.css や、読み込むCSSファイル |
配色をまとめて管理したいとき |
配布テーマを直接編集すると、テーマの更新で上書きされます。テーマのファイルに書く場合は、子テーマか自作テーマを使ってください。
色をCSS変数にまとめる
色の段階をCSS変数（カスタムプロパティ）として :root に定義し、各要素ではその変数を使います。ここでは色相250（青系）を例に、明度を変えた段階を作ります。
/* assets/css/colors.css */
/* 1. 未対応ブラウザ向けのHEX値（oklch の値をsRGBに換算したもの） */
:root {
--brand-50: #ebf3fc;
--brand-200: #acd2fb;
--brand-400: #61a3e6;
--brand-500: #0f74c5;
--brand-700: #0e4f86;
--brand-900: #0d2339;
}
/* 2. oklch() に対応したブラウザでは上書きする */
@supports (color: oklch(0 0 0)) {
:root {
--brand-50: oklch(0.96 0.015 250);
--brand-200: oklch(0.85 0.07 250);
--brand-400: oklch(0.70 0.12 250);
--brand-500: oklch(0.55 0.15 250);
--brand-700: oklch(0.42 0.11 250);
--brand-900: oklch(0.25 0.05 250);
}
}
/* 3. 使う側は変数だけを参照する */
a {
color: var(--brand-700);
}
.wp-block-button__link {
background-color: var(--brand-500);
color: #fff;
}
.wp-block-button__link:hover {
background-color: var(--brand-700);
}
.notice-box {
background-color: var(--brand-50);
border-left: 4px solid var(--brand-400);
color: var(--brand-900);
}ここで @supports を使っているのは、CSS変数の中身はブラウザがその場では検査しないためです。--brand-500: oklch(…) と書くと、未対応のブラウザでも変数自体は定義され、使う側のプロパティで初めて無効になります。その結果、先に書いたHEX値に戻らず、色が指定されていない状態になります。変数を使わず、プロパティに直接書く場合は、次のように重ね書きするだけで足ります。
.site-header {
background-color: #0e4f86; /* 未対応ブラウザはこちらを使う */
background-color: oklch(0.42 0.11 250); /* 対応ブラウザはこちらで上書き */
}色相を変えたいときは、各行の最後の数値（250）を変えます。たとえば30にすると赤茶系、140にすると緑系の、明るさの段階がそろった配色になります。HEXのフォールバックは色ごとに換算し直してください。
CSSファイルをテーマから読み込む
子テーマや自作テーマでは、functions.php でCSSファイルを読み込みます。ブロックエディターの編集画面にも同じ色を反映させるため、add_editor_style() でも読み込みます。
<?php
// 子テーマの functions.php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'mytheme-colors',
get_stylesheet_directory_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' );
} );get_stylesheet_directory_uri() は有効なテーマ（子テーマを使っている場合は子テーマ）のURLを返します。add_editor_style() のパスはテーマのフォルダーからの相対パスです。
グラデーションと色の混合
oklch や oklab は、グラデーションや color-mix() の補間方法としても指定できます。
/* oklab で補間する（中間色がくすみにくい） */
.hero {
background-image: linear-gradient(#0f74c5, #b94739);
background-image: linear-gradient(in oklab, #0f74c5, #b94739);
}
/* oklch で、色相を長い方向に回して補間する */
.rainbow {
background-image: linear-gradient(in oklch longer hue to right, #0f74c5, #b94739);
}
/* ブランドカラーに白を20%混ぜる */
.soft {
background-color: color-mix(in oklch, var(--brand-500), white 20%);
}in oklab などの補間方法の指定を理解できないブラウザでは、宣言全体が無視されます。グラデーションの例のように、指定なしの宣言を先に書いておくと表示が抜けません。color-mix() をCSS変数の中で使う場合は、@supports で切り替えてください。
元の色から明度や彩度を計算して派生色を作る方法（oklch(from var(--brand-500) calc(l - 0.1) c h) のような書き方）は、WordPressでCSS相対カラー構文（Relative Color Syntax）を使う方法で解説しています。
注意点
コントラストは別に確認する
文字と背景のコントラスト比（WCAGの基準）は、色の相対輝度から計算します。oklch() の明度 L とは計算方法が違うため、明度が同じでもコントラスト比は色相によって変わります。
| 色 | 白い背景とのコントラスト比 |
|---|---|
oklch(0.55 0.15 30)（赤茶系） |
約5.2:1 |
oklch(0.55 0.15 250)（青系） |
約4.9:1 |
oklch(0.55 0.15 140)（緑系） |
約4.6:1 |
WCAG 2の達成基準（レベルAA）では、通常サイズの文字に4.5:1以上のコントラスト比が求められます。明度を少し下げると基準を下回る組み合わせもあるため、配色を決めたらコントラストチェッカーで文字色と背景色の組み合わせを確認してください。
表示できる範囲を超えた色
広い色域（Display P3など）に対応した画面では、sRGBより鮮やかな色を表示できます。oklch() では、こうした色も指定できます。一方、sRGBの画面では表示できる範囲に変換されるため、端末によって見た目が変わります。ブランドカラーのように端末間で同じ色に見せたい色は、sRGBの範囲に収まる値（上の例の値はすべてsRGBの範囲内）を使うと安定します。
変数名の書き間違い
var(--brand-500) の変数名を書き間違えると、その宣言は無効になり、色が指定されていない状態になります。ブラウザの開発者ツールで要素を選び、計算済みのスタイル（Computed）に想定どおりの色が出ているかを確認すると、原因を見つけやすくなります。
まとめ
oklch(L C H)は、明度（0〜1）・彩度・色相で色を指定する書き方。彩度を大きくしすぎると表示できる範囲を超える- 明度が見た目の明るさに近いため、色の段階や色相違いの配色をそろえやすい
- 2026年10月時点で主要ブラウザの現行版が対応。古いブラウザ向けには、プロパティの重ね書きか
@supportsでHEX値のフォールバックを用意する - WordPressでは、追加CSSに書くか、子テーマのCSSファイルを
wp_enqueue_style()とadd_editor_style()で読み込む - 明度がそろっていても、WCAGのコントラスト比は色相によって変わる。文字色との組み合わせはチェッカーで確認する