本ブログに OKLCH カラースペースを導入

投稿 : 2026年6月20日

本ブログの CSS における配色は長らく16進数表記法（Hex color notation）を使用していたのですが、重い腰を上げて oklch() 関数に移行しました。色相（H）を直接定義するのは黒、赤、青、緑など基本となる一部の色のみで、明度（L）と彩度（C）の調整は相対色指定を採用しています。

/* 本ブログの色定義の一例 */

--color-blue: oklch(45.201% 0.3132 264.05deg); /* #0000ff */
--color-purple: oklch(42.091% 0.1935 328.36deg); /* #800080 */

--link-color: oklch(
  from var(--color-blue) calc(l + 0.1) c h
); /* 未訪問リンク */
--link-color-visited: oklch(
  from var(--color-purple) calc(l + 0.05) c h
); /* 既訪問リンク */

このようなやり方の場合、ベースとなる --color-blue 等は人間が見て理解困難な数値を指定するよりも、blue や purple といった色名で表現する方が簡単です。

--color-blue: blue;
--color-purple: purple;

--link-color: /* 同一につき省略 */;
--link-color-visited: /* 同一につき省略 */;

しかし2026年6月現在、これは避けるべき状況です。というのも oklch() 関数はすでに Baseline Widely available となってはいるものの、実際には一部のブラウザ環境が対応していないからです。具体的には iOS 版 Firefox と同 Edge において強制ダークテーマを適用した状態では lab(), lch(), oklab(), oklch() の各関数において意図した強制変換が行われない事象を確認しています。

例えば body { background-color: oklch(100% 0 0deg); color: black; } のように混在させると、当該環境では白背景に白文字（厳密には薄い灰色文字）で描画されるため、テキストが読めなくなってしまうのです。

サムネイル画像 — iOS 版 Firefox 151.3.2 (73107) のスクリーンショット。text という文字が書かれているのだが、白背景に薄い灰色文字なので読解困難。オリジナル画像

このため以下のような対応が必要になるでしょう。

必要がなければ無理に oklch() へ移行せず、Hex や hsl()、rgb() などの古くからある技術を使うのが現状は安全
上記現象を承知のうえで oklch() を使うならばそれに統一する

本ブログでは必要性の薄い箇所（oklch() 関数を採用するメリットがない箇所）も含めて、多少無理矢理にでもすべて oklch() 関数に置き換えました。前述の iOS 版 Firefox と Edge ではせっかくブラウザが搭載している強制ダークテーマの機能がまったく効かなくなってしまうことは重々承知のうえで、さすがにブラウザのバグのためだけにいつまでも Hex 記法を続けるわけにもいかず、せめて混在を避けて統一するようにした次第です。

iOS 端末にて本ブログをダークテーマで閲覧したい場合はぜひ Vivaldi(apps.apple.com) を使ってください。似たような強制ダークテーマ機能といえども Vivaldi は実装の方法が異なるためか、oklch() 関数を使った Web ページも良い感じに色変換してくれます。