Pick a color
Choose visually, enter a HEX value, or sample a color from your screen.
Ready-to-use values
Click a value to copy it with its CSS function.
Contrast checker
The current color is treated as text against the background below.
Contrast-safe companion
Find the smallest change toward black or white that reaches each target.
Harmony palette
Generate balanced colors from the current pick. Click any swatch to use it.
Color-vision preview
A quick visual check of how the current color may appear under common color-vision differences.
This preview is an approximation, not a substitute for testing the full interface with people and accessibility tools.
Palette history
Recent picks are stored only in this browser.
Pick a color to start your local history.
WCAG contrast and accessibility guide
The standard baseline for web readability: requires at least 4.5:1 for body text and 3:1 for large text (18pt or bold 14pt).
The enhanced contrast level: requires 7:1 for body text and 4.5:1 for large text, recommended for long-form reading and critical interfaces.
Calculates the minimal luminance adjustment toward black or white to reach target contrast without shifting the underlying hue.
Contrast math is an objective starting point. Always test thin weights, small sizes, and screen reflections with real readers.
Meeting WCAG contrast standards ensures your content remains effortless to read across all devices and lighting conditions.
How to use Color Picker
Choose or sample your color
Pick visually from the palette, type a 3- or 6-digit HEX value, or sample any pixel from your screen with the eyedropper.
Check contrast & harmony
Verify readable text ratios against light or dark backgrounds and generate balanced harmony schemes for UI accents.
Copy CSS & color formats
Click any color code to copy HEX, RGB, HSL, HWB, or OKLCH values, or grab ready-made CSS variables for your stylesheets.
Understanding modern color formats
HEX and RGB are universal standards across digital design, while HSL and HWB offer intuitive controls for adjusting hue, saturation, and lightness.
OKLCH provides perceptually uniform color adjustments, ensuring consistent visual brightness across all hues and unlocking vibrant wide-gamut colors on modern displays.
Private local processing
All conversions, contrast calculations, color-vision previews, and palette storage run locally inside your browser. No color choices or links are ever uploaded to any server.
Your recent palette history is saved privately in browser storage, so your colors remain available whenever you return without needing an account.