「ロゴのこの鮮やかな緑、画面だと少し沈んで見えませんか」——受託でブランドサイトを作っていると、印刷物やブランドガイドの色をそのまま Web に載せたとき、なぜか色がくすむ、という相談をよく受けます。デザイナーが指定した鮮やかなキーカラーが、画面では一段おとなしくなる。これを「画面の個体差」で片付けてしまいがちですが、原因の一つはもっと根本的なところにあります。Web が長年、sRGB という狭い色の範囲（色域）しか使ってこなかったことです。鮮やかな色は、その範囲の「外」にあって、これまで表示する手段がなかった。
この前提が、いま変わりつつあります。色の話を分かりやすく整理した Where to Find the Colors Your Screen Can’t Show You（moultano） が示すとおり、いまどきのスマートフォンやノートPCの多くは sRGB より広い Display P3 という色域を表示できます。そして CSS も、その広い色をきちんと指定できるようになりました。本記事では、受託で「ブランド色をくすませず、かつ古い画面でも破綻させない」ために、広色域カラーをどう使うかを制作の立場から整理します。
なぜブランド色は画面でくすむのか — 「色域」という器の大きさ
色域とは、ざっくり言えば「その仕組みが表現できる色の範囲」です。sRGB は四半世紀前に定められた標準で、当時のモニターに合わせた、やや狭い範囲でした。鮮やかな赤・緑・青——とくに彩度の高い色は、この範囲に収まりきりません。
問題は、CSS で #00C853 のように 16 進数や通常の rgb() で色を書くと、それは sRGB の範囲内の色として解釈されることです。つまり、どれだけ鮮やかな色を指定したつもりでも、表現は sRGB の器の大きさで頭打ちになる。画面自体はもっと鮮やかな緑を出せるのに、CSS の指定が「sRGB の中で一番鮮やかな緑」までしか要求していないため、本来の鮮やかさが出ない。これが「ブランド色がくすむ」の正体です。
| 観点 | これまで（sRGB） | 広色域（Display P3） |
|---|---|---|
| 表現できる色の範囲 | 狭い（彩度の高い色が頭打ち） | 広い（より鮮やかな色まで） |
| CSS の書き方 | #00C853 / rgb() | color(display-p3 ...) / oklch() |
| 対応していない画面 | — | フォールバックで sRGB 表示 |
色を「画面まかせ」にせず、CSS の宣言として正確に持つという発想は、CSS contrast-color で配色を自動補正する記事で扱った「色を仕組みで管理する」考え方の延長線上にあります。器の大きさを意識すると、同じ色指定でも見え方が変わってきます。
広い色を指定する — color() と oklch()
広色域の色を CSS で指定する方法は、主に二つあります。
ひとつは、color(display-p3 ...) で、Display P3 の範囲の色を直接書く方法です。
.brand {
/* sRGBでは出せない、より鮮やかな緑を直接指定する */
color: color(display-p3 0 0.8 0.35);
}もうひとつは、oklch() という、人の見え方に近い形で色を指定する書き方です。明度・彩度・色相を分けて書けるため、「同じ明るさのまま彩度だけ上げる」といった調整が直感的で、デザインシステムのトークン管理と相性が良い。oklch() は sRGB の外の鮮やかな色も表現できます。
ポイントは、どちらも「sRGB の器の外」の色を要求できることです。これにより、画面が対応していれば本来の鮮やかさが出ます。ただし、ここで必ずセットにすべきなのが、対応していない画面への配慮です。
受託で必須なのは「フォールバック」
広色域の色をそのまま指定すると、対応していない古い画面では色が表示されない、あるいは意図しない見え方になる恐れがあります。受託では、ここを外すと「一部の利用者だけ色が崩れる」事故になります。そこで、まず sRGB の色を書き、対応している画面だけ広色域で上書きするという二段構えが定石です。
.brand {
color: #00C853; /* どの画面でも出る、sRGBの近い色 */
}
@supports (color: color(display-p3 0 0 0)) {
.brand {
color: color(display-p3 0 0.8 0.35); /* 対応画面ではより鮮やかに */
}
}@supports は「この CSS が使えるか」をブラウザに尋ねる仕組みで、対応している画面でだけ広色域の指定が効きます。対応していなければ、上の sRGB 色がそのまま使われる。これで「対応画面では鮮やか、非対応では穏当な近似色」という、どの利用者も破綻しない形になります。新しい CSS 機能を「対応状況を見て、段差なく足す」進め方は、モダンCSSネイティブ機能の記事で扱った Baseline ベースの判断とまったく同じ考え方です。
受託で組み込むときの落とし穴
弊社が制作を引き継いだあるコスメブランドのサイト（社名は伏せます）では、商品の鮮やかなパッケージ写真の隣に置くブランドカラーの帯が、「写真より色が地味で浮いて見える」という長年の不満がありました。前の制作会社は、その都度 16 進数の色を少しずつ調整していましたが、sRGB の器の中で動かしている以上、写真の鮮やかさには追いつけずにいました。
私たちは、ブランドカラーを oklch() ベースで定義し直し、@supports で対応画面にだけ Display P3 の鮮やかな値を当てる形に変えました。非対応画面には、これまでどおりの sRGB 近似色がそのまま出ます。結果、対応画面では帯の色が写真の鮮やかさに並び、「地味で浮く」という不満が解消しました。やったのは、色を「sRGB の器」から出して、画面が本来出せる範囲まで要求しただけです。
この案件で一番効いたのは、色を一か所のデザイントークンに集約しておくことでした。色を oklch() の変数として一元管理しておけば、sRGB フォールバックと P3 の値をペアで持て、ブランド色の微調整も一か所で済みます。色違いの装飾を CSS の宣言に寄せておく利点は、CSS corner-shape でブランド表現を作る記事でも触れたとおりで、形だけでなく「色」も仕組みで持つと、保守が一気に楽になります。なお、広色域はあくまで「鮮やかさの上乗せ」であり、本文の可読性に関わる色のコントラストは別途確保する必要があります。鮮やかさとアクセシビリティは両立させて初めて意味を持ちます。
どこから着手するか
ブランド色が画面でくすむのを「画面のせい」で諦めるのをやめ、「色域という器の大きさ」を意識するところから、サイトの色は本来の鮮やかさを取り戻します。color(display-p3 ...) や oklch() で広い色を要求し、@supports と sRGB フォールバックで非対応画面も守る——この二段構えなら、リスクなく鮮やかさを足せます。
最初の一歩としては、サイトの中で「ブランドの鮮やかさが一番出したい色」を一つ選び、sRGB 色をベースに、対応画面だけ Display P3 で上書きしてみることをお勧めします。対応画面と非対応画面の両方で破綻しないことを確認できれば、本番に出せます。
ブランドガイドの鮮やかな色が Web だと沈む、写真とブランドカラーの鮮やかさが揃わない、色をデザイントークンとして安全に管理したい——そうしたお悩みがあれば、グリームハブのお問い合わせからご相談ください。現行サイトの色設計を拝見し、フォールバックを保ったまま広色域でブランド色を引き立てられる部分を切り分け、保守しやすい形に整えます。
