本頁面由 Cloud Translation API 翻譯而成。

享受更多顏色和全新空間

本文件是高畫質 CSS 顏色指南的一部分。

CSS 顏色 4 列舉出我們會介紹 CSS 和顏色的功能與工具以下 Codepen 會顯示所有和舊顏色語法之間的關係：

請參閱經典色域的重點回顧。

第 4 級規格導入 12 用來查詢顏色的新色彩空間 (從先前分享的 7 個新色域組成)：

sRGB 線性
LCH
okLCH
LAB
okLAB
多媒體廣告 p3
Rec2020
a98 RGB
ProPhoto RGB
XYZ
XYZ d50
XYZ d65

認識全新的網頁色域

下列色域可使用比 sRGB 更大的色域。 display-p3 色彩空間提供的色彩幾乎是 RGB 的兩倍，而 Rec2020 提供的流量幾乎是 display-p3 的兩倍。好多顏色！

五個不同顏色堆疊的三角形，方便您繪製
每個新色域的關係和大小

`color()` 函式

瀏覽器支援

資料來源

而 color()敬上函式可用於任何以 R、G 和 B 指定顏色的色彩空間頻道。color() 會先接受色域參數，然後是一系列 RGB 和選用的 Alpha 值。

您會發現許多新的色彩空間都使用這個函式 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);
}

注意：顏色可以為 sRGB Gamut、Display P3 Gamut 或 Rec2020 Gamut；最高 77.6% 的可見光譜。

透過 color() 使用 sRGB

sRGB 三角形是唯一不透明的單一三角形，有助於視覺化星系大小。

這個顏色空間提供的功能與 rgb() 相同。還提供介於 0 到 1 之間的小數，就像使用 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}

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 黑色到白色的來說明兩者的差異：

兩列顯示兩個水平漸層，方便您比較。sRGB 梯度的平滑，我們多年來已見證到這點。不過，sRGB 線性漸層在前 5% 時非常昏暗，在最後 10% 時非常亮，因此中間相當淺灰色。

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);
}

LAB

瀏覽器支援

資料來源

另一個能存取 CIE 星域的色彩空間，線性亮度 (L) 維度。LAB 中的 A 和 B 代表人色視覺：紅-綠和藍黃當 A 給予正值時會加上紅色，並在低於 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 代表色調

如果您曾使用過 HSL 或 LCH。為 H 的色彩轉盤選擇角度、選擇亮度或調整 L 的亮度，但這樣我們使用色度而非飽和度。它們大致相同，但光度和色度的調整往往其實是兩種顏色的表層在目標差距之外

優點

搭配藍色和紫色調，不會出乎意料。
全線性亮度。
使用熟悉的頻道。
高動態範圍。
有一款現代顏色挑選器 - 由 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);
}

奧克拉荷馬州

瀏覽器支援

資料來源

這個空間會更正至 LAB。同時被宣稱為提升影像處理品質的最佳化空間，也就是梯度和色彩函式操控品質

優點

動畫和內插的預設空間。
全線性亮度。
沒有類似 LAB 的色調轉換。
顯性一致的梯度。

缺點

較新的未深入探索。
顏色挑選器太少，

.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 三角形只是唯一不透明
以視覺方式呈現星系的大小看起來是離最小的 2。

注意：顏色位於 Display P3 Gamut；45.5% 的可見光譜。

自 Apple 支援 Pixel 以來，螢幕 P3 的色域和色域越來越受歡迎自 2015 年開始支援 iMacApple 自 2016 年起開始透過 CSS 在網頁中支援 display-p3，五大幅領先其他瀏覽器如果是 sRGB，這個色彩開始調整樣式，將樣式移至較高的動態範圍

優點

支援度高，可做為 HDR 螢幕的基準。
比 sRGB 的色彩高出 50%。
開發人員工具會提供優質的顏色挑選器。

缺點

最終會超過 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 三角形是唯一不透明的單一三角形，
以視覺方式呈現星系的大小似乎是距離最大的 2。

