Click the color picker icon in the menu bar to instantly pick a color from anywhere on your screen and copy it to your
clipboard. Alternatively, press
shift alt p to pick a color. While in eye dropper mode, press
esc to cancel.
Color Picker UI
After having selected a color the Color Picker UI will open. You can also open this by right-clicking the icon in the menu bar.
The top row contains a separate color picker button, a color palette button and two dropdowns: one to select if you want the contrast checking to use the values for small or large text, and one that lets you select the color notation you want: hex, rgb or hsl.
With the color picker button you can again pick a color from anywhere on the screen, and the palette button lets you select using a traditional color picker, along with tints and shades for the currently picked color.
Selected color and background
Below that are two large color swatches: your most recently selected color and the background to check it against (by default the previously picked color). The background swatch will show the text in the selected color on top of it for your to compare, in a font size that matches small or large. Click on a swatch to copy the color.
Below the two swatches we show the contrast along with whether or not it passes the WCAG AA or AAA score for the selected text size. When a color does not have enough contrast with the chosen background color we'll show a small square of the closest color that does have enough contrast (using the same algorithm we use in our color contrast debug tool). Clicking it will update your selected color.
Previously selected colors
Below that we show an overview of the 9 last selected colors. Each colors contrast score against the currently selected background color is automatically calculated and shown.
Click a color to copy it, click the "Aa" icon to set this color as the selected color or the background icon to set it as the background color to compare other colors to.
These colors are also available in the color selector in the elements panel.
Is your question not answered?
Ask via Twitter, Slack or our contact form