色彩挑選器提供 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 以外的地方按一下後,這個顏色就會變成粉紅色。