注意：顏色位於 Rec2020 Gamut；77.6% 的可見光譜。

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}

瀏覽器支援

資料來源

A98 三角形是唯一不透明的
以視覺方式呈現星系的大小看起來像是中間大小的三角形。

注意：顏色位於 RGB 98 Gamut；52.1% 的可見光譜範圍。

Adobe 1998 RGB 的簡稱 A98 RGB 是由 Adobe 製作，其中大部分的也能從 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

瀏覽器支援

資料來源

ProPhoto 三角形是唯一不透明的，用來
以視覺方式呈現星系的大小看起來最大。

由 Kodak 開發的寬廣空間，獨特的主要提供超廣域的主食色彩和功能，盡量減少色調變換變更亮度時宣稱 100% 的內容現實世界的表面顏色如同 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

瀏覽器支援

資料來源

注意：顏色位於 HVS Gamut；100% 的人類可見光譜 (HVS)。

CIE XYZ 色彩空間涵蓋了人看得見的所有顏色眼睛。這就是為何將其做為其他顏色的標準參考聊天室。Y 是亮度，X 和 Z 則為指定 Y 內的色域亮度

d50 和 d65 之間的差異為白點，d50 會使用 d50 白色點和 d65 使用 d65 白點。

關鍵字詞：白色點是色域的屬性，空格裡面電子螢幕的 D65 是共同白點，長度為 6500 克耳文顏色很重要轉換，讓白色點符合如此色溫 (暖色調或冷氣) 不受影響

優點

「線性燈」存取便利用途。
很適合用來混色。

缺點

不像 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 顏色 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。.lch 漸層是 Lch 色彩空間的漸層色。

16 位元色彩可減少頻帶

在使用此色彩之前，所有顏色都儲存在一個 32 位元整數中，代表上述四個管道紅色、綠色、藍色和 Alpha 值每秒 8 位元管道和 2^ 24 種可能的顏色 (忽略 Alpha)。2 ^ 24 = 16,777,216、「數百萬色。」

完成色彩後，四個 16 位元浮點值，每個管道都會模型本身不會相互融合這是總資料量的 64 位元所以產生的顏色有上百萬款

如要支援 HD 高畫質色彩，這項測試的必要條件。這會增加色彩數量這種做法的副作用讓瀏覽器在漸層中也能使用更多色彩

漸層色帶是指色彩不足而無法產生平滑漸層的情況和「條紋」就會變得清晰可見有了。

畫面中顯示六個面板，每個面板都有不同程度的漸層色帶
還有一些關於壓縮和位元深度的資訊 — 圖片來源

控制內插類型

兩點之間的最短距離一律為直線。有顏色根據預設，瀏覽器會採用短路徑。請參考以下情境在 HSL 顏色圓柱體中有兩個點梯度會取得透過沿著兩個點之間的線條移動，藉此進行色彩步驟。

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

圓形漸層，內含一條由綠色到紅色的直線
穿過圓圈並穿過白色區域 — (模擬示範)
HSL 圓柱體由上往下拍攝，色彩停止點之間有一條線

上面的漸層線在綠色與紅色之間直線之間直線上色彩、穿過色彩空間的中心。雖然上述做法很實用有助於初學者快速理解內容，但實際情況並非如此接著來介紹在下列程式碼中載入漸層，而且中間不像白色一樣明顯，例如：模擬畫面

不過，漸層的中間區域失去鮮明的色彩。這是因為最鮮豔的色彩位於色域的邊緣，而不是中插值。這通常稱為「無效區域」。有有幾個方法可以修正或解決這個問題

指定更多漸層停止點，來避開死區

要避免今天的死區域是現在的一種技巧，就是在刻意引導內插值維持在色彩鮮明的色域顧名思義，多個停靠站有助於繞過死路。

使用 Erik Kennedy 建立的漸層工具，可計算其他顏色避免在常會流入的色彩空間中避開死路相對地使用時，傳遞第一個範例中的相同顏色但將色彩內插類型變更為 HSL 會產生：

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

