【譯】你不知道的 Chrome 調試工具技巧第八天：Color picker（顏色選擇器）

特別聲明

本文是做者 Tomek Sułkowski 發佈在 medium 上的一個系列。據做者透露一共有 24 篇，一直更新到 12 月 24 日
版權歸原做者全部。
css

前兩篇的翻譯連接我已經給到了做者本人，雖然他不理解中文，可是他仍是很開心哈哈,截圖在最後
html

譯者在翻譯前已經和做者溝通獲得了翻譯整個系列的受權。
爲了避免影響你們閱讀，受權的記錄在這裏
vue

正文

在立刻就要迎來假期的這 24 天裏，我將會發布一系列短篇的文章，關於如何將開發工具使用得更加有意思，昨天咱們把玩了一下異步 console ，今天咱們來看下顏色選擇器：git

23. `Color picker` 介紹

假如你從沒有細看過顏色選擇器，確實它看起來絕不起眼：只有一些可供咱們選擇的顏色。但仔細看，Wow，個人小夥伴們都驚呆了：DevTools 的開發團隊在這個小玩意裏面原來放了這麼多有用的信息！github

24. 只選擇你正在用的顏色

下面是顏色選擇器的一部分，包括你能夠自定義的調色板。你能夠：web

切換到一個有色調變化的 Material 調色板
自定義，能夠添加和刪除顏色
從 CSS Variables 中選擇一個你當前頁面使用的樣式表中存在的顏色。
或者全部你在頁面的 CSS 中使用的顏色

25.直觀的選擇你的顏色

當打開一個文本的調色選擇器(這個 color css 屬性但不是 background-color) 你會看到 「Contrast ratio(對比度)」 部分。它顯示了文本和它（開發者工具）認爲這段文本應該有的背景顏色之間的對比度。若是這個數值很高，你的文本相對於背景來講更容易被看見，若是這個值接近 1 , 那麼文本的顏色幾乎不能從背景中區分出來。異步

在數字邊上的「🚫」意味着很差（譯者注:對比度過低）編輯器
一個「✅」意味着這個顏色聽從 Web Content Accessibility Guidelines (WCAG) 2.0 的 AA 聲明，這意味着對比度至少爲 3ide
你一樣能夠擁有「✅ ✅」，那意味着知足了 AAA 聲明。工具

經過點擊那個符號（譯者注：上文提到的 AA AAA 或者🚫符號）來閱讀更多關於accessibility rules 中顏色的說明。

若是想繼續探索 對比度 的部分，你會看到額外的信息，並能夠選擇一個不一樣的顏色做爲背景顏色來進行對比，固然 color spectrum(色譜) 部分如今會顯示一個對比的邊界：若是你的背景顏色比這條線上面的顏色更深，兼容 AA ，若是背景顏色比這條線上面的更亮，你須要在這條線的下面選擇一個顏色。

今天的分享就到這裏~

慣例：若是你從這裏學到了一些新東西

→ 你能夠點個贊再走嘛~
→ 關注我：Twitter：Tomek Sułkowski

其餘系列

其餘此係列的文章，立刻就會翻譯出來，到時會貼出對應的連接在此處。

寫在最後

若是你對個人翻譯表示確定，也能夠關注我一波哦~ 順便個人開源項目，求一波 star→ 看這裏, 美麗的博客系統

【譯】你不知道的 Chrome 調試工具技巧 第八天：Color picker（顏色選擇器）