Color Picker
#513DEB
Pick or Enter a Color
Royal Purple
Closest named color

Color Psychology & Meaning

Positive Associations
Negative Associations
Best for Industries
Avoid in Industries
Top Brands Using This Color
Famous global brands built on this color family

Tints, Shades & Tones

Build a complete scale of your color from light to dark. Click any swatch to copy its hex code.

Tints (Add White)
Shades (Add Black)
Tones (Add Gray)

Color Harmonies

Color combinations based on color theory rules. Use these for balanced, professional palettes.

Color Blindness Preview

See how your color appears to people with different types of color vision deficiency. ~8% of men and 0.5% of women are affected.

Contrast Against Common Colors

See how your color pairs with white, black, and common UI colors. Aim for AA (4.5:1) minimum.

Color Code Conversions

Your color in different formats. Click any value to copy to clipboard.

How to Use in Your Designs
Practical guide for UI/UX designers
01
Start with Psychology
Check the Emotion Guide to ensure your color matches your brand's message and industry expectations.
02
Build Your Scale
Use the Variations tab to create a 10-step scale. Use lighter tints for backgrounds and darker shades for text.
03
Pair with Harmonies
Use complementary colors for CTAs and accents. Analogous colors work well for backgrounds and gradients.
04
Test Accessibility
Check Vision and Contrast tabs. Your color must work for color blind users and pass WCAG contrast standards.
05
Apply 60-30-10 Rule
60% dominant (neutral background), 30% secondary (your brand color), 10% accent (CTAs and highlights).
06
Export & Use
Use the Conversion tab to get HEX, RGB, HSL, and CSS values. Paste directly into Figma, CSS, or design tools.
Pro Tip: Never use more than 2-3 main colors in a single design. Use variations (tints/shades) of the same color to add depth without making your design look chaotic.