さらに多くの色と新しい空間を利用

このドキュメントは高解像度 CSS カラーガイドの一部です。

CSS Color 4 では、 さまざまな機能とツールを紹介します以下の Codepen は、 古い色の構文を一緒に使用することはできません。

従来の色空間のまとめをご覧ください。

レベル 4 の仕様では、12 以前に共有した 7 つの新しい色域から、色を検索するための新しい色空間:

• sRGB 線形
• LCH
• okLCH
• LAB
• okLAB
• ディスプレイ P3
• Rec2020
• A98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

ウェブの新しい色空間のご紹介

次の色空間は sRGB よりも広い色域に対応しています。「 display-p3 の色空間は RGB のほぼ 2 倍の色数ですが、Rec2020 では display-p3 のほぼ 2 倍の数になります。たくさんの色があります。

color() 関数

新しい color() 関数は、R、G、B で色を指定するあらゆる色空間に使用できます。 です。color() は、最初に色空間パラメータを受け取り、次に一連の RGB のチャンネル値と任意でアルファを指定します

新しい色空間の多くでは、この関数が使用されています。 rgb、srgb、hsl、hwb などの特殊な関数は、 色空間をパラメータにすると便利です。

メリット

• RGB チャンネルを使用する色空間にアクセスするための正規化された空間。
• 広色域 RGB ベースの色空間までスケールアップできます。

短所

• HSL、HWB、LCH、okLCH、okLAB には対応していません

で確認できます。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

color() による sRGB

この色空間は rgb() と同じ機能を提供します。さらに 0% から 100% のように使用できます。

メリット

• ほぼすべてのディスプレイで、この色空間の範囲がサポートされています。
• デザインツールのサポート。

短所

• 知覚的には線形ではない（lch() のように）
• 広色域は使用できません。
• 多くの場合、勾配はデッドゾーンを通過します。

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

