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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

使用「顏色挑選器」點選即可變更顏色值：

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

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

    每個 color 或 *-color 值左側都有一個小方塊圖示，可預覽該顏色。

    預覽顏色。

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

color-mix() 的計算值。

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

顏色挑選器元素

以下說明「顏色挑選器」的各個 UI 元素：

顏色挑選器 (附註)。

  1. 色調。
  2. 滴管。請參閱「使用滴管工具從任何位置取樣顏色」。
  3. 「複製到剪貼簿」。將「顯示值」複製到剪貼簿。
  4. 顯示值。所選色彩空間的引數。
  5. 對比度。僅適用於 color 值。這是 color 和 background-color 的差異。
  6. 調色盤。按一下方塊，即可將顏色變更為該方塊的顏色。
  7. 色域界線。這條線僅適用於新的色彩空間和 color() 函式。可產生 HD 和非 HD 色彩。這條線可讓您區分 HD 和非 HD 內容。
  8. 色環。拖曳這個圓圈即可變更顯示值。
  9. 色調滑桿。
  10. 不透明度滑桿。
  11. 顯示值切換器。從下拉式清單中挑選色彩空間。請參閱「轉換顏色」。
  12. 擴大對比度。開啟對應部分，以便修正對比度。

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

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

選擇色彩空間

如何選擇色彩空間：

  1. 按住 Shift 鍵並點按顏色值旁邊的預覽圖示。系統會開啟下拉式清單。

    下拉式選單，列出所有支援的色彩空間。

  2. 選擇下列其中一個色彩空間：

    或是下列任一新空間：

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

轉換顏色

使用「顯示值切換器」在色域之間切換時，開發人員工具會自動轉換值。

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

警告圖示，表示色域剪裁，以及含有原始值的工具提示。

下一部影片將展示轉換動作。

修正對比度

如要修正 color 聲明的對比問題，請按照下列步驟操作：

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

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

    • 按一下指引旁的 使用建議的顏色。。
    • 在頂端的「色調」預覽畫面中，將對應線條下方的「顏色圓圈」拖曳至所需位置。

擴展的對比率專區，內含 APCA 指南。

根據預設，「色彩挑選器」會建議符合 APCA 的值。

或者，您也可以將其設為建議符合 WebAIM 指南的值。依序前往 。「設定」 >「偏好設定」 >「元素」，然後取消勾選「Advanced Perceptual Contrast Algorithm (APCA)...」核取方塊。 核取方塊。

如要一次取得所有對比度問題的清單，請按照「提升網站可讀性」指南操作。

使用滴管工具從任何位置取樣顏色

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

如要從螢幕上任一處挑選顏色，請按照下列步驟操作：

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

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

在本範例中，「色彩挑選器」顯示目前的顏色值為 rgb(224 255 255 / 15%)。點選 Chrome 以外的區域後，這個顏色會變成粉紅色。