Hex Color Picker with Shades
Pick a color, get a full tint and shade palette, harmony colors, contrast ratios and one-click copy. Everything runs in your browser.
Pick your color
#
#6D28D9
Quick palette
Shades palette — click any swatch to copy its hex
Tints (mixed toward white)
Shades (mixed toward black)
Color harmonies
Complementary (180°)
Triadic (±120°)
Analogous (±30°)
Each harmony swatch also shows its contrast ratio against white and black so you can pick readable combinations.
How to use
- Choose a color with the picker or type a hex code in the text field.
- Browse the 10-step tints and 10-step shades palette — click any swatch to copy its hex code.
- Check the complementary, triadic and analogous harmonies for colors that go well together.
- Use the contrast ratios on each swatch to make sure text on the color stays readable.
Tips
- A contrast ratio of 4.5 or higher against the background text color is the standard accessibility target.
- Use darker shades for backgrounds behind light text and lighter tints for backgrounds behind dark text.
- Analogous colors look calm and natural; complementary colors create strong, energetic contrast.
Copied