🛠 ToolsHub

Color Picker & Palette Generator

Pick any color from your screen, convert between HEX, RGB, HSL, and CMYK, check WCAG contrast ratios, and export Tailwind 50–950 shades.

Hex:

Text on White (#FFF)

Contrast Ratio: 3.68:1

AA Large

Text on Dark (#0F172A)

Contrast Ratio: 4.85:1

AA Pass
Shades & Tints (50–950)
Color Harmonies
Complementary
Analogous
Triadic
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76%, 47%, 0%, 4%)

How to Use the Online Color Picker

  1. Click the large color preview banner to open the system color wheel, enter a HEX code (3-digit or 6-digit), or click Random for inspiration.
  2. Use the Pick (EyeDropper) button to sample colors from images, websites, or desktop windows.
  3. Check live WCAG 2.1 contrast ratios against light and dark backgrounds to ensure readable UI typography.
  4. Click any swatch in the 50–950 Shades & Tints scale to copy its HEX code, or click Export CSS / Tailwind for ready-to-use theme variables.

Color Formats Explained

Format Example Best Used For
HEX #3B82F6 HTML, CSS stylesheets, Figma/Sketch design tokens
RGB rgb(59, 130, 246) Digital displays, Canvas/WebGL graphics, alpha transparency
HSL hsl(217, 91%, 60%) Dynamic theming, hover states, programmatic color adjustments
CMYK cmyk(76%, 47%, 0%, 4%) Print materials, brochures, packaging, branding guides

Frequently Asked Questions

How do I pick a color from anywhere on my screen?

Click the Pick button next to the HEX input box. Your cursor becomes a pixel sampler that lets you capture colors from any open window or image in Chromium-based browsers (Chrome, Edge, Brave, Opera).

What is a passing WCAG contrast ratio?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal body text (Level AA) and 7.0:1 for enhanced readability (Level AAA). Large headings (18pt+ or 14pt+ bold) require at least 3.0:1.