UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

ウェブ制作で色のアニメーションを実装するとき、RGBよりもHLSというフォーマットで指定する方がキレイなアニメーションになると言われています。

なぜRGBではなくHLSの方がキレイなアニメーションになるのでしょうか？
今回はその理由と、そもそもHLSとはどんなフォーマットなのか紹介します。

色の表現方法と違い

まずは基本的な概念から紹介します。
RGBはRed（赤）、Green（緑）、Blue（青）の三原色を組み合わせて色を表現します。

一方、HLSはHue（色相）、Lightness（輝度）、Saturation（彩度）で構成されています。
もしかすると、HLSは聞いたことがない人も要るのではないでしょうか？

HLSを選ぶメリット

RGBだと色の明るさや彩度をそのまま固定にして色を変えるのが難しいです。
しかし、HLSの場合はL（輝度）とS（彩度）はそのままにして、H（色相）だけ変えれば、同じ明るさと彩度を保ったまま変更できます。

そのため、HLSは色相のスムーズな変化を可能にし、自然な色の遷移が実現できます。

逆にRGBだと濃淡の変化が生まれてしまい、色の変化に違和感が出る場合があります。

新たな色指定方法のOklch

最近はOklchという指定方法もあります。
HLSでは明度と彩度を一緒にしても、視覚的な均一性があまりありません。

特に黄色系の色が明るく、明度と彩度が一緒でも少し目がチカチカします。
Oklchを使うことで視覚的に統一された色も作れるようになっています。

デザインツールではまだ対応していない場合もありますが、CSSだとすでにモダンブラウザには対応しています。

ただし、oklchはカラースペースがsRGBというカラースペースでは無く、さらに広範囲の色を指定できてしまいます。
一般的なスマートフォンやdisplay-p3対応の画面では正確に出力できますが、あまりに極彩色に近い色を使うと、ディスプレイによっては色の差が分からない可能性があります。

まとめ

HLSは、RGBと比べて自然な色の変化ができるため、自然なアニメーションを実現できるメリットがあります。

RGBで指定している人は、ぜひ他の選択肢も活用してみてください。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！