Color Picker & Design Companion

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

HSL Channel Adjustments

Hue 190°
Saturation 95%
Lightness 43%
Opacity (Alpha) 100%

RGB Channel Adjustments

Red 6
Green 182
Blue 212

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: 4.54 : 1
WCAG AA (Req. 4.5:1)
Normal: PASS
Large Text: PASS
WCAG AAA (Req. 7:1)
Normal: FAIL
Large Text: PASS

Harmonious Schemes

Related Online Utilities

Client-Side

JSON Formatter

Format, beautify, and minify raw JSON data. Customize indentation levels and copy clean JSON instantly.

Open Tool
Client-Side

JSON Validator

Check if your JSON data is valid. Get clear error messages, including line numbers and character positions for invalid JSON.

Open Tool
Client-Side

Base64 Converter

Encode text into Base64 format or decode Base64 strings back to clean, readable text with full Unicode support.

Open Tool

How to Use Color Picker

  1. Use the HSL or RGB sliders to fine-tune your color choices in real-time.
  2. Or click the 'Pick From Screen' pipette button to launch the browser's native Eyedropper API 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, Triadic) 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 & Privacy Guarantee

  • 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.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX represents colors in hexadecimal notation (e.g., #000000). RGB defines color by mixing Red, Green, and Blue light channels (0-255). HSL defines color by Hue (color type on a 360° wheel), Saturation (color intensity, 0-100%), and Lightness (white/black mixture, 0-100%). HSL is often preferred by designers because it is more intuitive to adjust.

What are the WCAG Contrast guidelines?

The Web Content Accessibility Guidelines (WCAG) dictate that text must have sufficient contrast against its background. Grade AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Grade AAA requires a ratio of at least 7:1 for normal text and 4.5:1 for large text.

How does the screen Eyedropper work?

On supported modern browsers (like Chrome, Edge, and Opera), the Eyedropper button calls the native browser API, letting you click anywhere on your screen to pick a pixel color. On unsupported platforms, it opens a fallback color picker box.