color-gamutとcolor()関数で色の精度を上げるSCSS

導入

CSSのカラースペースは近年進化を遂げており、sRGBからP3やRec.2020など、より広い色域をサポートするようになっています。本記事ではSassを使用して色指定を簡単にする方法を紹介します。

Mixinの概要

以下に示すmixinは、CSSのcolor()関数に対してRGB値を簡単に設定できるように設計されています。このmixinはRGB値をパーセンテージ形式に変換し、メディアクエリを利用して表示デバイスに合わせた適切な色が表示されるようにしています。

mixin.scss

@mixin set-color($property, $r, $g, $b) {
    $r-percentage: math.div($r, 255);
    $g-percentage: math.div($g, 255);
    $b-percentage: math.div($b, 255);

    #{$property}: rgb($r,$g,$b,);
    #{$property}: color(srgb $r-percentage $g-percentage $b-percentage);

    @media (color-gamut: srgb) {
        #{$property}: color(srgb $r-percentage $g-percentage $b-percentage);
    }
    @media (color-gamut: p3) {
        #{$property}: color(display-p3 $r-percentage $g-percentage $b-percentage);
    }
    @media (color-gamut: rec2020) {
        #{$property}: color(rec2020 $r-percentage $g-percentage $b-percentage);
    }
}

使用例

element.scss

.element {
    @include set-color(background-color, 244, 214, 0);
}

出力は以下のようになります。

element.css

.element {
    color: #f4d600;
    color: color(srgb 0.9568627451 0.8392156863 0);
}

@media(color-gamut: srgb) {
    .element {
        color: color(srgb 0.9568627451 0.8392156863 0)
    }
}

@media(color-gamut: p3) {
    .element {
        color: color(display-p3 0.9568627451 0.8392156863 0)
    }
}

@media(color-gamut: rec2020) {
    .element {
        color: color(rec2020 0.9568627451 0.8392156863 0)
    }
}

最後に

デバイス毎の差異が生まれる点についてはやはり注意が必要ですが、sRGBで留まり続けるべきとは到底思えません。
興味のある方は下記のリンクにあるシミュレータと、MacであればColor Digital Meter、WindowsであればPower Toysのカラーピッカーを使用して、実際に入力した色がどのように出力されているのかシミュレートしてみてください。

参考