Back to Tools

Color Picker & Design Companion

Inspect hex values, generate palettes, and test WCAG contrast ratios entirely in your browser.

HSL Channel Adjustments

Hue190°
Saturation95%
Lightness43%
Opacity (Alpha)100%

RGB Channel Adjustments

Red6
Green182
Blue212

Recent Swatches

No colors saved yet. Click "Save Color" to add custom swatches.

Export Values

HEX
#06b6d4
RGB
rgb(6, 182, 212)
RGBA
rgba(6, 182, 212, 1)
HSL
hsl(190, 95%, 43%)
HSLA
hsla(190, 95%, 43%, 1)

Contrast Checker (WCAG 2.0)

Text Color (Hex)
Background Color (Hex)
Preview Text

The quick brown fox jumps over the lazy dog.

Contrast Ratio:2.43 : 1
WCAG AA (Req. 4.5:1)
Normal: FAIL
Large Text: FAIL
WCAG AAA (Req. 7:1)
Normal: FAIL
Large Text: FAIL

Harmonious Schemes

Complementary
Triadic
Analogous
Monochromatic

Complete Guide: How to Use the Color Picker

A high-precision developer-centric online Color Picker. Select colors using RGB, HSL, and HEX parameters, check accessibility with WCAG contrast ratio validators, and generate harmonious palettes.

Step-by-Step Instructions

  1. Use the HSL or RGB sliders to fine-tune your color choices in real-time.
  2. Or click the 'Pick Color' pipette button to launch the browser's native Eyedropper API (or fallback standard dialog) to sample any color off your screen.
  3. Input Hex codes directly in the text field to resolve them to HSL/RGB balances.
  4. Inspect the dynamic Color Palette schemes below (Complementary, Analogous, etc.) and click any swatch to load it into the picker.
  5. Scroll to the Contrast Checker tool, input foreground and background Hex codes, and view WCAG compliance outcomes.

Key Features & Benefits

  • Clean sliders representing Hue, Saturation, Lightness, and Alpha/Opacity.
  • Direct RGB channel slider controls.
  • Integrated Eyedropper API wrapper for pixel-perfect screen sampling.
  • WCAG 2.0 contrast ratio calculator displaying pass/fail indicators for AA and AAA grades.
  • Harmonious scheme generator compiling triadic, complementary, split-complementary, and monochromatic palettes.
  • LocalStorage integration to preserve your picked colors across sessions.

FAQs about Color Picker

What is the difference between HEX, RGB, and HSL?
What are the WCAG Contrast guidelines?
How does the screen Eyedropper work?