Color Picker & Palette
Pick colors and generate color palettes
Calculator
Preset Palettes
Color Harmony Types
- • Monochromatic: Single color with different lightness levels - safe and cohesive
- • Complementary: Opposite colors on the wheel - high contrast, vibrant
- • Triadic: Three colors equally spaced (120°) - balanced and colorful
- • Analogous: Adjacent colors (30°) - harmonious and pleasing
- • Split Complementary: Base + two adjacent to complement - softer contrast
Quick Colors
How to Use
Pick colors and create palettes
Pick a color
Use color wheel or enter values
View formats
See HEX, RGB, HSL values
Generate palette
Create complementary colors
Check contrast
Test accessibility compliance
Frequently Asked Questions
HEX (#FF5733), RGB (255, 87, 51), HSL (9°, 100%, 60%), RGBA/HSLA (with alpha). HEX is compact for web. RGB is intuitive for mixing. HSL is best for creating color variations. All can represent 16.7 million colors.
Methods: Complementary (opposite on color wheel), Analogous (adjacent colors), Triadic (three evenly spaced), Split-complementary (base + two adjacent to complement). Start with brand color and derive others mathematically.
WCAG requires 4.5:1 contrast ratio for normal text, 3:1 for large text. White text on light backgrounds fails. Check contrast with accessibility tools. Consider colorblind users - dont rely on color alone to convey information.
Use color theory: warm colors (red, orange) advance; cool colors (blue, green) recede. Limit palette to 3-5 colors. Use 60-30-10 rule: 60% dominant, 30% secondary, 10% accent. Test in actual use context.
Tech & Dev
Developer tools for JSON, encoding, and regex