高精細 CSS カラーガイド

CSS Color 4 では、より多くの色、操作機能、優れたグラデーションなど、広色域の色ツールと機能をウェブに導入します。

Adam Argyle

25 年以上、sRGB（標準の赤、緑、青）は、rgb()、hsl()、16 進数などの色空間が含まれる、CSS グラデーションと色の唯一の色範囲でした。これはディスプレイ間で最も一般的な色域機能で、共通点です。データ内の色を指定する方法が増えています。

ディスプレイの色域が広がると、CSS では広い範囲の中から色を指定できる方法が必要になります。現在の色形式には、広い色域を記述する言語がありません。

CSS が更新されなければ、90 年代の色域に永遠にとどまり、画像や動画で使用されている広色域に対応できなくなります。トラップ: 人間の目で識別できる色の 30% のみを表示します。Lea Verou と Chris Liley が主に作成した CSS Color Level 4 のおかげで、この問題を解決できました。

Chrome は、CSS Color 4 の色域と色空間をサポートしています。CSS でHD（高画質）ディスプレイをサポートできるようになりました。HD 色域の色を指定するとともに、特殊化された色スペースも提供できます。

このガイドは 3 部構成になっています。色がどこにあったかを確認するには、以下をご覧ください。また、今後の色の導入と、HD カラーへの移行による今後の色の管理方法をお読みください。

概要

サポートされているブラウザでは、選択できる色が 50% 増えます。1, 600 万色は多いと思われた方は、これらの新しい空間で表示できる色の数をご確認ください。また、ビット深度が足りないためバンディングしていたグラデーションもすべて解決されています。

新しい色空間は、より多くの色、つまりディスプレイが対応できる最も鮮やかな色に加えて、カラーシステムを管理および作成するための独自のツールとメソッドを提供します。たとえば、これまでは HSL とその「明るさ」チャネルがあり、ウェブ デベロッパーにとって最適でした。CSS では、LCH の「知覚的な明るさ」が導入されました。

さらに、グラデーションと混色がアップグレードされました。色空間のサポート、色相補間オプション、バンディングの軽減が追加されました。

次の画像は、ミキシングのアップグレードの一部を示しています。

色とウェブの問題は、CSS が高解像度に対応していないのに対し、ほとんどの人がポケットやラップに入れている、または壁に取り付けられているディスプレイは広色域、高解像度の色に対応していることです。ディスプレイの色の表現能力は CSS よりも急速に進化してきました。CSS もようやく追いつきました。

単に「色が増えた」だけではありません。このドキュメントの最後まで読めば、より多くの色を指定し、グラデーションを強化し、タスクごとに最適な色空間と色域を選択できるようになります。

色域とは

色域はもののサイズを表します。「数百万色」というフレーズは、ディスプレイの色域、つまり選択できる色の範囲に関するコメントです。次の画像では、3 つの色域を比較しています。サイズが大きいほど、提供される色が多くなります。

色域には名前を指定することもできます。たとえば、バスケットボール対野球、ベント コーヒーカップ対グランデのように、サイズの名前がコミュニケーションに役立ちます。これらの色域名を知ることで、色域を伝え、色の範囲をすばやく把握できます。

この記事では、以前の色域について説明します。7 つの新しい色域については、より多くの色と新しい空間にアクセスするをご覧ください。

人間の視覚の色域

色域は、人間の目に見える色の範囲である人間の視覚範囲と比較されることがよくあります。HVS は、次のような色度図で表されることがよくあります。

最も外側の形状は人間が認識できる範囲で、内側の三角形は rgb() 関数の範囲（sRGB 色空間）です。

上記の三角形は、色域サイズを比較したものです。下にも三角形があります。これは、業界で色域について説明したり、色域を比較したりする方法です。

色空間とは

色空間は色域の配置であり、色にアクセスする形状と方法を確立します。多くは、立方体や円柱などのシンプルな 3D 形状です。このカラー配置により、隣り合う色と、色のアクセスと補間の仕組みが決まります。

RGB は長方形の色空間のようなもので、3 軸上の座標を指定することで色にアクセスできます。HSL は円筒形の色空間で、色相角度と 2 つの軸の座標で色にアクセスします。

