Design & UI Validation

Colorpicker & Palettes

Sample any color from anywhere on the screen using the native EyeDropper API, with automatic hex/rgb/hsl conversion and a persistent swatches history.

Overview

Pixel-Perfect Color Sampling

The Colorpicker provides a global eyedropper that can sample any pixel on screen — including inside the preview frames — and returns the exact color value in all formats. It eliminates the guesswork of trying to match a design color from a mockup or screenshot.

  • Native EyeDropper API: Uses the browser's built-in color sampling with sub-pixel accuracy — no browser extension required.
  • Multi-Format Output: Automatically converts the sampled color to Hex (#3D6EFF), RGB (rgb(61, 110, 255)), and HSL (hsl(229, 100%, 62%)).
  • One-Click Copy: Click any format label to instantly copy the value to the clipboard, ready to paste into your CSS or design tool.
  • Recent Swatches Strip: The last 24 sampled colors are saved to a swatches strip, backed by localStorage. They persist across sessions.
  • Swatch Copy: Click any saved swatch to copy its hex value instantly.
  • Works Across Frames: You can sample from any device frame on the Vispane canvas, not just the Vispane UI itself.
⚠️
Requires a Secure Context The EyeDropper API is only available on https:// or localhost. It will not work on plain HTTP deployments. This is a browser security requirement, not a Vispane limitation.
Pro Tips
💡
Match colors from a Figma screenshot Screenshot your Figma design, open the image in your browser, and use the eyedropper to sample the exact color. No more guessing or eyeballing hex values from the design file.
💡
Combine with the Contrast Checker Sample the foreground and background colors directly from your live UI using the eyedropper, then paste them into the Contrast Checker to instantly verify WCAG compliance without manually reading the computed styles.