Generate beautiful color palettes using color harmony rules — complementary, analogous, triadic, split-complementary, and monochromatic. Pick any color with hex, RGB, and HSL output ready for CSS, Tailwind, and design systems. Check WCAG accessibility contrast ratios for text readability. Built for designers and developers who need precise color codes. All processing runs in your browser.
color-picker.tool
rgb(0,208,132) · hsl(158,100%,41%)
Sample Text
—
Frequently Asked Questions
How do I create a color palette for my website?
Start with your brand's primary color, then use color harmony rules to generate a cohesive palette. Complementary colors (opposite on the color wheel) create high contrast. Analogous colors (adjacent) feel harmonious. Triadic (evenly spaced by 120°) offers balanced vibrancy. Limit your palette to 4–6 colors: one primary, one secondary, one accent, plus neutral tones for text and backgrounds.
How do I check color accessibility for WCAG compliance?
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 3:1 for large text. Level AAA requires 7:1 for normal text. Use the contrast checker above — enter your text and background colors to see the ratio and compliance level. This matters for accessibility and is increasingly important for SEO in 2026, as Google factors user experience into rankings.
What are complementary colors?
Complementary colors sit opposite each other on the color wheel — red & cyan, blue & orange, green & magenta. They create maximum contrast and visual tension, making them perfect for call-to-action buttons against backgrounds. Use them sparingly: one as the dominant color and the complement as an accent.
What is color harmony in design?
Color harmony refers to aesthetically pleasing color combinations based on their positions on the color wheel. The main harmonies are: complementary (opposite), analogous (adjacent), triadic (120° apart), split-complementary (one color + two adjacent to its complement), and monochromatic (variations of one hue). These mathematical relationships produce palettes that feel naturally balanced.
Which color format should I use in CSS?
All formats are valid in modern CSS. Hex (#00d084) is the most compact. RGB/RGBA is best when you need alpha transparency. HSL is the most intuitive for creating variations — you can easily adjust lightness for hover states or saturation for muted variants. CSS 2026 also supports oklch() and color() for wider gamut displays.