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

[01] 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 Execution: All operations execute inside your browser sandbox. Zero files, color swatches, or code payloads are sent to external servers.

[02] 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.

[03] 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.

[04] 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; ```

[05] 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.

[06] 4. Multi-Source Export & Magic Theme Design Tokens

Color Picker PRO features an extensible Export Modal supporting 4 distinct color sources and 5 production formats: - **History Stack (`History (N)`)**: Export recently sampled colors from your local session. - **Pinned Favorites (`Favorites (N)`)**: Export your curated favorites palette with one click. - **Active Color**: Export the current selection across CSS, Tailwind, or JSON. - **Magic Theme (`✨ Magic Theme`)**: Automatically generates complete UI design tokens (`--theme-bg`, `--theme-text`, `--theme-border`, `--theme-accent`) along with a 7-tier tonal opacity scale (`100%`, `80%`, `60%`, `40%`, `20%`, `10%`, `5%`) for instant integration into stylesheets and UI systems.

[SPEC] 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 Sources	History Stack, Pinned Favorites, Active Color, Magic Theme Tokens
Export Formats	CSS Variables (:root), Tailwind Config, JSON Tokens, JS Array, Vector SVG
Storage	Browser LocalStorage (Zero cloud telemetry)
Execution Engine	100% Client-Side Web Platform & Canvas API

[KEYS] Keyboard Shortcuts

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

[CODE] Developer Integration & Code Examples

Magic Theme Design Tokens (CSS)

:root {
  /* Magic Theme Design System */
  --theme-base: #4f46e5;
  --theme-bg: rgba(79, 70, 229, 0.1);
  --theme-text: rgba(79, 70, 229, 1);
  --theme-border: rgba(79, 70, 229, 0.4);
  --theme-accent: rgba(79, 70, 229, 1);

  /* Monochromatic Tonal Palette */
  --theme-100: rgba(79, 70, 229, 1);
  --theme-80: rgba(79, 70, 229, 0.8);
  --theme-60: rgba(79, 70, 229, 0.6);
  --theme-40: rgba(79, 70, 229, 0.4);
  --theme-20: rgba(79, 70, 229, 0.2);
  --theme-10: rgba(79, 70, 229, 0.1);
  --theme-5: rgba(79, 70, 229, 0.05);
}

Tailwind CSS Theme Configuration

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

[FAQ] 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 Now

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

Open Interactive Tool