Use the Picker tool to pick colors from anywhere on your screen or quickly check contrast between elements in accordance with the WCAG standard.
To copy the color code of any pixel from your screen to the clipboard, place the center of the loupe over the desired pixel and press the left mouse button.
The default color code format used by the Picker tool is RGBA, but you can switch between the available formats (RGBA, RGB, HEX, HSLA, HSL) using the Up and Down arrow keys.
In case you want to check the contrast between two colors on your screen, left-click and hold on the first color, than move the center of the loupe to the other color. The contrast between the two colors will be determined based on the Web Content Accessibility Guideline (WCAG 2.1) standard.
Possible contrast levels are:
You can switch between the color picker mode and loupe mode by pressing Space. Use the loupe tool to inspect and highlight minor alignment issues. The radius of the loupe is changeable using the standard zoom-in and zoom-out shortcuts (see below).
Using the options provided in the context menu or the shortcuts listed below, you can hold color codes or the loupe on screen for reference or to take screenshots of them.
Description | macOS | Windows |
---|---|---|
Activate the Picker tool | Option+P | Alt+P |
Leave the Picker tool | Esc | |
Switch between color picker and loupe mode | Space | |
Hold color code | C | |
Hold loupe | L | |
Increase loupe radius | Command+Plus | Ctrl+Plus |
Decrease loupe radius | Command+Minus | Ctrl+Minus |
Clear screen | Option+C | Alt+C |