🎨

Color Picker & Contrast Checker

100% Client-Side

Pick colors visually, inspect HEX, RGB, and HSL values, and check WCAG AA/AAA contrast ratios against light and dark backgrounds.

Choose or Enter HEX Color

HEX: #0066CC

RGB: 0, 102, 204

HSL: 210°, 100%, 40%

WCAG 2.1 Contrast Ratios

Text on White Background Contrast: 5.41:1

AA Pass

Text on Black Background Contrast: 3.88:1

Large Only

How to Use Color Picker & Contrast Checker

Pick a Color

Click the color swatch or enter a HEX code directly.

Check WCAG Contrast

Review the accessibility contrast ratio on both black and white backgrounds.

Copy Values

One-click copy for HEX, RGB, or HSL CSS codes.

✓ WCAG 2.1 Compliance

Calculates exact relative luminance and contrast ratings (AA / AAA) for normal and large text.

✓ Three Synchronized Formats

Instant conversion between HEX (#0066CC), RGB, and HSL color spaces.

✓ Interactive Swatch

Live color preview tile responds immediately as you drag the color sliders.

🔒 Complete Client-Side Isolation

This tool runs entirely in your local browser runtime. No logs, analytics tracking, or remote server transmissions occur.

Generate beautiful harmonious color palettes, tints, shades, and complementary schemes from any base color with one-click hex copying.

Bidirectional, synchronized three-way color converter for web designers with live visual feedback and ready-to-use CSS snippets.

Extract dominant color palettes and prominent hues from local images using HTML5 Canvas pixel quantization with zero uploads.