SassでHEXカラーをOklchに変換する方法

今注目されているOklchに変換する方法です。
Oklchは、人間の知覚に沿って色を表現する、広色域にも対応できる強力なカラーモデルです。

color.to-space()

color.to-space()を使います。
$colorを指定された$spaceに変換します。$spaceは引用符で囲まれていない文字列でなければなりません。

color.to-space($color, $space) //=> color

基本的な使い方

@use 'sass:color';

$primary-color: #3498db; // HEX Color

.foo {
  background-color: color.to-space($primary-color, oklch);
}

Sassファイルの先頭で@use 'sass:color';と宣言するのを忘れないでください

下記のように変換されます。

.foo {
  background-color: oklch(65.309152153% 0.1347021448 242.6866673757deg);
}

フォールバック

参考: What are OKLCH colors?

oklchはCSSカラーモジュールレベル4で導入され、すべてのモダン・ブラウザで広くサポートされています。

ただし、oklchがサポートされていない環境もまだ存在します。
これを懸念する場合は、CSSの@supportsディレクティブを使用しフォールバックを追加します。

@use 'sass:color';

$primary-color: #3498db; // HEX Color

:root {
  --primary-color: $primary-color;

  @supports (color: oklch(0 0 0)) {
    --primary-color: #{color.to-space($primary-color, oklch)};
  }
}

.foo {
  background-color: var(--primary-color);
}

This way the browser uses oklch if the syntax is supported, otherwise it falls back to sRGB. Keep in mind that this doesn't magically change the colors. If an oklch color fits inside the sRGB gamut, it will look the same as the equivalent hex color.

さいごに

夜はすっかり肌寒くなりました。
季節の変わり目ですので、体調を崩されないようご自愛ください。
最後まで読んでいただき、ありがとうございました。