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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

    在每个 color 或 *-color 值的左侧，都有一个小方形图标，用于预览相应颜色。

    颜色预览。

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

color-mix() 的计算值。

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

颜色选择器元素

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

颜色选择器（带注释）。

  1. 阴影。
  2. 取色器。请参阅使用取色器在任意位置对颜色进行采样。
  3. 复制到剪贴板。将显示值复制到剪贴板。
  4. 显示值。所选颜色空间的参数。
  5. 对比度。仅适用于 color 值。这是 color 和 background-color 之间的差值。
  6. 调色板。点击正方形，即可将其颜色更改为正方形。
  7. 色域边界。此行仅适用于新颜色空间和 color() 函数。它可以生成高清和非高清颜色。您可以通过这条线区分高清和非高清。
  8. 彩色圆圈。穿过阴影区域拖动此圆圈可更改显示值。
  9. 色调滑块。
  10. 不透明度滑块。
  11. 显示值切换器。从下拉列表中选择颜色空间。请参阅转换颜色。
  12. 展开对比度。打开相应部分，您可以修正对比度。

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

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

选择颜色空间

如需选择颜色空间，请执行以下操作：

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

    包含所有支持颜色空间的下拉列表。

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

    或某个新聊天室：

    或者由 color(<color_space> X X X) 函数定义的聊天室。

转换颜色

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

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

指示色域裁剪的警告图标和包含原始值的提示。

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

修正对比度

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

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

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

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

根据 WebAIM 或 APCA 准则展开的对比度部分。

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

用拾色器在任何地方采样色彩

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

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

  1. 打开颜色选择器，然后执行以下某项操作：
    • 点击 取色器。 按钮。
    • 按 C 激活取色器。若要停用，请按 Esc 键。
  2. 启用取色器后，将鼠标悬停在目标颜色上，然后点击采样。

在屏幕上的任意位置使用取色器。

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