color() による線形 sRGB {#linear-srgb}

RGB に代わるこの線形変換によって、チャネル輝度が予測しやすくなります。

メリット

• RGB チャンネルへの直接アクセス。ゲームエンジンやライトショーなどに便利です。

短所

• 知覚的には直線的ではない。
• 端は黒と白で塗りつぶされています。

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

勾配については、後で詳しく説明します。 簡単に言うと、srgb と linear-srgb が黒から白に変わっていることが 違いをわかりやすく説明します。

LCH

LCH では、RGB 色域外の色にアクセスするための構文が導入されています。また、 色域外の画像や音声の 指定します。これは、CIE 空間カラーが （lch、oklch、lab、oklab）は、 人間の可視のカラースペクトルです。

この色空間は人間の視覚をモデルにして、 構文を使用して色などを指定できます。LCH チャネルは明度です 調整しますHSL や HWB のように、色相が角度であること。明度は 0 ～ 100 の範囲で指定する必要があります。これは特殊な「知覚線形」で人間中心 調整できます。クロマは彩度に似ています。値の範囲は 0 ～ 230 ですが、 技術的に制限はありません

メリット

• ほとんどの場合、知覚的に線形型であるため、予測可能な色操作（oklch を参照）。
• おなじみのチャンネルを使用する。
• 多くの場合、鮮やかなグラデーションが使用されます。

短所

• 色域外でも簡単に撮影できます。
• まれに、色相シフトを防ぐために、グラデーションの中央点の調整が必要になることがあります。

で確認できます。

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

ラボ

CIE 色域を利用するために作られたもう 1 つの色空間は、 線形明度（L）次元。ラボの A と B は、ラボの固有の軸を表します。 人間の色覚（赤 - 緑、青 - 黄）があります。A に正の値を指定した場合 0 未満なら赤、0 未満なら緑を追加します。B に正の数を与えたとき 黄色が追加され、負の値が青に向かっています。

メリット

• 知覚的に一貫性のある勾配。
• ハイ ダイナミック レンジ。

短所

• 色相が変わる可能性があります。
• 値を読み取る際に、手作業で記述したり色を推測したりするのが難しい。

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

この色空間は、色空間を補正し、 LCH。LCH と同様に、（L）は知覚的に線形な明度を表現し続けます。C 色相は H です

これまでに Google Cloud で HSL または LCH。H の色相環の角度と、明度または 調整する必要がありますが、彩度ではなくクロマを使用します。 明度と彩度を調整する点を除き、 ペアで用意するか 高彩度カラーを 撮影できません

メリット

• 青と紫の色を使用しても問題ありません。
• 知覚的に線形な明るさ。
• おなじみのチャンネルを使用する。
• ハイ ダイナミック レンジ。
• Evil Martians のモダンなカラー選択ツールを搭載。

短所

• 色域外でも簡単に撮影できます。
• 新しく、あまり利用されていません。
• カラー選択ツールが少ない。

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKLab

このスペースは LAB の修正用です。 画像処理品質に最適化されたスペースとして 主張しています CSS における us とは、グラデーションや色関数の操作品質のことです。

メリット

• アニメーションと補間用のデフォルトのスペース。
• 知覚的に線形な明るさ。
• ラボのような色相シフトはありません。
• 知覚的に一貫性のある勾配。

短所

• 新しく、あまり利用されていません。
• カラー選択ツールが少ない。

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

ディスプレイ P3

ディスプレイの P3 の色域と色空間は、Apple がサポートして以来、広く利用されています。 2015 年から iMac で発売されていますApple は 2016 年以降、CSS を介してウェブページで display-p3 もサポートしており、5 つ 他のブラウザより先進的ですsRGB の場合は、この色が適している 広いダイナミック レンジにスタイルを移動します。

メリット

• 優れたサポート。HDR ディスプレイのベースラインと見なされます。
• sRGB より 50% 大きい色。
• DevTools には優れたカラー選択ツールがあります。

短所

• 最終的には Rec2020 と CIE のスペースを上回ります。

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020 は UHDTV（超高画質テレビ）への移行の一環であり、 4K と 8K のメディアで使える豊富な色が用意されています。Rec2020 は RGB ベースの色域、display-p3 よりも大きいが、それほど一般的ではない ディスプレイ P3 に分類されます。

メリット

• Ultra HD カラー。

短所

• （現時点では）消費者の間では一般的ではありません。
• ハンドヘルドやタブレットではあまり使用されていません。

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB {#a98-rgb}

Adobe 1998 RGB の略で、A98 RGB は、 CMYK プリンタで実現できる色です。sRGB よりも多くの色を使用できる 基づいています。

メリット

• sRGB や Display P3 の色空間よりも大きい。

短所

• デジタル デザイナーが作業するスペースではありません。
• CMYK からパレットを移行する人はあまりいません。

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhoto RGB

Kodak が開発した広色域の空間では、他に類を見ない超広帯域の天体写真 色や色相変化が最小限に抑えられている 調整できます。また 2022 年から現在までの 現実世界の表面色 1980 年に Michael Pointer が 発表した手法です

メリット

• 明度を変更すると最小限の色相が変化します。
• 鮮やかなメインカラー。

短所

• 提供される色の約 13% が 架空の 人間の目に見える範囲に含まれていません

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ、XYZ-d50、XYZ-d65

CIE XYZ 色空間には、 平均的な視力です。そのため、他の色の標準の参照として使用されています。 できます。Y は輝度、X と Z は特定の Y の範囲内の色数 輝度を指定します。

d50 と d65 の差はホワイト ポイントで、d50 は d50 を使用します。 d65 では d65 ホワイト ポイントを使用します。

重要な用語: ホワイト ポイントは色空間の属性であり、 真白が存在することを表します。電子画面の場合、D65 が最も 6, 500 ケルビンの略です。重要なのは色で 白色点が一致するように変換し、色温度（暖かさ、寒さ）を 影響を受けることはありません。

メリット

• 線形光アクセスには便利なユースケースがあります。
• 物理的な色のミックスに最適です。

短所

• lch、oklch、lab、oklab のように知覚的には直線的ではありません。

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

カスタム色空間

CSS の Color 5 仕様にも ブラウザにカスタム色空間を学習させるためのパスです。 これは、ブラウザに対してリクエスト方法を指示する ICC プロファイルです。 調整します。

@color-profile --foo {
  src: url(path/to/custom.icc);
}

読み込まれたら、color() 関数でこのカスタム プロファイルから色にアクセスします。 そのチャネルの値を指定します。

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

色の補間

ある色から別の色への遷移は、アニメーション、グラデーション、 混同です。通常、この遷移は開始色と 終了色。ブラウザは色間の補間を行います。 この場合の補間とは、中間の色の系列を生成して、 スムーズに移行できます

グラデーションでは、シェイプに沿った一連の色の補間が行われます。あり 経時的に一連の色が変化します

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

グラデーションを使用すると、中間の色がすべて一度に表示されます。

色補間の新機能

新しい色域と色空間の追加により、 追加のオプションが用意されていますin hsl の色を青から白に移行しています sRGB とは大きく異なる結果になります

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

次に、あるスペースの色から、あるスペースの色に まったく異なるスペースです。

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

幸いなことに、カラー 4 仕様には、ブラウザがこれらのクロスサイト クロスを扱う方法を 色空間補間が行われます。.gradient の場合、ブラウザは デフォルトの色空間 oklab を使用します。

ブラウザでは lch を色空間として使用すると思われるかもしれません。これは lch が 実際はそうではありません。そのため、2 つ目の比較勾配を .lch。.lch グラデーションは、lch 色空間からのグラデーションです。

16 ビットカラーによる縞模様の発生が減少

この色を適用する前は、すべての色は 1 つの 32 ビット整数で保存されていました。 4 つのチャネルすべてを表します赤、緑、青、アルファがありますこれは 8 ビット/ チャンネルと 2^ 24 の色（アルファなし）。2 ^ 24 = 16,777,216、 「何百万色」と表現します。

この色が調整された後、4 つの 16 ビット浮動小数点値が各チャネルに ひとまとまりにせず 浮き彫りにしますデータの合計は 64 ビットです その結果、数百万色以上の色が再現されています。

この作業は HD カラーをサポートするために必要です。色の量が増加します 保存できます。これは良い副作用です。 グラデーションで使用するブラウザの色を増やします

グラデーションの縞模様は、なめらかなグラデーションを作るのに十分な色がないことをいいます。 「ストリップ」表示されます。パターン化によって縞模様が 高解像度の色にアップグレードしてください

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

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

補間を制御する

2 点間の最短距離は、常に直線です。色付き ブラウザはデフォルトで短いルートを採用します。シナリオを検討する HSL カラーシリンダー内に 2 つのポイントがあります。勾配は 2 点間の線に沿って移動することでステップを色分けします。

linear-gradient(to right, #94e99c, #e06242)

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

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

上のグラデーション線は、緑がかった色と赤がかった色の間を直線で区切っています。 色空間の中心を通過します。上記は良いですが、 実際に起こることではありません。こちらの グラデーションで、中央は明らかに白ではなく 示しています

でも、グラデーションの中央の領域は鮮やかではなくなったな。その理由は、 最も鮮やかな色は、色空間シェイプの端にあり、 中心点を示しますこれは一般に 「デッドゾーン」です。そこで、 いくつかご紹介します

デッドゾーンを回避するためにグラデーションの停止をこれ以上指定する

今日のデッドゾーンを回避するための手法は、 意図して補間を誘導する勾配が 色空間を鮮やかに再現しますこれは文字どおり回避策で 停止ゾーンを追加します。

Erik Kennedy が作成したグラデーション ツールでは、追加色を計算できます。 自動的に停止されるため、検出されがちな色空間でもデッドゾーンを回避できます。 引き付けられるようになります。これを使用して、最初の例と同じ色を渡します。 色の補間を HSL に変更すると、次のようになります。

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

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

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

ガイド付きの停止ポイントを使用すると、補間は直線ではなくなりますが、 飽和状態を維持するのに役立ち、 もっと鮮やかなグラデーションにします。

このツールは優れた機能を発揮しますが、これと同等またはそれ以上の CSS から直接制御する方法はあるでしょうか。

色補間の指示

色 4 の色相補間方法を制御する機能 はデッドゾーンを回避するための新しい方法です。色相について検討する 2 段階のグラデーションで、角度を変えるだけの色合いと 140deg から 240deg へのシフトなどがこれに該当します。

より短い色相補間と長い色相補間

グラデーションはデフォルトで shorter は、次の場合を除く それに応じて、 ルートはlongerです。色調 補間オプションで角度の回転を指示します。たとえば、 右ではなく左（へー、ズーランダー）:

色相補間距離の例では、短いパスと 違いを説明するために長いパスがシミュレートされています。近距離では 移動距離が最短であるため、色相が低くなります 長距離の移動距離が長くなっています。

色相補間の増加と減少

カラー 4 には、他にも 2 つの色相補間戦略がありますが、これらは円筒形専用です。 色空間を指定します。ビジュアルは前の例の 2 色のままにして、 増減の仕組みを説明します

上記の Codepen では、ColorJS を使用して、 示します。カスタム ディメンションを使わずに同じ効果を JavaScript ライブラリは次のようになります。

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

色相補間を締めくくるために、ここで 2 つのカラーストップ間で hue が表示され、選択した色相補間による効果が次のように表示されます。 グラデーションの結果が色空間によって どのように変化するか理解できます影響は非常に大きくなる可能性があり、 different;4 つの新しいトリックがカラー ツールバーに加わったと考えてください。

さまざまな色空間のグラデーション

それぞれの色空間は、固有の形状と色の配置から、 異なるグラデーションになります。以下の例で、各色空間がどのように 特に青色から白色の場合は 処理方法が異なりますここにいくつの 中央が紫色になり、これを補間中の色相シフトと呼びます

これらの空間の勾配の中には、他の勾配よりも色鮮やかで、変化が少ないものもあります デッドゾーンを通過します。 labのようなスペースは、彩度が最適になるように色をまとめます。 hwb() のように人間が色を記述するように最適化されたスペースとは対照的です。

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

上のデモは、結果は微妙ですが、より一貫性があります。 補間を行いますラボの構文は簡単には読み取れませんが、 よくわからない負の数を表します。良好 hwb を使用しておなじみの構文を使用できますが、 すべて別の色空間で補間されます

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

この例では hwb で同じ色を使用していますが、 hwb または oklab への補間変換を 行いましたhwb は高画質の画像に適した色空間です デッド ゾーンやブライト スポットが生じる可能性がある（ 。oklab は、維持される知覚線形勾配に最適で、 生成します。この機能はとても楽しく、いろいろな色を試すことができます 最適なグラデーションを見つけることができます。

この Codepen は、グラデーションと色空間を使って、 可能性を探ります。黒人系からの脱却も 色空間ごとに異なるためです。

色域クランプ

色が色域外のものを要求するシナリオがあります。 次のような色を考えてみましょう。

rgb(300 255 255)

rgb 色空間のカラーチャネルの最大値は 255 ですが、ここでは 赤には 300 が指定されています。どうなるでしょうか。色域クランプ。

クランプとは、余分な情報を単純に取り除くことです。「300」は「255」になります カラーエンジンに内部的に反映されていますこれで、色がスペース内に固定されました。

色空間の選択

多くの人々は、これらの色空間とその効果について学んでから、 どれが「1 つ」か知りたいという質問です。選択できます。研究や研究から 1 つの色空間がすべてのタスクに 1 つの色空間として表示されているわけではありません。各 望む結果が得られる瞬間があります。

最適なスペースが 1 つあったら、これほど多くの新しいスペースが 概要です

ただし、CIE のスペース（lab、oklab、lch、oklch）は、 出発点です結果が期待どおりでない場合は、評価します。 テストできます。色のミックスやグラデーションの作成については、 デフォルトの仕様として oklab が選択されています。カラーシステムと UI 全体の色については、 oklch。

新しい色について共有している記事がいくつかあります。 新しい色空間と機能に裏打ちされた戦略です。たとえば、Andrey Sitnik は、 が oklch で全面的に参加しました。きっと彼らが納得してあなたも同じことを行うでしょう。

1. CSS の OKLCH: RGB と HSL から移行した理由 Andrey Sitnik 氏
2. カラー形式 作成者: Josh W.Comeau
3. OKLCH Chris Coyier 氏

次のステップ

新しい色空間とツールに慣れたところで、 HD カラーに移行してください。

より活発で一貫した操作と補間により、 よりカラフルにすることができます

詳しくは、カラーリソースをご覧ください。 をご覧ください。