使用颜色选择器检查和调试高清和非高清颜色

Jecelyn Yeen

Twitter GitHub 首页

Sofia Emelianova

GitHub

颜色选择器提供了一个用于更改 color 和 *-color 声明的 GUI，并可让您创建、转换和调试非高清颜色和高清颜色，只需点击一下即可。

要点：本视频展示的是 Chrome 开发者工具 112 之前的版本。在后续版本中，Styles 窗格支持 12 个新颜色空间和 7 个符合 CSS 颜色级别 4 规范的新色域，以及 CSS 颜色级别 5 中的 color-mix() 函数。

如需深入了解新的颜色空间，请参阅高清 CSS 颜色指南。

打开颜色选择器并更改颜色

使用颜色选择器点击一下即可更改颜色值：

1. 在元素面板中选择一个元素。

2. 在 Styles 窗格中，找到您要更改的 color 或 *-color 声明。

   每个 color 或 *-color 值的左侧都有一个小方形图标，其中包含相应颜色的预览。

   

   注意：此示例在 color-mix() 函数 旁边显示了两个相交的圆圈。交集是所生成颜色的预览。

如需检查计算得出的值，请使用 Computed 窗格。

1. 点击颜色旁边的预览方块，打开颜色选择器。
2. 如需更改颜色，请使用颜色选择器的任意界面元素。

颜色选择器元素

以下是颜色选择器的每个界面元素的说明：

1. 阴影。
2. 取色器。请参阅使用取色器对颜色进行采样。
3. 复制到剪贴板。将显示值复制到剪贴板。
4. 显示值。所选颜色空间的参数。
5. 对比度：仅适用于 color 值。这是 color 和 background-color 之间的区别。
6. 调色板。点击正方形即可将颜色更改为正方形。
7. 色域边界。此行仅适用于新的颜色空间和 color() 函数。它们可以生成高清和非高清颜色。此线条可让您区分高清和非高清。
8. 彩色圆圈。在阴影中拖动此圆圈可更改显示值。
9. 色调滑块。
10. 不透明度滑块。
11. 显示值切换器。从下拉列表中选择颜色空间。请参阅转换颜色。
    注意：或者，如需直接打开下拉菜单，请按住 Shift，然后点击颜色值旁边的颜色预览图标。
12. 展开对比度。打开可让您修正对比度的对应部分。

13. 调色板切换器。点击该图标可在以下视图之间切换：

    • Material Design 调色板。
    • 自定义调色板。若要手动将当前颜色添加到此调色板，请点击“”。
    • CSS 变量选项面板。列出网页上的所有自定义 CSS 变量（附加有 --）。
    • 页面颜色调色板。为了生成调色板，开发者工具会查找样式表中的所有颜色。

选择颜色空间

如要选择颜色空间，请按以下步骤操作：

1. 按住 Shift 键并点击颜色值旁边的预览图标。系统会打开一个下拉列表。

   注意：您也可点击颜色选择器中的显示值切换器。

   

2. 选择以下颜色空间之一：

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   或某个新聊天室：

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   或者由 color(<color_space> X X X) 函数定义的空格。

转换颜色

当您使用显示值切换器在颜色空间之间切换时，开发者工具会自动转换值。

注意：从高清转换为非高清时，开发者工具会裁剪色域以适应空间，并使用 警告图标标记裁剪的值。

将鼠标悬停在该图标上即可查看原始值。

下一个视频展示了转化的实际操作过程。

修正对比度

要点：颜色选择器仅计算 color 值相对于各个 background-color 值的对比度。因此，只有 color 值具有对比度部分。

如需解决 color 声明的对比度问题，请执行以下操作：

1. 打开 color 值旁边的颜色选择器。
2. 展开对比度 部分。

3. 使用符合准则的建议颜色：

   • 点击该准则旁边的 。
   • 在顶部的阴影预览中，拖动相应线条下方的颜色圆圈。

注意：默认情况下，颜色选择器会建议您遵循 WebAIM 指南。或者，您也可以进行设置以建议符合 APCA 的值： 在 设置 > 实验中，勾选 启用新的高级感知对比度算法 (APCA)...

如需一键获取所有对比度问题的列表，请按照让网站更易于阅读指南操作。

使用取色器对颜色进行采样

取色器可以从页面中和屏幕上的任意位置对颜色进行采样。

要从屏幕上的任意位置选择颜色，请执行以下操作：

1. 打开颜色选择器，然后执行以下操作之一：
   • 点击 按钮。
   • 按 C 启用取色器。要停用该功能，请按 Esc 键。
2. 启用取色器后，将鼠标悬停在目标颜色上，然后点击即可采样。

注意：取色器仅对 sRGB 颜色空间中的颜色进行采样。当您在此区域之外采样时，取色器会将颜色裁剪为最接近的颜色。请参阅转换颜色。

在此示例中，Color Picker 显示当前颜色值 rgb(224 255 255 / 15%)。当您在 Chrome 外部点击时，此颜色会变为粉红色。