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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

顏色挑選器提供的 GUI 可用於變更 color 和 *-color 宣告，讓您只要按一下滑鼠就能建立、轉換及偵錯非 HD 高畫質和 HD 高畫質的顏色。

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

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

使用顏色挑選器，只要按一下滑鼠就能變更顏色值：

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

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

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

    顏色預覽。

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

計算出的 color-mix() 值。

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

顏色挑選器元素

以下說明顏色挑選器的每個 UI 元素：

顏色挑選器，已加上註解。

  1. 陰影。
  2. 滴管。請參閱「使用滴管工具隨時隨地取樣顏色」。
  3. 複製到剪貼簿。將「顯示值」複製到剪貼簿。
  4. 顯示值：所選色彩空間的引數。
  5. 對比度。僅適用於 color 值。設為 color 和 background-color 之間的差異。
  6. 調色盤。按一下正方形，即可將正方形的顏色變更為正方形。
  7. Gamut 邊界。這行程式碼僅適用於新的色彩空間和 color() 函式。可同時產生 HD 高畫質和非 HD 高畫質的色彩。這條線能讓你區分 HD 高畫質和非 HD 高畫質。
  8. 色圈。將該圓形在陰影處拖曳，即可變更顯示值。
  9. 色調滑桿：
  10. 透明度滑桿：
  11. 顯示值切換器。從下拉式清單中挑選色域。請參閱「轉換顏色」。
  12. 展開對比率：開啟可讓您修正對比度的對應部分。

  13. 調色盤切換工具：按一下這個切換鈕即可切換：

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

選擇色域

如何選擇色域：

  1. 在顏色值旁邊按下 Shift 鍵再點選預覽圖示。即可開啟下拉式清單。

    列出所有支援的色域的下拉式清單。

  2. 選擇下列其中一個色域：

    或任一新聊天室：

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

轉換顏色

使用顯示值切換器切換色彩空間時，開發人員工具會自動轉換這些值。

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

一個警告圖示，指出雜域裁剪，以及含有原始值的工具提示。

下一部影片將說明轉換的實際運作情形。

修正對比度

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

  1. 開啟 color 值旁邊的「Color Picker」(顏色挑選器)。
  2. 展開「對比度」展開。 區段。

  3. 請使用符合準則的建議顏色：

    • 按一下規範旁邊的 使用建議顏色。。
    • 在頂端的「陰影」預覽畫面中，拖曳對應線條下方的「色彩圓圈」。

按照 WebAIM 或 APCA 規範的展開對比度部分。

核取方塊。

如要一次列出所有對比問題，請參閱「提高網站易讀性」指南。

使用滴管工具隨時隨地取樣色彩

滴管。 滴管工具可從網頁和畫面上任何位置取樣顏色。

如何從螢幕上任何位置選擇顏色：

  1. 開啟「Color Picker」(顏色挑選器)，然後執行下列其中一項操作：
    • 按一下 滴管。 按鈕。
    • 按下 C 鍵啟動滴管。如要停用，請按下 Escape 鍵。
  2. 啟用滴管後，將滑鼠遊標懸停在目標顏色上，按一下即可取樣。

在螢幕上任何位置使用滴管。

在這個範例中，顏色挑選器會顯示 rgb(224 255 255 / 15%) 目前的顏色值。當您在 Chrome 以外的地方按一下時，這個顏色就會變成粉紅色。