使用顏色挑選器檢查 HD 高畫質和非 HD 高畫質色彩,並進行偵錯
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
顏色挑選器提供的 GUI 可用於變更 color
和 *-color
宣告,讓您只要按一下滑鼠就能建立、轉換及偵錯非 HD 高畫質和 HD 高畫質的顏色。
如要深入瞭解新的色彩空間,請參閱高畫質 CSS 顏色指南。
開啟顏色挑選器並變更顏色
使用顏色挑選器,只要按一下滑鼠就能變更顏色值:
- 在「元素」面板中選取元素。
在「樣式」窗格中,找到要變更的 color
或 *-color
宣告。
每個 color
或 *-color
值的左側都有一個顯示該顏色預覽的小正方形圖示。
如要檢查計算的值,請使用「Computed」窗格。
- 按一下顏色旁邊的預覽方塊,開啟顏色挑選器。
- 如要變更顏色,請使用顏色挑選器的任一 UI 元素。
顏色挑選器元素
以下說明顏色挑選器的每個 UI 元素:
- 陰影。
- 滴管。請參閱「使用滴管工具隨時隨地取樣顏色」。
- 複製到剪貼簿。將「顯示值」複製到剪貼簿。
- 顯示值:所選色彩空間的引數。
- 對比度。僅適用於
color
值。設為 color
和 background-color
之間的差異。
- 調色盤。按一下正方形,即可將正方形的顏色變更為正方形。
- Gamut 邊界。這行程式碼僅適用於新的色彩空間和
color()
函式。可同時產生 HD 高畫質和非 HD 高畫質的色彩。這條線能讓你區分 HD 高畫質和非 HD 高畫質。
- 色圈。將該圓形在陰影處拖曳,即可變更顯示值。
- 色調滑桿:
- 透明度滑桿:
- 顯示值切換器。從下拉式清單中挑選色域。請參閱「轉換顏色」。
- 展開對比率:開啟可讓您修正對比度的對應部分。
調色盤切換工具:按一下這個切換鈕即可切換:
- Material 設計調色盤:
- 自訂調色盤。如要將目前顏色手動新增至這個調色盤,請按一下 。
- 「CSS 變數」區塊面板。列出您網頁中的所有自訂 CSS 變數 (附加
--
)。
- 頁面顏色區塊面板。為了產生這個調色盤,開發人員工具會檢查樣式表中的所有顏色。
選擇色域
如何選擇色域:
在顏色值旁邊按下 Shift 鍵再點選預覽圖示。即可開啟下拉式清單。
選擇下列其中一個色域:
或任一新聊天室:
或是 color(<color_space> X X X)
函式定義的空間。
轉換顏色
使用顯示值切換器切換色彩空間時,開發人員工具會自動轉換這些值。
將滑鼠遊標懸停在圖示上,即可查看原始值。
下一部影片將說明轉換的實際運作情形。
修正對比度
如何修正 color
宣告的對比問題:
- 開啟
color
值旁邊的「Color Picker」(顏色挑選器)。
- 展開「對比度」 區段。
請使用符合準則的建議顏色:
- 按一下規範旁邊的 。
- 在頂端的「陰影」預覽畫面中,拖曳對應線條下方的「色彩圓圈」。
如要一次列出所有對比問題,請參閱「提高網站易讀性」指南。
使用滴管工具隨時隨地取樣色彩
滴管工具可從網頁和畫面上任何位置取樣顏色。
如何從螢幕上任何位置選擇顏色:
- 開啟「Color Picker」(顏色挑選器),然後執行下列其中一項操作:
- 按一下 按鈕。
- 按下 C 鍵啟動滴管。如要停用,請按下 Escape 鍵。
- 啟用滴管後,將滑鼠遊標懸停在目標顏色上,按一下即可取樣。
在這個範例中,顏色挑選器會顯示 rgb(224 255 255 / 15%)
目前的顏色值。當您在 Chrome 以外的地方按一下時,這個顏色就會變成粉紅色。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-01-08 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-01-08 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-01-08 (世界標準時間)。"],[],[]]