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.
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.
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.
To remove a color from the palette:
Deletekey to remove from the palette.
You can also select multiple colors with the
Shift keys and remove them all at once.
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.
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
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.