Color Palette Generator
Generate beautiful, accessible color palettes with WCAG contrast checking
📤 Share this tool
📖 Learn More About Color Palette Generator
Color Palette Generator — WCAG Accessible Color Schemes
Generate beautiful, harmonious color palettes from any base color. Choose from 6 harmony types and instantly see WCAG contrast ratios for accessibility compliance. Export as CSS variables or Tailwind config with one click.
6 Color Harmony Types Explained
- Complementary — Opposite colors on the wheel, maximum contrast. Best for call-to-action buttons and highlights.
- Analogous — Adjacent colors (±30–60°). Harmonious, soothing palettes for backgrounds and content areas.
- Triadic — Three equidistant colors. Vibrant and balanced; popular in playful or creative brand identities.
- Split-Complementary — A softer alternative to complementary. High contrast but less jarring.
- Tetradic — Four colors forming a rectangle. Maximum variety; use one as dominant.
- Monochromatic — Shades and tints of one hue. Elegant and unified; excellent for minimalist UI design.
WCAG Accessibility Guide
- AA Normal Text — Minimum 4.5:1 contrast ratio (required for body text)
- AA Large Text — Minimum 3:1 contrast ratio (18pt+ or 14pt bold)
- AAA — 7:1 contrast ratio (recommended for maximum accessibility)
The green "W" and "B" badges show whether each color passes WCAG AA against white or black backgrounds. Always check contrast before using a color for text or interactive elements.
How to Use This Tool
- Pick your brand or base color using the color picker or type a HEX code
- Choose a harmony type from the dropdown
- Review the 5-color palette and their contrast badges
- Click any HEX value to copy it, or export the full palette as CSS or Tailwind config
Frequently Asked Questions
What is a complementary color?
Complementary colors are pairs of colors that sit opposite each other on the color wheel. They create high contrast and vibrant looks when used together. For example, blue (#6366F1) and orange-yellow are complementary.
How do I pick colors for my website?
Start with your brand color as the base. Use the palette generator to find harmonious colors. For web design: use your primary color for CTAs, secondary colors for accents, and ensure text has sufficient contrast (WCAG AA minimum 4.5:1 for normal text).
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text readability. AA normal text requires 4.5:1, AA large text (18pt+) requires 3:1, and AAA requires 7:1. This tool shows pass/fail for each color against white and black backgrounds.
What are analogous colors?
Analogous colors are groups of three colors that are next to each other on the color wheel. They create serene and comfortable designs because they match well naturally. Great for creating subtle, cohesive color schemes.
What is a triadic color palette?
Triadic palettes use three colors equally spaced around the color wheel (120° apart). For example, red, yellow, and blue. They're vibrant and offer high contrast while retaining color harmony. Best used when you want a balanced, energetic design.
What is a monochromatic color scheme?
Monochromatic schemes use variations of a single hue — different shades, tints, and tones. For example, light blue, medium blue, and dark blue. They create elegant, unified designs with less visual tension. Excellent for minimalist UIs.
What is a split-complementary palette?
Split-complementary uses one base color and the two colors adjacent to its complement. For example, blue with yellow-orange and red-orange. It offers the same high-contrast impact as complementary colors but with less visual tension — a safer choice for beginners.
What is a tetradic (rectangle) color scheme?
Tetradic schemes use four colors arranged in two complementary pairs, forming a rectangle on the color wheel. They offer the most color variety but can be hard to balance. It works best when one color dominates and the others serve as accents.
How do I export colors to CSS or Tailwind?
Click 'Copy CSS' to get a :root block with CSS custom properties (--color-1, --color-2, etc.), ready to paste into your stylesheet. Click 'Copy Tailwind' to get a colors config block for your tailwind.config.js file.
What do the W and B contrast badges mean?
W shows the contrast ratio against a white background, and B shows the contrast ratio against a black background. A green badge means it meets WCAG AA (4.5:1 for normal text). An AAA badge means it meets the stricter 7:1 requirement.