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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

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

   

   注意：此示例展示了 color-mix() 函数旁边的两个相交圆圈：。交集是最终颜色的预览。

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

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

颜色选择器元素

下面介绍了颜色选择器的每个界面元素：

1. Shades。
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) 函数定义的空间。

转换颜色

当您使用显示值切换器在颜色空间之间切换时，DevTools 会自动转换值。

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

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

下一个视频展示了转化在实际应用中的效果。

修正对比度

要点：颜色选择器仅针对 color 值计算对比度，并且是相对于各自的 background-color 值进行计算的。因此，只有 color 值具有对比度部分。

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

1. 打开 color 值旁边的颜色选择器。
2. 展开 Contrast ratio 部分。

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

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

默认情况下，颜色选择器会建议符合 APCA 的值。

或者，您也可以将其设置为建议符合 WebAIM 指南的值。在 设置 > 偏好设置 > 元素中，取消选中 高级感知对比度算法 (APCA)… 复选框。

如需一次性获取所有对比度问题列表，请按照提高网站的可读性指南操作。

使用取色器在任意位置取色

取色器可以从网页和屏幕上的任何位置取样颜色。

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

1. 打开颜色选择器，然后执行以下操作之一：
   • 点击 按钮。
   • 按 C 键可激活取色器。如需停用，请按 Esc。
2. 在取色器处于活动状态时，将鼠标悬停在目标颜色上，然后点击以进行采样。

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

在此示例中，颜色选择器显示当前颜色值为 rgb(224 255 255 / 15%)。当您点击 Chrome 之外的区域时，此颜色会变为粉色。