レベル 4 の仕様では、色を検索するための 12 の新しいカラースペースが導入されています。これらは、以前から利用可能な 4 つのカラースペースに加えて追加されたものです。

• Hex
• RGB
• HSL
• HWB

色域と色空間の概要

色空間は色のマッピングであり、色域は色の範囲です。色域は粒子の合計であり、色空間はその範囲の粒子を保持するために作られたボトルであると考えてください。

以下は、Alexey Ardov による、カラースペースを示すインタラクティブなビジュアルです。このデモでは、指で画面をタップ、ドラッグ、ズームできます。色空間を変更して、他の空間の可視化を表示します。

• 色域を使用して、色の範囲（低域または狭い色域と高域または広い色域など）について説明します。
• カラースペースを使用して、色の配置、色の指定に使用される構文、色の操作、色による補間について説明します。

従来のカラースペースの概要 {#classic-color-spaces}

CSS Color 4 では、CSS と色に関する新しい機能とツールが多数概説されています。まず、これらの新機能が登場する前のカラーについて説明します。

2000 年代以降、色を値として受け取る CSS プロパティでは、16 進数（16 進数）、rgb()、rgba()、名前（hotpink など）、currentColor などのキーワードで指定できるようになりました。

2010 年頃、ブラウザによっては、CSS で hsl() 色を使用できました。2017 年には、アルファ付きの 16 進数が登場しました。最後に、hwb() は最近になってブラウザでサポートされるようになりました。

これらのクラシックな色空間はすべて、同じ色域 sRGB 内の色を参照します。

HEX

16 進数カラースペースでは、R、G、B、A を 16 進数で指定します。次のコードサンプルは、この構文で赤、緑、青に加えて不透明度を指定するすべての方法を示しています。

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

RGB 色空間では、赤、緑、青の各チャンネルに直接アクセスできます。0 ～ 255 の値または 0 ～ 100 の割合で指定できます。この構文は、一部の構文の正規化が仕様に入る前に存在していたため、カンマありとカンマなしの構文が混在しています。これで、カンマは不要になりました。

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / .5);

  --empty-channels: rgb(none none none);
}

HSL

HSL（色相彩度と明度）は、人間の言語とコミュニケーションに適応する最初の色空間の一つであり、sRGB 色域のすべての色を提供しますが、赤、緑、青の相互作用を脳が認識する必要はありません。RGB と同様に、元の構文にはカンマが含まれていましたが、今後はカンマは不要になります。

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

人間が色を記述する方法に基づく sRGB 色域の色空間として、HWB（色相、白さ、黒さ）があります。作成者は色相を選択し、白または黒を混ぜて目的の色を見つけることができます。

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

次のステップ

新しいカラースペース、構文、ツールについて確認し、HD カラーに移行する方法を学びましょう。

ウェブでの sRGB 以外の色空間はまだ初期段階ですが、今後、デザイナーやデベロッパーによる使用が拡大していくでしょう。たとえば、デザインシステムを構築するカラースペースを知ることは、クリエイターのツールベルトに備えておくべき強力なツールです。各カラースペースには独自の機能があり、CSS 仕様に追加された理由があります。最初は少数から始めて、必要に応じて追加してもかまいません。

リソース

色レベル 5 に関する記事の詳細

• CSS の相対色の構文
• CSS color-mix

以下に、ウェブ上で公開されているその他の情報もご紹介します。

• W3C の CSS Color Module Level 4

• W3C の CSS Color Module Level 5

• CSS の LCH 色: 概要、理由、方法

• Lab よりも優れている点は色域の縮小: CIE Lab と OKLab

• ウェブでのより豊かな色彩に向けて

• Okhsv と Okhsl: 色選択用の 2 つの新しいカラー空間

• Chromium でより豊かな色を実現する（PDF）

• LCH が最適な色空間です。

• ユーザー補助に優れたカラーシステムの設計

• 色空間（Hannah Weller 著）

• Display-P3 を使用した CSS の広色域カラー

• CIE 1931 色空間

• CSS の色形式

• Color Spaces by Bartosz Ciechanowski

ツール:

• afc163.github.io/color3d/
• 色域の可視化
• 鮮やかなグラデーション ジェネレータ