Adobe AEM
All tools

Developer & Design Tool

Image Color Picker & Palette Extractor.

Upload, drop, or paste any image to pick exact pixel colors with precision magnifier loupe, extract dominant palettes, convert between HEX, RGB, HSL, HSV, CMYK, and test WCAG contrast. How to use

Samples:
Hover image to inspect pixels & zoom loupe. Click anywhere to lock color.

Color Harmonies

Complementary

Analogous

Triadic

Split-Complementary

Monochromatic

Selected Color Formats#3b82f6

HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSVhsv(217, 76%, 96%)
CMYKcmyk(76%, 47%, 0%, 4%)

WCAG 2.x Contrast Ratio

AaSample text preview on background

Contrast ratio

3.68:1

Fail
  • AA — normal textFail (min 4.5:1)
  • AA — large text (18pt+/14pt bold+)Pass (min 3:1)
  • AAA — normal textFail (min 7:1)
  • AAA — large textFail (min 4.5:1)

All color picking, magnification loupe rendering, spectrum selection, palette extraction, and WCAG contrast checks run 100% locally in your browser.

Color Converter & Palette Studio — User Guide

The Color Converter & Palette Studio provides a complete toolkit for converting color formats, checking accessibility compliance, extracting palettes from images, and generating Tailwind CSS color scales.

Features

  1. Multi-Format Conversion: Parses and converts between HEX, RGB, HSL, HSV, CMYK, and OKLCH.
  2. WCAG 2.x Contrast Ratio Checker: Evaluates text/background contrast ratios against WCAG 2.1 AA and AAA standards (minimum 4.5:1 for normal text, 7:1 for AAA).
  3. Tailwind CSS 50-950 Color Scale Generator: Computes a full 11-step Tailwind CSS shade scale (50 through 950) for any base color with copyable tailwind.config.js code.
  4. Image Color Picker: Upload any image or drop a URL to pick colors with a loupe magnifier and extract dominant color palettes using K-Means clustering.
  5. Interactive Spectrum Picker: Visual HSL spectrum color picker and harmony generator (Complementary, Analogous, Triadic, Monochromatic).