Color Palette & Contrast Checker
Generate a harmonious color palette from any base color, copy it as CSS variables, a Tailwind block, or hex, download a PNG swatch sheet, and check WCAG contrast for accessibility.
Interactive Client Prototype Sandbox
Contrast Ratio: 21.00 : 1
This is a dynamic mockup preview of compliance text.
Disclaimer: This free tool is provided “as is,” without warranties of any kind, and is for general informational purposes only — not professional, legal, financial, medical, tax, or engineering advice. Results may contain errors; verify anything important independently and use at your own risk. We accept no liability for any loss or damage arising from its use. See our Terms of Use for details.
Step-by-Step Guide
Pick a base color (picker or hex) and a harmony rule to build a palette. Copy it as CSS, Tailwind, or hex, download a PNG, or share the link. Use the contrast checker to confirm a text/background pair meets WCAG AA for regular and large text.
Base '#4f46e5', triadic ➔ a five-color palette you can copy as CSS variables or download as a PNG.
Who it's for
Web design specialists, brand experts, software frontend developers, and writers designing presentations.
Core Features
- Five-color palette from a harmony rule (complementary, analogous, triadic, monochromatic), with a tint/shade ramp under each swatch.
- Export as CSS variables, a Tailwind colors block, all hex at once, or a downloadable PNG swatch sheet.
- Shareable URL that reopens the exact palette (?base=&harmony=).
- WCAG 2.1 contrast checker with Pass/Fail for normal and large text; copy any color as HEX or RGB.
🛡️ No tracking — your inputs, keys, and details never leave this client sandbox.
How do I build a matching color palette?
Pick a base color with the picker or by typing a hex code, then choose a harmony rule — complementary, analogous, triadic, or monochromatic. The tool rotates the hue and adjusts lightness to generate a coordinated five-color palette automatically.
What is a good contrast ratio for accessibility?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Enter a text and background color and the contrast checker shows the exact ratio and whether each threshold passes or fails.
Can I export the palette to CSS or Tailwind?
Yes. Copy the palette as CSS custom properties (variables), as a Tailwind color block, or as plain hex values. You can also download the swatches as a PNG or copy a shareable link that restores the exact palette.
What's the difference between the harmony rules?
Complementary uses the opposite hue for high contrast; analogous uses neighboring hues for a calm, related look; triadic spreads three evenly spaced hues for balanced variety; and monochromatic varies the lightness of a single hue. Switch between them to see which fits your design.
What WCAG contrast ratio do I need for text to be accessible?
WCAG 2.1 (Web Content Accessibility Guidelines) defines two levels: AA (minimum) requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. These ratios are computed from the relative luminance of the foreground and background colors. Most accessibility audits check for AA compliance as the baseline.
How is the contrast ratio calculated?
The WCAG contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance converts sRGB values to a linear light scale: each channel (R, G, B) is linearized and then combined as L = 0.2126R + 0.7152G + 0.0722B — weighted because the human eye is most sensitive to green, less to red, and least to blue. The result ranges from 1:1 (same color, no contrast) to 21:1 (black on white, maximum contrast).
Three things that trip designers up when building color palettes
Color palette decisions look intuitive but regularly produce results that surprise their creators — colors that clash on screen, text that fails accessibility checks, or a palette that looks coherent in isolation but wrong when applied to a real UI. Understanding the three most common points of failure helps designers avoid them before they appear in a live product.
Myth vs. reality: complementary colors always look good together
The first misconception is that color harmony rules are prescriptive — that a complementary palette automatically produces a good design. Harmony rules describe hue relationships, not relative proportions. A complementary pair of blue and orange looks balanced only when one dominates and the other accents; at equal proportions they compete and vibrate visually. In practice, the dominant hue should occupy 60–70% of the space, the secondary 20–30%, and an accent 5–10%. This is the 60-30-10 rule, and it applies regardless of which harmony model generated the palette.
WCAG accessibility and contrast — where palettes fail in practice
The second problem is that a palette that looks fine in a design mockup fails accessibility checks when applied to real UI components. The WCAG contrast ratio requirement (4.5:1 for normal text, 3:1 for large text at AA level) is calculated from relative luminance — a perceptual measure, not a visual comparison. Colors that appear very different in hue but have similar lightness (like certain shades of red and green) can have insufficient contrast, which is particularly problematic for users with color vision deficiency. Always check text-on-background pairs with the contrast checker before finalizing a palette, not after.
CSS custom properties and design tokens
The third common mistake is exporting palette colors as one-off hex values and hardcoding them throughout a codebase. CSS custom properties (--color-primary: #4f46e5) make palette changes propagate everywhere they are referenced. Design tokens are the standardized way modern design systems (Tailwind CSS, Material Design, IBM Carbon) distribute color values across components — a single token update flows through the entire product. The Tailwind output format generates a colors: { } block compatible with tailwind.config.js for teams using the Tailwind utility framework. Treating your palette as tokens from the start saves significant refactoring time later.