【译】你不知道的 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（颜色选择器）