CSS Color 4 は、より多くの色、操作機能、優れたグラデーションなど、広色域カラーツールと機能をウェブで実現します。
25 年以上、sRGB（標準の赤、緑、青）は CSS のグラデーションと色における唯一の色色域であり、rgb()、hsl()、16 進数などの色空間サービスがあります。ディスプレイの中で最も一般的な色域機能であり、共通点です。ファイル内で色を指定することに慣れてきました。
ディスプレイでさまざまな色を表示できるようになったため、CSS ではこれらの広い範囲から色を指定する方法が必要になります。現在のカラー形式には、広い色範囲に対応する言語がありません。
CSS が一度も更新されなければ、90 年代の色域に恒久的に留まり、画像や動画で見られる広色域の製品に合わせられなくなります。トラップ。人間の目に見える色の 30% のみを表示します。現実逃避の手助けをしてくれた CSS の色レベル 4 に感謝します。特に Lea Verou と Chris Liley が執筆しています。
Chrome は CSS Color 4 の色域と色空間に対応しています。CSS で HD（高精細）ディスプレイをサポートして HD 色域から色を指定できるようになりました。また、特殊な色空間も提供しています。
使ってみる
このガイドは 3 つのパートで構成されています。これまで、色がどこにあったのか、読み進めていきましょう。その後、色の変化と、HD カラーに移行して今後の色を管理する方法を確認してください。
概要
サポートされているブラウザでは、選択できる色が 50% 多くなっています。1, 600 万色という色合いが魅力的だと思われた方は、ぜひこれらの新しい空間で何色を表示できるか、ご覧ください。また、十分なビット深度がないために帯状になった勾配もすべて解決します。
ディスプレイが実現できる最も鮮やかな色と言えるほど多くの色に加えて、新しい色空間は、色システムを管理および作成するための独自のツールと手法を提供します。たとえば、以前は HSL とその「lightness」チャンネルがありました。これは、ウェブ デベロッパーにとって最高水準でした。現在は CSS に LCH の「知覚明度」があります。
さらに、グラデーションとミキシングがアップグレードされ、色空間のサポート、色相補間オプション、バンディングの低減が実現しました。
次の図は、アップグレードの組み合わせの一部を示しています。
https://codepen.io/web-dot-dev/pen/poZgXQb
色とウェブの問題は、CSS は高解像度に対応しておらず、ほとんどの人がポケットやラップに置いたり、壁に取り付けたりしているディスプレイは、広色域で高解像度のカラーに対応していることです。ディスプレイのカラー機能は CSS よりも急速に成長しており、今では CSS が対応しています。
「より多くの色」以外にも、さまざまな機能を利用できます。これらのドキュメントを終えると、より多くの色の指定、グラデーションの補正、各タスクに最適な色空間と色域の選択ができるようになります。
色域とは
色域は、対象のサイズを表します。「数百万色」というフレーズは、ディスプレイの色域または選択する必要がある色の範囲に関するコメントです。次の図では、3 つの色域が比較されています。サイズが大きいほど、表示される色が増えます。
色域には名前を付けることもできます。たとえば、バスケットボール、野球、ベンテのコーヒーカップ、グランデなどです。サイズに名前を付けると、コミュニケーションしやすくなります。これらの色域名を学習すると、色の範囲についてコミュニケーションを取り、すばやく理解するのに役立ちます。
この記事では、以前の色域について説明します。7 つの新しい色域については、より多くの色と新しいスペースにアクセスするをご覧ください。
人間の視覚色域
色域は多くの場合、人間の目で見ることができると Google が考える色全体と比較されます。HVS は多くの場合、次のように色度図で表現されます。
最も外側のシェイプは人間が見ることができる形状で、内側の三角形は rgb() 関数範囲（sRGB 色空間）です。
上の三角形は色域サイズを比較しているため、下の三角形が表示されています。これは、色域についての伝達および比較のための業界における方法です。
色空間とは
色空間は色域の配置で、色にアクセスする形状と方法を確立します。多くのものは、立方体や円柱のような単純な 3D 形状です。この色の配置により、隣接する色と、色のアクセスと補間の仕組みが決まります。
RGB は長方形の色空間に似ています。色にアクセスするには、3 軸上の座標を指定します。HSL は円柱色空間であり、色は 2 軸上の色相角と座標によってアクセスされます。
レベル 4 の仕様では、色を検索するための 12 個の新しい色空間が導入されています。以前に利用できた 4 つの色空間に加えて、以下の色空間を使用できます。
色域と色空間の概要
色空間は、色域が色の範囲である色のマッピングです。色域は粒子の合計であり、色空間はその粒子範囲を保持するために作られたボトルです。
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% / 50%);
--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
人間が色を記述するに向けたもう 1 つの 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 に関する記事をご覧ください。
また、ウェブ全体でその他の参考資料をご覧いただけます。
- W3C の CSS Color Module Level 4
W3C の CSS Color Module Level 5
ツール: