blob: e521ef3947cd4ccbd174bebbe78f955e664ce02a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
=========================
Inspect and select colors
=========================
In the CSS Pane's :ref:`Rules view <page_inspector_ui_tour_rules_view>`, if a rule contains a color value, you'll see a sample of the color next to the value:
.. image:: inspector-css-color-swatch.png
A color sample is also shown for CSS custom properties (variables) that represent colors.
.. image:: css_color_vars.png
:alt: CSS in the Rules pane showing a color swatch on a CSS variable
:class: border
If you click on the color sample, you'll see a color picker popup, enabling you to change the color:
.. image:: color-picker-good-contrast.png
:alt: Color picker showing a case of good contrast with the background
.. image:: color-picker-bad-contrast.png
:alt: Color picker showing a case of poor contrast" src="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:
.. raw:: html
<iframe width="560" height="315" src="https://www.youtube.com/embed/0Zx1TN21QOo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>
<br/>
|