圓形漸層的中間圍繞著一條線，且有許多
沿著路線的漸層停靠，引導著它遠離中央。 — (模擬示範)
HSL 圓柱體由上往下拍攝，弧形線條延伸至 9 個色彩站

使用引導式停靠點不再是直線看起來會沿著死區域環繞，有助於維持飽和更鮮豔的漸層效果

雖然這項工具能發揮出色成效，但如果成效類似或可以直接透過 CSS 進行控制？

指定顏色內插的方向

第 4 色：控制「色調內插」策略的功能是新增的，這是 (:wink:) 死區域的一個新方式。思考某個色調試著用 2 個停格漸層，變化角度會變換角度舉例來說，從 140deg 切換至 240deg。

中間色調的內插值比較短與長

根據預設，漸層會 shorter路線，除非您所指定的值 longer 條路線。色調內插選項會引導角度旋轉，例如告訴某人轉動而不是右手（他，祖蘭人）：

與先前相同的漸層圓圈圖像
內部圓圈，顯示長路與短路。

以色調內插距離為例，短路徑因此會模擬長路徑短距離讓虛擬距離較短，因為移動路程距離最短包括長距離穿越更多色調。

增加與減少色調內插

顏色 4 還另外提供兩種色調內插策略，但僅適用於圓柱體色彩空間。沿用先前範例中的兩種顏色現在來看看增加與減少的運作方式

上述 Codepen 使用 ColorJS 來示範預期的結果。會編寫的 CSS 供應商即使沒有 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 個色彩停止點，您會看到色調內插選項的效果以及色域如何變化漸層結果可能會大幅影響 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));
}

上方的示範結果雖然不太穩定，但表現更加一致以及實驗室的內插類型研究室語法不簡單易懂從 rgb 或 hsl 匯入時非常不熟悉的負數不錯可以使用 hwb 編寫常見的語法完全插入在其他色域 (如 oklab) 中。

.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 大型語言引擎現在顏色已在其空間中遭到限制。

選擇色域

許多人在瞭解這些色域及其效果後不堪負荷，但想知道哪個「一個」。根據我的研究和體驗時，所有工作都沒有單一色彩空間。每項能確實產生所需結果

如果有最棒的空間，那我們就不會太多新的聊天室

不過，我可以說 CIE 空間 (lab、oklab、lch 和 oklch) 是我的。如果結果不是我要的測試其他聊天室。在混合色彩及生成漸層時，我同意 oklab 的預設規格選項。我喜歡顏色系統和整體 UI 顏色 oklch。

以下提供幾篇文章供人分享最新配色策略性能。例如，Andrey Sitnik 已全面進入 oklch，或許他們會說服你這麼做：

CSS 的 OKLCH 公司改用 RGB 和 HSL 的原因 Andrey Sitnik
顏色格式作者：Josh W.Comeau
OKLCH，演出者： Chris Coyier

後續步驟

現在您已熟悉新的色域和工具，轉換成 HD 高畫質色彩。

更振動、一致的操控和內插類型，整體上的整體表現提供更繽紛多彩的使用者體驗

查看更多顏色資源

享受更多顏色和全新空間

認識全新的網頁色域

color() 函式

透過 color() 使用 sRGB

透過 color() 的線性 sRGB {#Linear-srgb}

LCH

LAB

OKLCH

奧克拉荷馬州

多媒體廣告 P3

Rec2020

A98 RGB {#a98-rgb}

ProPhoto RGB

XYZ、XYZ-d50、XYZ-d65

自訂色域

色彩內插

色彩內插的新功能

16 位元色彩可減少頻帶

控制內插類型

指定更多漸層停止點，來避開死區

指定顏色內插的方向

中間色調的內插值比較短與長

增加與減少色調內插

不同顏色空間的漸層

雜質取值範圍限制

選擇色域

後續步驟

`color()` 函式