Color Picker
The Color Picker lets you sample any color from the current page and copy it in your preferred format.
Picking a Color
- Open InspectDev and select the Color Picker tool (dropper icon)
- Click the eyedropper button to activate picker mode
- Move your cursor over the page — a magnifying loupe shows the pixel under your cursor along with its hex value
- 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