Sampling colors is yet another forte of the Lens tool. The left-hand-side strip of the Lens tool is your color palette. You can see the current pixel color under the mouse at the top and the list of the sampled colors below that.

Live Color

The live pixel color is for the center pixel of the viewport. As you move the mouse, it will always show you the current pixel color. You can see its value on the right of the live color. The current mouse location is also next to it.

Adding colors

Use the C key to add the live color to the palette. The added color shows up as the last color in the palette.

Note You can also assign a global hotkey to sample color

If you hover your mouse over the sampled colors, you will see a tooltip with their Hex value.

If you double-click on a color in the palette, you will see its value in many more formats.

Removing colors

To remove a color from the palette:

  1. Click and select the color
  2. Hit the Delete key to remove from the palette.

You can also select multiple colors with the Command or Shift keys and remove them all at once.

Color Formats

Lens can show you the live color in several formats, as seen below:

To see the different formats for a sampled color, just double-click on it. You will see a popover with several formats.

Tip You can also copy text from the popover and paste into your code.

Copying color as CSS

Hit Command C to copy the live color as a CSS property. It will copy it in the currently selected format.

New in v1.7 If you are not sure of the color format, press Command Shift C to get a menu of formats. You can now decide the format just when you want it.

This menu will always show you the color under mouse.