CSS

A new color specification method that reproduces colors naturally as seen by the human eye.

lab()

色の指定に新しい方法が登場！

CSSではこれまで「赤」「青」などをrgb()やhsl()で指定していましたが、最近はもっと人間の見た目に近い形で色を指定できる方法として、lab()が使えるようになってきました。

lab()とは？

lab()は、人間の視覚に基づいた色の指定方法です。以下のような特徴があります：

• 色の「明るさ」と「色味」を分けてコントロールできる
• 同じ差の数値でも、人間の目にとって色の違いが一貫して見える
• 色のグラデーション（補間）が自然で滑らか
• 色の再現性が高く、特にデザインの品質を重視する場面で有利

例：こんなふうに使います

background-color: lab(70% -20 40);

70%

明るさ（L値）

-20

緑よりの色（a軸）

40

黄色よりの色（b軸）

この指定方法は、印刷やプロ向けグラフィックの現場でも使われるLab色空間をWebに持ち込んだものです。

注意点

2025年現在、lab()はすべてのブラウザで完全対応しているわけではありません。最新のChromeやFirefoxでは使えますが、Safariや古い環境では注意が必要です。

color: lab()などを使うときは、必ずフォールバックの色指定も一緒に書いておくと安心です。