Stream Deck Plugin • User Guide

Pipette - Color Picker

Sample screen colors, manage live swatches, copy developer formats, and tune shades on Stream Deck. Built for frontend engineers, UI/UX designers, and digital creators on macOS and Windows by Dloper.

1. Overview & Requirements

Pipette connects your screen pixels directly to your physical keys. Whether you are inspecting mockups, building design systems, styling web applications, or ensuring accessible contrast ratios, Pipette brings sampling and color conversion within immediate reach.

System Requirements:

Operating Systems: macOS 13 or later • Windows 10/11.
Stream Deck Software: Version 6.6 or later.
Hardware Compatibility: Compatible with all Stream Deck models (Stream Deck, MK.2, +, Neo, XL, Mini, Mobile). Color Tuning Studio requires Stream Deck +.
Permissions: macOS requires Screen Recording permission to allow the precision loupe to sample colors outside the Stream Deck window.

2. Sampling Screen Colors

The core action in Pipette is the Dropper & Active Swatch key:

Press the Dropper key on your Stream Deck.
A precision magnifier loupe appears under your cursor. Hover over any pixel on your desktop, browser, Figma board, or code editor.
Click to lock in the sample.
The sampled color immediately appears on the LCD key as your active swatch, complete with its hex code and luminance value.

Auto-Copy to Clipboard: In the Property Inspector, enable Auto-copy on sample. The exact moment you click a pixel, the color will be copied to your system clipboard in your chosen format, ready to paste with Cmd+V or Ctrl+V.

3. Supported Developer Formats

Pipette supports instantaneous formatting across web and native mobile development platforms:

Format	Example Output	Description
`HEX`	`#6366F1` or `#6366F1FF`	Standard 6 or 8-character hexadecimal code.
`RGB / RGBA`	`rgba(99, 102, 241, 1.0)`	Standard CSS RGB or RGBA function syntax.
`HSL`	`hsl(239, 84%, 67%)`	Hue, Saturation, and Lightness syntax for modern CSS.
`Tailwind CSS`	`bg-indigo-500` or `text-indigo-500`	Nearest Tailwind v3/v4 palette token match from included color map.
`SwiftUI`	`Color(red: 0.39, green: 0.40, blue: 0.95)`	Ready-to-use SwiftUI Color initializer.
`Jetpack Compose`	`Color(0xFF6366F1)`	Android Jetpack Compose `androidx.compose.ui.graphics.Color`.
`Flutter`	`Color(0xFF6366F1)`	Flutter `dart:ui` Color definition.

4. Swatch History Board

Maintain a persistent palette across an entire row or grid of Stream Deck keys:

Add multiple Swatch History keys to your profile.
In the Property Inspector, assign each key to a slot index from Slot 1 to Slot 8.
As you sample new colors, previous colors automatically shift down the history pipeline.
Tap any swatch key at any time to re-copy that specific historical color to your clipboard in its configured format.

5. Color Tuning Studio on Stream Deck +

For users with a Stream Deck +, the Color Tuning Studio dial action provides hardware-grade color adjustments:

Channel Tuning: Rotate the encoder dial to incrementally tune Hue, Saturation, Lightness, or Alpha opacity in real time.
Touchstrip Display: The high-resolution touchstrip displays a wide swatch banner, current hex code, and live WCAG contrast metrics.
WCAG Contrast Analysis: Automatically computes relative luminance and evaluates text contrast against pure black (#000000) and pure white (#FFFFFF). Clear badges signal AA and AAA accessibility compliance for body and large text.
Push & Touch Gestures: Tap the touchstrip to copy the active color to your clipboard. Push the rotary dial to launch a new screen sample.

6. Troubleshooting & Permissions

macOS Screen Recording Permissions

On macOS 13 (Ventura), 14 (Sonoma), and 15 (Sequoia), operating system privacy controls require user authorization for desktop pixel sampling:

Open System Settings > Privacy & Security > Screen Recording.
Locate Stream Deck in the list and ensure the toggle is set to ON.
If prompted, restart the Stream Deck application to activate the permission.

Windows Sampling Behavior

On Windows 10 and 11, Pipette samples colors via high-performance desktop snapshot APIs. If running in multi-monitor setups with differing DPI scaling factors (e.g., a 150% scaled 4K laptop screen alongside a 100% 1440p monitor), Pipette automatically compensates for desktop scaling offsets.

Protected DRM Video Content

Hardware-accelerated media players streaming protected DRM video (such as Netflix or Apple TV+ in Safari or Edge) intentionally black out pixels for screen capture APIs. To sample colors from videos, sample non-protected stills or browser renders.

Need assistance?
Visit our Stream Deck Support Hub or contact our developer support team.