颜色选择器提供了一个用于更改 color
和 *-color
声明的 GUI,并可让您创建、转换和调试非高清颜色和高清颜色,只需点击一下即可。
如需深入了解新的颜色空间,请参阅高清 CSS 颜色指南。
打开颜色选择器并更改颜色
使用颜色选择器点击一下即可更改颜色值:
- 在元素面板中选择一个元素。
在 Styles 窗格中,找到您要更改的
color
或*-color
声明。每个
color
或*-color
值的左侧都有一个小方形图标,其中包含相应颜色的预览。
如需检查计算得出的值,请使用 Computed 窗格。
- 点击颜色旁边的预览方块,打开颜色选择器。
- 如需更改颜色,请使用颜色选择器的任意界面元素。
颜色选择器元素
以下是颜色选择器的每个界面元素的说明:
- 阴影。
- 取色器。请参阅使用取色器对颜色进行采样。
- 复制到剪贴板。将显示值复制到剪贴板。
- 显示值。所选颜色空间的参数。
- 对比度:仅适用于
color
值。这是color
和background-color
之间的区别。 - 调色板。点击正方形即可将颜色更改为正方形。
- 色域边界。此行仅适用于新的颜色空间和
color()
函数。它们可以生成高清和非高清颜色。此线条可让您区分高清和非高清。 - 彩色圆圈。在阴影中拖动此圆圈可更改显示值。
- 色调滑块。
- 不透明度滑块。
- 显示值切换器。从下拉列表中选择颜色空间。请参阅转换颜色。
- 展开对比度。打开可让您修正对比度的对应部分。
调色板切换器。点击该图标可在以下视图之间切换:
- Material Design 调色板。
- 自定义调色板。若要手动将当前颜色添加到此调色板,请点击“”。
- CSS 变量选项面板。列出网页上的所有自定义 CSS 变量(附加有
--
)。 - 页面颜色调色板。为了生成调色板,开发者工具会查找样式表中的所有颜色。
选择颜色空间
如要选择颜色空间,请按以下步骤操作:
按住 Shift 键并点击颜色值旁边的预览图标。系统会打开一个下拉列表。
选择以下颜色空间之一:
或某个新聊天室:
或者由
color(<color_space> X X X)
函数定义的空格。
转换颜色
当您使用显示值切换器在颜色空间之间切换时,开发者工具会自动转换值。
将鼠标悬停在该图标上即可查看原始值。
下一个视频展示了转化的实际操作过程。
修正对比度
如需解决 color
声明的对比度问题,请执行以下操作:
- 打开
color
值旁边的颜色选择器。 - 展开对比度 部分。
使用符合准则的建议颜色:
- 点击该准则旁边的 。
- 在顶部的阴影预览中,拖动相应线条下方的颜色圆圈。
如需一键获取所有对比度问题的列表,请按照让网站更易于阅读指南操作。
使用取色器对颜色进行采样
取色器可以从页面中和屏幕上的任意位置对颜色进行采样。
要从屏幕上的任意位置选择颜色,请执行以下操作:
- 打开颜色选择器,然后执行以下操作之一:
- 点击 按钮。
- 按 C 启用取色器。要停用该功能,请按 Esc 键。
- 启用取色器后,将鼠标悬停在目标颜色上,然后点击即可采样。
在此示例中,Color Picker 显示当前颜色值 rgb(224 255 255 / 15%)
。当您在 Chrome 外部点击时,此颜色会变为粉红色。