Color Picker & Converter

Color Spaces, Eye-Dropper APIs & Web Palette Harmony

Color selection interfaces enable designers and developers to explore, sample, convert, and harmonize colour values across digital design systems. With the advent of CSS Color Module Level 4, modern web browsers now support hardware-accelerated wide gamut colour spaces, allowing displays to reproduce deep vibrancies well beyond legacy sRGB constraints.

The Evolution of Digital Color Spaces

Color Space	Gamut Volume Coverage	Hardware Requirement	Standard CSS Syntax
sRGB	Standard reference gamut (~35% visible spectrum)	Universal across all screens	rgb(255, 0, 0)
Display P3	~25% wider gamut than sRGB	Apple Retina displays, OLED panels	color(display-p3 1 0 0)
OKLCH / OKLab	Perceptually uniform across human vision	Modern browsers (CSS Color Module 4)	oklch(0.65 0.25 140)
HSL	Cylindrical coordinate representation of sRGB	Universal across all browsers	hsl(210, 100%, 50%)

---

Principles of Color Harmony

Design systems build balanced UI color schemes by referencing geometric relationships on the color wheel:

• Monochromatic: Shades and tints derived from a single hue angle. Ideal for clean, distraction-free corporate layouts.
• Complementary: Two hues positioned directly opposite each other on the color wheel ($180^\circ$ apart). Delivers maximum visual contrast for call-to-action buttons.
• Analogous: Three hues located adjacent to each other on the color wheel ($30^\circ$ separation). Creates harmonious, natural palette transitions.
• Triadic: Three hues positioned evenly at $120^\circ$ intervals. Offers vibrant, playful contrast while maintaining visual balance.

---

The Native Browser EyeDropper API

Modern Chromium-based browsers provide native screen color sampling via the window.EyeDropper API:

async function sampleScreenPixel() {
  if ('EyeDropper' in window) {
    try {
      const eyeDropper = new window.EyeDropper();
      const result = await eyeDropper.open();
      console.log('Sampled Hex:', result.sRGBHex);
      return result.sRGBHex;
    } catch (e) {
      console.log('User dismissed dropper');
    }
  } else {
    console.warn('EyeDropper API is not supported in this browser.');
  }
}

---

Color Accessibility (WCAG 2.1) & Contrast Standards

• Contrast Ratios: The W3C Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt+) against backgrounds.
• Color Blindness Simulation: Design palettes that remain distinguishable under Protanopia (red-weak), Deuteranopia (green-weak), and Tritanopia (blue-weak) color vision deficiencies.
• Relative Luminance Formula: Luminance measures the perceived brightness of a color normalized between 0 (black) and 1 (white), weighted heavily toward green wavelengths.