colorPaletteFinder is built on classic color theory principles combined with modern digital design requirements. We’ve designed a seamless interface where you don’t need to manually calculate hues or verify contrast ratios — the tool does the heavy lifting for you.
1. The Interactive Color Wheel
At the core of colorPaletteFinder is the interactive HSL Color Wheel. Unlike standard rectangular color pickers, our circular color wheel maps directly to color theory dynamics.
- Hue (The angle): Drag the dot around the outer edge to change the fundamental color family (red, blue, green, etc.).
- Saturation (Distance from center): Drag the dot towards the center to make the color grayish and muted, or towards the edge for maximum vibrancy.
- Lightness: Adjusted dynamically to assure that generated harmony colors retain a balanced visual weight.
Move the primary color dot, and watch all the dependent harmony colors instantly adapt in real-time, maintaining their strict mathematical relationships.
2. Choosing a Harmony Rule
Depending on the aesthetic you are trying to achieve, you can select from seven different mathematically proven color harmony rules:
Complementary
Colors located directly opposite each other on the color wheel (180° apart). Creates maximum contrast and high-impact energy.
Analogous
Colors that sit next to each other on the wheel (separated by 30°). This creates a serene and comfortable, natural-looking design.
Triadic
Three colors that are equally spaced around the wheel (120° apart). Offers high contrast while retaining better color balance than complementary schemes.
Split-Complementary
A base color, plus the two colors adjacent to its complement. Offers the strong visual contrast of the complementary scheme, but requires less tension.
Monochromatic
Variations in lightness and saturation of a single hue. Produces a cohesive, clean, and elegant look.
3. WCAG Contrast Checking
Creating a beautiful palette is only half the job; the colors must also be accessible to all users. Specifically, text must be readable against background colors.
colorPaletteFinder features a built-in contrast checker at the bottom of the tool. Select any two generated colors (e.g., a background and a text color), and it calculates the contrast ratio.
- AA Standard: Requires a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text.
- AAA Standard: The gold standard for accessibility, requiring a ratio of at least 7:1 for normal text.
4. Copying and Exporting
Once your perfect palette is generated, integrating it into your project is effortless.
Hover over any color swatch in the palette strip to reveal its exact HEX code. Clicking the swatch instantly copies the six-digit HEX code to your clipboard (e.g., #1A2B3C), ready to be pasted directly into CSS, Tailwind configs, Figma, or Adobe Creative Cloud.