Back to Docs

Color Picker

The Color Picker lets you sample any color from the current page and copy it in your preferred format.

Picking a Color

  1. Open InspectDev and select the Color Picker tool (dropper icon)
  2. Click the eyedropper button to activate picker mode
  3. Move your cursor over the page — a magnifying loupe shows the pixel under your cursor along with its hex value
  4. Click to capture the color

The captured color appears in the panel with its hex, RGB, and HSL values. Click any format to copy it to your clipboard.

Color History

Every color you pick is saved to the history strip at the bottom of the panel during your session. Click any swatch to bring it back to the main view. History is cleared when you close the browser tab.

Manual Entry

You can also enter a color manually:

  • Type or paste a hex value (e.g. #e8600c) into the input field
  • The panel shows a preview swatch and the RGB/HSL equivalents
  • Click Copy to copy the value in any format

Fine-Tuning

Use the hue slider and saturation/brightness square below the preview to adjust a color before copying it. The live preview updates as you drag.

Keyboard Shortcuts

Action Shortcut
Activate eyedropper Ctrl+D / Cmd+D
Copy hex value Ctrl+Shift+C
Copy RGB value Ctrl+Shift+R
Copy HSL value Ctrl+Shift+H
Undo last pick Ctrl+Z

Tips

  • Use the Color Picker with the Element Inspector: inspect an element to see its current color, then open the Color Picker to find a replacement
  • The magnifying loupe shows a 5×5 pixel grid for precise sampling, even on gradients and anti-aliased edges