- Complementary palettes use opposite hues on the color wheel (180° apart) for high contrast.
- Triadic palettes spread hues roughly 120 degrees apart for balanced, vibrant schemes.
- Analogous palettes use nearby hues (within 30-60°) for softer, harmonious matches.
- Shades vary the lightness of the selected color for a monochromatic look.
Related Tools
About the Color Picker
Colour on screens is numbers: HEX pairs like #4650E8 bundle red, green, and blue intensities; RGB spells them out (70, 80, 232); HSL describes the same colour as humans think — hue, saturation, lightness. Designers move between these constantly: HEX for CSS, RGB for canvas and shaders, HSL for building harmonious families. This picker converts all three live, from an eye-dropper, a saved value, or free exploration.
Beyond conversion, the tool is built for the practical jobs around colour: reading contrast ratios against white and black backgrounds (the WCAG accessibility question), generating shades and tints for hover states and design-system scales, and producing complementary and analogous harmonies from any anchor colour.
Everything is instant and local — paste brand guidelines, sample a screenshot, or tune until it feels right; nothing is uploaded anywhere.
How to use the Color Picker
- 1 Pick a colour with the eye-dropper, paste a HEX code, or drag the sliders.
- 2 Watch HEX, RGB, and HSL update together — copy whichever your CSS needs.
- 3 Check the contrast panel for white/black text readability against your colour.
- 4 Explore the shade scale and harmony swatches for palettes around your anchor colour.
Key features
HEX ⇄ RGB ⇄ HSL
All three notations computed live from any input form.
Eye-dropper sampling
Pick any pixel on screen where the browser supports it.
Contrast checking
WCAG contrast ratios against white and black text at a glance.
Shades, tints, harmonies
Design-system scales and complementary/analogous sets from one click.
Who uses the Color Picker?
- Frontend work: converting design tokens into CSS variables.
- Brand teams auditing logo colours against accessible text pairings.
- Artists matching a sampled screenshot colour to a working palette.
- Teachers demonstrating how RGB primaries compose.
- Creating complete UI scales (50–900) from a single brand anchor.
Tips and best practices
- Aim for 4.5:1 contrast for body text (WCAG AA) and 3:1 for large headings; the contrast panel tells you instantly which text colour passes.
- HSL is the designer’s notation: keep hue, nudge lightness for hover/active states, and your UI stays coherent.
- Your brand colour is rarely accessible as text — use it for surfaces and accents, with darker/lighter siblings for typography.
- Test colours in both light and dark themes; a palette that sings on white can vibrate painfully on near-black.
- 8-digit HEX (e.g. #4650E8FF) adds alpha; use it for translucency instead of separate opacity layers where supported.
Frequently asked questions
None in colour — HEX is just RGB written compactly: #4650E8 is rgb(70, 80, 232). Use whichever your tooling prefers; conversion here is lossless both ways.
Human-shaped controls: hue in degrees, saturation as vividness, lightness as brightness. Building a light-blue family is trivial in HSL and miserable in raw RGB.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA raises these to 7:1 and 4.5:1. The tool shows your ratio against white and black instantly.
Displays vary in gamut, brightness, and calibration; unmanaged colours shift between devices. For brand-critical work, define colours in a wide-gamut space and test on target screens.
Use the harmony swatches: complementary for contrast, analogous for calm. Then build a lightness scale (shades/tints) for backgrounds, borders, and text tiers.