使用顏色挑選器檢查 HD 高畫質和非 HD 高畫質色彩，並進行偵錯

Jecelyn Yeen

Sofia Emelianova

顏色挑選器提供 GUI，可用於變更 color 和 *-color 宣告，並讓您一鍵建立、轉換及偵錯非 HD 和 HD 顏色。

重點：這部影片展示的 Chrome 開發人員工具版本為 112 以下。在後續版本中，「Styles」窗格支援 CSS Color Level 4 規格中的 12 個新色彩空間和 7 個新色域，以及 CSS Color Level 5 中的 color-mix() 函式。

如要深入瞭解新的色彩空間，請參閱「高畫質 CSS 色彩指南」。

開啟顏色挑選器並變更顏色

使用顏色挑選器，只要點選即可變更顏色值：

1. 在「元素」面板中選取元素。

2. 在「樣式」窗格中，找出要變更的 color 或 *-color 宣告。

   每個 color 或 *-color 值的左側都有一個小方形圖示，其中顯示該顏色的預覽畫面。

   

   注意：這個範例顯示 color-mix() 函式 旁的兩個相交圓圈。交集是產生顏色的預覽畫面。

如要檢查計算值，請使用「Computed」窗格。

1. 按一下顏色旁的預覽方塊，即可開啟顏色挑選器。
2. 如要變更顏色，請使用色彩挑選器的任何 UI 元素。

顏色挑選器元素

以下是 Color Picker 的每個 UI 元素說明：

1. 陰影。
2. 取色工具。請參閱「使用滴管工具從任何位置取色」一文。
3. 複製到剪貼簿。將「Display value」複製到剪貼簿。
4. 顯示值。所選色彩空間的引數。
5. 對比度。僅適用於 color 值。這是 color 和 background-color 的差異。
6. 調色盤。按一下方塊，將顏色變更為方塊的顏色。
7. 色域界線。這行程式碼僅適用於新色彩空間和 color() 函式。可產生高畫質和非高畫質的顏色。這條線可讓你區分 HD 和非 HD 內容。
8. 色彩圓圈。拖曳這個圓圈即可變更色階，改變顯示值。
9. 色調滑桿。
10. 不透明度滑桿。
11. 顯示值切換器。從下拉式清單中選取色彩空間。請參閱「轉換顏色」一文。
    注意：如要直接開啟下拉式選單，請按住 Shift 鍵，然後按一下顏色值旁的顏色預覽圖示。
12. 擴大對比度。開啟對應的部分，讓你修正對比度。

13. 調色盤切換器。按一下即可切換以下選項：

    • Material 設計色板。
    • 自訂調色盤。如要手動將目前顏色加入這個調色盤，請按一下 。
    • 「CSS 變數」色版。列出網頁上的所有自訂 CSS 變數 (附加 --)。
    • 頁面顏色調色盤。為了產生這個調色盤，開發人員工具會在樣式表中尋找所有顏色。

選擇色彩空間

如何選擇色彩空間：

1. 按住 Shift 鍵再點選顏色值旁的預覽圖示。下拉式選單隨即開啟。

   注意：您也可以在「顏色挑選器」中點選「顯示值切換器」
   。

   

2. 請選擇下列任一色彩空間：

   • #<hex-color>
   • rgb(X X X / .X)。
   • hsl(X X X / X)。
   • hwb(X X X / .X)。

   或使用下列任一新版聊天室：

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   或由 color(<color_space> X X X) 函式定義的空間。

轉換顏色

當您使用顯示值切換器切換色彩空間時，DevTools 會自動轉換值。

注意：從 HD 轉換為非 HD 時，DevTools 會將色域裁剪為適合空間，並在裁剪的值上標示 警告圖示。

將滑鼠游標懸停在圖示上方，即可查看原始值。

以下影片展示轉換的運作方式。

修正對比度

重點：色彩挑選器只會計算 color 值與相對應 background-color 值的對比度。因此，只有 color 值有對比率部分。

如何修正 color 宣告的對比度問題：

1. 開啟 color 值旁的「顏色挑選器」。
2. 展開「對比度」 部分。

3. 使用符合規範的建議顏色：

   • 按一下規範旁的 。
   • 在頂端的「色調」預覽畫面中，將「顏色圓圈」拖曳至對應的線條下方。

注意：根據預設，「顏色挑選器」會建議您遵循 WebAIM 指南。或者，您也可以將其設為建議符合 APCA 的值： 在 「設定」 >「實驗」 中，勾選 「啟用新的進階感知對比度演算法 (APCA)...」

如要一次取得所有對比度問題的清單，請按照這篇文章的指示，讓網站更易閱讀。

使用滴管工具在任何地方取樣顏色

滴管可從網頁和螢幕上的任何位置取樣顏色。

如何在螢幕上任一處選取顏色：

1. 開啟顏色挑選器，然後執行下列任一操作：
   • 按一下 按鈕。
   • 按下 C 鍵啟用取色工具。如要停用，請按下 Esc 鍵。
2. 啟用「Eyedropper」後，將滑鼠游標懸停在目標顏色上，然後點選取樣。

注意：取色工具只會從 sRGB 色域中取樣顏色。如果您在這個範圍之外取樣，取色器會將顏色剪輯為最接近的顏色。請參閱「轉換顏色」一文。

在這個範例中，顏色挑選器會顯示目前的顏色值 rgb(224 255 255 / 15%)。點選 Chrome 外部時，這項顏色會變更為粉紅色。