このページは Cloud Translation API によって翻訳されました。

高精細 CSS カラーガイド

CSS Color 4 は広色域のツールと機能をウェブにもたらします色、操作関数、優れたグラデーションです

Adam Argyle

25 年以上、sRGB （標準の赤緑青）だけが CSS グラデーションと色用の色域（色空間を使用） rgb()、hsl()、hex などのサービス。最も一般的な色であるディスプレイ間の色域対応公分母になります会社の成長により

発生率での最も一般的なカラー形式。 — </ph> <ph type="x-smartling-placeholder"></ph> https://almanac.httparchive.org/en/2022/css#colors

ディスプレイがさまざまな色を表示できるようになるため、CSS にはこのように広い範囲から色を指定できます現在のカラー形式幅広い色域に対応する言語がありません。

CSS が更新されなければ、90 年代の色範囲に留まり、画像や動画で見られる広色域の商品やサービスには対応できませんトラップ済み、表示のみ人間の目が見ることができる色の 30%。 CSS Color Level 4 にご協力いただきありがとうございます。主に Lea Verou と Chris Liley が執筆しています。

Chrome では CSS カラー 4 の色域に対応しています。色空間を指定します。CSS で HD（高画質）がサポートされるようになりました対応しており、HD 色域から色を指定できるほか、学びます。

</ph>

</ph> 広い色と狭い色が交互に切り替わる一連の画像色の鮮やかさとその効果を示します。
実際に試す

をご覧ください。

このガイドは 3 部構成になっています。読み進めて、これまで色が使われていた場所を思い出してください。その後、今後の展開を読み、 HD カラーに移行して、今後の色の管理方法を確認する。

概要

対応ブラウザでは、選択できる色が 50% 増えています。もし 16 何百万色もの色が何百万色あるかがわかるまで表示できるようになります。また、すべての勾配について、縞模様になるのは、これも解決されています

さまざまな色に加え、ディスプレイの最も鮮やかな色と言えるでしょう。新しい色空間は、管理や制作のための独自のツールと手法を提供します。使用されます。たとえば、以前は HSL とその「軽さ」がチャネル、ウェブデベロッパーの中で最も優れていたものを現在は、CSS に LCH の「知覚明度」が設定されています。

2 つのカラーテーブルが横並び。最初の表は
その横には 10 色ほどの虹があり、その横に
調整できます。2 つ目のテーブルは LCH レインボーです
隣のグレースケールの色は一貫しています
これは、LCH では明度の値が正常であるのに対し、HSL では安定しないことを示しています。 — </ph> プレビューする Codepen

さらに、グラデーションとミキシングがアップグレードされ、色空間のサポート、色相補間のオプションバンディングの軽減です

次の図は、混合アップグレードの一部を示しています。

</ph> 上の 2 つのカラーミックスは sRGB、sRGB です。下の 2 つのカラーミックスはディスプレイ p3 にあります。ディスプレイの P3 では、中間はモノクロになりますが sRGB はやや暗く見えますが白黒の結果ではありません。
<ph type="x-smartling-placeholder"></ph> https://codepen.io/web-dot-dev/pen/poZgXQb

色やウェブの問題は CSS が高解像度に対応していないことですディスプレイはポケットやラップに入れているものや壁に取り付けるものが一般的です。広色域、高解像度のカラーに対応していますディスプレイのカラー機能 CSS を上回るペースで成長しましたが、今は CSS が追い付いています。

「より多くの色」が揃っています。これらのドキュメントを読み終える頃には、より多くの色を指定したり、グラデーションを調整したり、最適な色空間と色域が用意されています。

色域とは

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

色域は三角形として並べて比較されます。
sRGB が最も小さく、Rec2020 は最大です。

色域には名前を指定することもできます。バスケットボール対野球や「ベント」コーヒーカップと「グランデ」の違いサイズに名前を付けるとやり取りできます色域の名前を覚えておくと、コミュニケーションがスムーズになり、さまざまな色を認識します。

この記事では、以前の色域について説明します。詳しくは、より多くの色と空間にアクセスするで、7 つの新しい色域を利用できるようになりました。

人間の視覚的色域

色域は多くの場合、人間の視覚的色域と比較されます。全体を人間の目には見えていると考えますHVS は多くの場合、色度図を作成します。

鮮やかなグラデーションで塗りつぶされた馬靴形、中が空洞の三角形。 — </ph> 出典: ウィキペディア

最も外側の形状は人間が見ることができるもので、内側の三角形は rgb() 関数の範囲（別名 sRGB 色空間）。

上の三角形の場合、色域サイズを比較すると、三角形もご覧くださいこれは、色域と色について伝える業界の方法です。比較します。

色空間とは

色空間は色域の配置であり、色空間の形状と方法を確立する色にアクセスします。その多くが、立方体や円柱などの単純な 3D 形状です。この色配置によって、隣り合う色と、その色が色の補間が機能します

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

ハーフカットされた RGB 立方体と HSL シリンダーにスライスが並んで表示され、各空間で色がどのように 1 つの形に詰められているかを示しています。 — </ph> https://en.wikipedia.org/wiki/HSL_and_HSV

レベル 4 の仕様では、12 色を検索するための新しい色空間です。これら 4 つの色は、数が増えました。

色域と色空間の概要

色空間とは色のマッピングであり、色域とは色の範囲を指します。色域は粒子の合計であり、色空間はボトルであると考えるその範囲の粒子を保持するようにしたのです。

Alexey Ardov 氏のインタラクティブなビジュアルをご覧ください。色空間を指定します。このデモでは、カーソルを合わせ、ドラッグ、ズームしてください。色空間を変更する他のスペースを視覚化できます。

色域は、低範囲や狭いなど、色の範囲を示すために使用します。高色域 / 広色域の 3 種類があります。
色空間は、色の配置、色空間を指定するために使用する構文の説明に使用します。色、操作、色補間などです。

で確認できます。 <ph type="x-smartling-placeholder">

多数の色のついたドットで塗りつぶされた立方体。 — </ph> 上の図は RGB 立方体の色空間に収まる粒子の sRGB 色域画像のソース

クラシックな色空間 {#classic-color-spaces} の復習

CSS Color 4 では、さまざまな機能とツールを紹介しますまずは色を使い始めた頃のおさらいです説明します。

2000 年代から、すべての CSS プロパティで以下を使用できるようになっています色を値として受け取る: 16 進数（16 進数）、rgb()、rgba()、「hotpink」のような名前を付けたり、 currentColor。

2010 年頃、ブラウザに応じて、CSS は hsl() 色。2017 年にはアルファ付き 16 進数が表示されます。最後のみ最近、hwb() でサポートしていません。

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

HEX

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

人間の言語と言語志向性を合わせた最初の色空間の一つです。 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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

人間が表現する色に対応する sRGB 色域のもう 1 つは、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 以外の色空間は、まだ黎明期にありますが、デザイナーやデベロッパーからの利用が増え続けていますどの Pod がさまざまな色空間をデザインシステムを構築することは、クリエイターのツールベルトです各色空間には固有の機能と、追加されていて、少量から始めて、追加することもできます。できます。

リソース

色レベル 5 の記事の詳細をご確認ください。

また、以下のその他の参考資料もウェブで探すことができます。

ツール: