Jecelyn Yeen
Sofia Emelianova
色彩挑選器提供 GUI 可用於變更 color 和 *-color 宣告，讓您只要按一下滑鼠，就能建立、轉換非 HD 高畫質和 HD 高畫質顏色，並進行相關偵錯。
如要深入瞭解新的色域，請參閱高畫質 CSS 色彩指南。
開啟顏色挑選器並變更顏色
使用顏色挑選器變更顏色值：
- 在「Elements」面板中選取元素。
在「Styles」窗格中，找到要變更的
color或*-color宣告。每個
color或*-color值的左側都有一個小型正方形圖示，內含該顏色的預覽畫面。
如要檢查計算出的值，請使用「Computed」窗格。
- 按一下顏色旁邊的預覽方塊即可開啟「顏色挑選器」。
- 如要變更顏色，請使用顏色挑選器的任何 UI 元素。
顏色挑選器元素
以下是「顏色挑選器」每個 UI 元素的說明：
- Shades：
- 滴管：詳情請參閱「使用滴管工具隨時隨地取樣顏色」。
- 複製到剪貼簿。將「Display value」(顯示值) 複製到剪貼簿。
- 顯示值。所選色域的引數。
- 對比度。僅適用於
color值。而是color和background-color之間的差異。 - 調色盤：按一下方塊即可將方塊的顏色變更為該顏色。
- 廣域界線。這條線僅適用於新的色彩空間和
color()函式。能產生 HD 高畫質和非 HD 高畫質的色彩。線條的用途是區分 HD 高畫質和非 HD 高畫質。 - 顏色圓圈。在顏色深處拖曳這個圓圈即可變更顯示值。
- 色調滑桿：
- 不透明度滑桿。
- 顯示值切換器：在下拉式清單中選取色域。請參閱「轉換顏色」。
- 展開對比度。開啟對應的部分，點選即可修正對比度。
調色盤切換器：按一下這個圖示即可切換：
- Material 設計調色盤。
- 自訂調色盤。如要將目前顏色手動新增至這個調色盤，請按一下
。 - 「CSS 變數」區塊面板。列出網頁上所有 CSS 自訂變數 (附加
--)。 - 頁面顏色調色盤。為產生這個調色盤，開發人員工具會尋找樣式表中的所有顏色。
選擇色域
如何選擇色域：
對顏色值旁邊的預覽圖示按住 Shift 鍵。系統隨即會開啟下拉式清單。
請選擇下列其中一個色域：
或下列任一新聊天室：
或
color(<color_space> X X X)函式定義的空格。
轉換色彩
使用顯示值切換器切換色域時，開發人員工具會自動轉換值。
將滑鼠遊標懸停在圖示上，即可查看原始值。
下一部影片說明轉換的應用實例。
修正對比
如何修正 color 宣告的對比度問題：
- 開啟
color值旁邊的「Color Picker」。 - 展開「對比度」部分
。 使用符合規範的建議顏色：
- 按一下引導線旁的
。 - 在頂端的「陰影」預覽畫面中，拖曳相應線條下方的「色彩圓圈」。
- 按一下引導線旁的
如要集中查看所有對比問題，請按照「讓網站更容易閱讀」指南操作。
使用滴管隨處抽樣顏色
滴管可同時從網頁和螢幕上的任何位置取樣顏色。
如何從畫面上任何位置選取顏色：
- 開啟「Color Picker」，然後執行下列其中一項操作：
- 按一下「
」按鈕。 - 按下 C 可啟動滴管。如要停用，請按下 Escape 鍵。
- 按一下「
- 啟用「滴管」後，將滑鼠遊標懸停在目標顏色上，按一下即可取樣。
在這個範例中，「Color Picker」顯示目前的顏色值為 rgb(224 255 255 / 15%)。在 Chrome 以外的地方按一下後，這個顏色就會變成粉紅色。