Color picker

Use the Picker tool to pick colors from anywhere on your screen or quickly check contrast between elements in accordance with the WCAG standard.

Picker tool active in the Toolbar

Pick colors

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.

Check contrast

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:

Fail
Low contrast, text is hard or impossible to read.
AA Large
Medium contrast, suitable for font size of 18px and above.
AA
Good contrast, suitable for all font sizes in short texts.
AAA
Excellent contrast, suitable for long texts.

Loupe

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).

Hold

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.

Shortcuts

DescriptionmacOSWindows
Activate the Picker toolOption+PAlt+P
Leave the Picker toolEsc
Switch between color picker and loupe modeSpace
Hold color codeC
Hold loupeL
Increase loupe radiusCommand+PlusCtrl+Plus
Decrease loupe radiusCommand+MinusCtrl+Minus
Clear screenOption+CAlt+C