检查和选择颜色¶

在 CSS 面板的规则视图中，如果规则包含颜色值，您将在值旁边看到颜色的样本

../../../../_images/inspector-css-color-swatch.png

对于表示颜色的 CSS 自定义属性（变量），也会显示颜色样本。

CSS in the Rules pane showing a color swatch on a CSS variable

如果单击颜色样本，您将看到一个颜色选择器弹出窗口，使您可以更改颜色

Color picker showing a case of good contrast with the background

Color picker showing a case of poor contrast" src="color-picker-bad-contrast.png

如果颜色是前景色，则颜色选择器会告诉您其与背景色的对比度是否满足辅助功能指南。将鼠标悬停在对比度消息上可以提供更详细的解释。

颜色选择器包含一个吸管图标：单击此图标可以启用吸管，以便从页面中为元素选择新的颜色