Color Picker PRO Docs — Eyedropper API, CMYK, WCAG & Harmonies Guide

# Overview

Color Picker PRO is an ultra-fast, 100% client-side color engineering suite built for modern frontend developers, UI/UX designers, and accessibility auditors. Unlike conventional web color pickers that rely on browser extensions or restricted input fields, Color Picker PRO harnesses modern Web APIs — including the Native EyeDropper API, Document Picture-in-Picture (PiP), and HTML5 Canvas sub-pixel sampling — to provide an end-to-end color workflow with zero server telemetry.

✓

100% Client-Side Architecture: All operations execute inside your browser's V8 engine and Canvas sandbox. Zero files, color swatches, or code payloads are sent to external servers.

# Under The Hood & Browser APIs

Color Picker PRO combines several cutting-edge web platform capabilities to deliver desktop-grade performance directly inside the browser:

Native EyeDropper API

Uses `window.EyeDropper` to capture any pixel from the user's desktop, other browser tabs, or external applications with OS-level hardware acceleration.

Sub-Pixel Canvas Magnifier & Touch Loupe

For uploaded images and mobile touchscreens where the EyeDropper API is unsupported, an in-memory 2D Canvas context (`CanvasRenderingContext2D.getImageData`) extracts RGBA values at 4x–16x zoom with bilinear smoothing disabled for pixel-crisp sampling.

Mathematical Color Conversions

Implements high-precision 2-way conversion matrices across sRGB, CIE-L*a*b*, HSL, HSV, and CMYK with floating-point rounding safeguards.

WCAG 2.1 Relative Luminance Engine

Calculates photometric relative luminance (L = 0.2126 * R + 0.7152 * G + 0.0722 * B) per W3C specifications to verify AA (4.5:1 / 3:1) and AAA (7:1 / 4.5:1) compliance against light (#FFFFFF) and dark (#111113) backgrounds.

Document Picture-in-Picture (PiP)

Spawns an always-on-top, floating mini-picker window using `window.documentPictureInPicture.requestWindow()` so you can sample and copy colors while working inside Figma, Photoshop, or VS Code.

# 1. Screen & Image Sampling Workflows

### Desktop Screen Eyedropper To sample colors from any desktop application or web page: 1. Click the **Eyedropper** button in the header toolbar or press **Space** / **P** on your keyboard. 2. Move your cursor over any element on your screen (outside or inside the browser). 3. Left-click to capture the exact hex code. The active palette, contrast badges, and code exports update instantaneously. ### Image Canvas Extractor 1. Drag and drop any image (PNG, JPG, WebP, SVG, AVIF) into the drop zone, or press **Ctrl+V** (**Cmd+V** on macOS) to paste directly from your clipboard. 2. Hover over the image to view the **16x Precision Magnifier Loupe** showing individual pixel boundaries and RGB values. 3. Click anywhere to select a color, or inspect the auto-extracted dominant color palette. ### Mobile Touchscreen Loupe On iOS Safari and Android Chrome, touch and drag across the canvas. A floating loupe appears **90px above your fingertip** so your view is never obstructed, with adjustable 4x, 8x, 12x, and 16x zoom levels.

# 2. Supported Formats & Conversion Specs

Color Picker PRO supports bidirectional live editing across all major digital and print color models: - **HEX / HEXA**: Standard 6-digit hex (`#4F46E5`) and 8-digit alpha (`#4F46E5FF`). - **RGB / RGBA**: 8-bit channels (`rgb(79, 70, 229)` and `rgba(79, 70, 229, 0.95)`). - **HSL / HSLA**: Cylindrical-coordinate representation (`hsl(243, 75%, 60%)`). - **HSV / HSB**: Hue, Saturation, Value used extensively in graphics editing software. - **CMYK**: Subtractive 4-color process model (`cmyk(66%, 69%, 0%, 10%)`) with standard black-key generation algorithm: ```javascript // CMYK calculation formula const k = 1 - Math.max(r / 255, g / 255, b / 255); const c = (1 - r / 255 - k) / (1 - k) || 0; const m = (1 - g / 255 - k) / (1 - k) || 0; const y = (1 - b / 255 - k) / (1 - k) || 0; ```

# 3. Mathematical Harmonies & Tailwind Scales

The Harmonies engine generates 10+ harmonic palettes by applying angular hue shifts along the 360° color wheel: - **Complementary**: Exact 180° opposite hue for high-contrast accents. - **Analogous**: Adjacent hues at ±30° and ±60° for organic, calm palettes. - **Split-Complementary**: Hues at 150° and 210° providing vibrant contrast with less tension than pure complementary. - **Triadic & Tetradic**: Equilateral (120°) and rectangular (60°/180°/240°) geometries. - **Tailwind CSS 50–900 Scale**: Automatically computes an accessible 10-step design-system color ramp with calibrated luminance curves.

# Technical Specifications & Limits

Parameter / Property	Specification / Value
Sampling Precision	32-bit RGBA (8-bit per channel)
Zoom Range	1x to 16x Pixel Grid Loupe
Contrast Standard	W3C WCAG 2.1 (AA & AAA thresholds)
Export Formats	CSS Variables, Tailwind v3/v4, SCSS, Swift, Android XML, JSON
Storage	Browser LocalStorage (Zero cloud telemetry)
Execution Engine	100% Client-Side Web Platform & Canvas API

# Keyboard Shortcuts & Pro Controls

Activate Native Screen EyedropperSpace / P

Paste image directly from clipboard into ExtractorCtrl + V / Cmd + V

Toggle Document Picture-in-Picture (PiP) windowW

Star / Pin current color to FavoritesF

Generate random vibrant colorR

Copy active HEX code to clipboardCtrl + C / Cmd + C

# Developer Integration & Code Examples

CSS Custom Properties Export

:root {
  --color-primary: #4f46e5;
  --color-primary-rgb: 79, 70, 229;
  --color-primary-hsl: 243, 75%, 60%;
  --color-contrast-text: #ffffff; /* WCAG AAA Pass */
}

Tailwind CSS Theme Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eef2ff',
          100: '#e0e7ff',
          500: '#4f46e5',
          600: '#4338ca',
          900: '#312e81',
        }
      }
    }
  }
};

# Frequently Asked Questions

Why is the EyeDropper button disabled or unavailable in Firefox/Safari?

How does the tool calculate WCAG 2.1 contrast ratios?

Are my uploaded photos or sampled colors stored on your servers?

Try Color Picker Online — Screen Eyedropper, Image & Palette Generator Now

Test features in your browser with zero installations, zero server uploads, and 100% free offline capabilities.

Open Interactive Tool