【译】你不知道的 Chrome 调试工具技巧第八天：Color picker（颜色选择器）本文是作者 Tomek Su

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

前两篇的翻译链接我已经给到了作者本人，虽然他不理解中文，但是他还是很开心哈哈,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何将开发工具使用得更加有意思，昨天我们把玩了一下异步 console ，今天我们来看下颜色选择器：

23. `Color picker` 介绍

假如你从没有细看过颜色选择器，确实它看起来毫不起眼：只有一些可供我们选择的颜色。但仔细看，Wow，我的小伙伴们都惊呆了：DevTools 的开发团队在这个小玩意里面原来放了这么多有用的信息！

24. 只选择你正在用的颜色

下面是颜色选择器的一部分，包括你可以自定义的调色板。你可以：

切换到一个有色调变化的 Material 调色板
自定义，可以添加和删除颜色
从 CSS Variables 中选择一个你当前页面使用的样式表中存在的颜色。
或者所有你在页面的 CSS 中使用的颜色

25.直观的选择你的颜色

当打开一个文本的调色选择器(这个 color css 属性但不是 background-color) 你会看到 “Contrast ratio(对比度)” 部分。它显示了文本和它（开发者工具）认为这段文本应该有的背景颜色之间的对比度。如果这个数值很高，你的文本相对于背景来说更容易被看见，如果这个值接近 1 , 那么文本的颜色几乎不能从背景中区分出来。

在数字边上的 “🚫” 意味着不好（译者注:对比度太低）
一个 “✅” 意味着这个颜色遵从 Web Content Accessibility Guidelines (WCAG) 2.0 的 AA 声明，这意味着对比度至少为 3
你同样可以拥有 “✅ ✅” ，那意味着满足了 AAA 声明。

通过点击那个符号（译者注：上文提到的 AA AAA 或者🚫符号）来阅读更多关于accessibility rules 中颜色的说明。

如果想继续探索 对比度 的部分，你会看到额外的信息，并可以选择一个不同的颜色作为背景颜色来进行对比，当然 color spectrum(色谱) 部分现在会显示一个对比的边界：如果你的背景颜色比这条线上面的颜色更深，兼容 AA ，如果背景颜色比这条线上面的更亮，你需要在这条线的下面选择一个颜色。

今天的分享就到这里~

惯例：如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

写在最后

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

关于这次翻译，作者的回复

【译】你不知道的 Chrome 调试工具技巧 第八天：Color picker（颜色选择器）