Inspect and select colors¶
In the CSS Pane’s Rules view, if a rule contains a color value, you’ll see a sample of the color next to the value:
![../../../../_images/inspector-css-color-swatch.png](https://cdn.statically.io/img/wiki.developer.mozilla.org/../../../../_images/inspector-css-color-swatch.png)
A color sample is also shown for CSS custom properties (variables) that represent colors.
![CSS in the Rules pane showing a color swatch on a CSS variable](https://cdn.statically.io/img/wiki.developer.mozilla.org/../../../../_images/css_color_vars.png)
If you click on the color sample, you’ll see a color picker popup, enabling you to change the color:
![Color picker showing a case of good contrast with the background](https://cdn.statically.io/img/wiki.developer.mozilla.org/../../../../_images/color-picker-good-contrast.png)
![Color picker showing a case of poor contrast" src="color-picker-bad-contrast.png](https://cdn.statically.io/img/wiki.developer.mozilla.org/../../../../_images/color-picker-bad-contrast.png)
If the color is a foreground color, the color picker tells you whether its contrast with the background color meets accessibility guidelines. Hovering the mouse over the contrast message gives a more detailed explanation.
The color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: