Color Picker
Pick a color visually, copy its codes in every format, and preview its shades and tints.
Using shades and tints in design
A professional interface rarely uses a single flat color — it uses the same hue at different lightness levels: darker for hover states, lighter for backgrounds and borders. The strip above generates exactly that scale from your picked color, from near-black shades to near-white tints. Click any swatch to copy its code.
Frequently asked questions
What is the difference between a shade and a tint?
A shade mixes the color with black (darker), a tint mixes it with white (lighter). Both keep the hue the same — that is why the scale looks harmonious.
Does the picker work on mobile?
Yes — tapping the color square opens your system color picker, which on most phones also includes an eyedropper that can grab colors from photos.