Color Palette Generator
Create harmonious color palettes with contrast checking and multiple export formats
On This Page
Overview
The Color Palette Generator helps you create harmonious color palettes based on color theory principles. Start with any base color, choose a harmony type, and the tool generates a complete palette with shades and tints for each color. A built-in WCAG contrast checker ensures your color combinations meet accessibility standards.
Navigate to Color Palette Generator from the Branding Tools section or the top navigation bar. All processing happens in your browser - no data is sent to any server.
Choose a Base Color
Your base color is the foundation of the entire palette. Every harmony calculation starts from this color.
Color Picker: Click the color swatch to open an interactive color picker. Drag to select any hue, saturation, and lightness combination.
Hex Input: Type a hex color value directly (e.g.,
#3b82f6) for precise color selection.
The palette updates in real-time as you adjust the base color, so you can see the resulting harmonies instantly.
Select a Harmony Type
Choose from 6 color harmony types. Each applies a different color theory formula to generate complementary colors from your base:
Complementary
2 colors positioned opposite each other on the color wheel. Creates high contrast and visual impact.
Analogous
3 colors adjacent on the color wheel. Produces a harmonious, unified feel with low contrast.
Triadic
3 colors evenly spaced 120° apart on the color wheel. Offers vibrant variety while staying balanced.
Tetradic
4 colors forming a rectangle on the color wheel. Provides the most color variety for rich palettes.
Split Complementary
3 colors: the base plus 2 colors adjacent to its complement. High contrast with less tension than complementary.
Monochromatic
5 variations of the same hue at different saturation and lightness levels. Clean and cohesive.
Switch between harmony types to compare results. The palette regenerates instantly when you change the selection.
Explore Shades & Tints
For each color in your generated palette, an 11-stop scale is automatically created ranging from the lightest tint to the darkest shade:
11-Stop Scale
- Tints (lighter): The base color mixed with increasing amounts of white, creating lighter variations ideal for backgrounds and hover states.
- Base color: Your original color sits at the center of the scale.
- Shades (darker): The base color mixed with increasing amounts of black, creating darker variations for text, borders, and active states.
Click any swatch in the scale to copy its hex value to the clipboard. This gives you a complete range from light to dark for every color in your palette.
Check WCAG Contrast
The built-in WCAG contrast checker helps you verify that your color combinations meet accessibility requirements:
How to Check Contrast
- Select a text color (foreground) from the palette or enter a custom hex value.
- Select a background color from the palette or enter a custom hex value.
- The tool displays the contrast ratio between the two colors (e.g., 4.5:1).
- Compliance badges show whether the combination passes WCAG AA and WCAG AAA levels for both normal and large text.
A contrast ratio of at least 4.5:1 is required for WCAG AA (normal text) and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
Export Your Palette
Export your generated palette in 3 formats. Each includes the full palette with all shades and tints.
CSS Custom Properties
Export as CSS custom properties (--var) ready to drop into your stylesheet. Includes all palette colors, shades, and tints as named variables.
SCSS Variables
Export as Sass variables ($var format) for use in SCSS/Sass projects. Compatible with any Sass-based build pipeline.
JSON Design Tokens
Export as a structured JSON file containing all color values. Ideal for design token tools, style dictionaries, or custom build systems.
Each export includes a copy button for quick clipboard access and a download button to save the file locally.
Harmony Types
Understanding color harmony helps you choose the right palette for your project. Here is a detailed breakdown of each type:
Complementary
Uses 2 colors that sit directly opposite each other on the color wheel (180° apart). This creates the strongest contrast and is ideal for call-to-action elements, buttons, and areas where you want maximum visual impact. Use one color as the dominant and the other as an accent.
Analogous
Uses 3 colors that are adjacent on the color wheel. This produces a serene, comfortable design with minimal contrast. Best for creating a unified look where no single color dominates. Common in nature-inspired and editorial designs.
Triadic
Uses 3 colors evenly spaced at 120° intervals on the color wheel. Offers vibrant variety while maintaining visual balance. Works well when you need multiple distinct colors that still feel cohesive, such as in dashboards or data visualizations.
Tetradic
Uses 4 colors forming a rectangle on the color wheel (two complementary pairs). Provides the most color variety and is best for complex interfaces with many elements. Balance is key - let one color dominate and use the others as accents.
Split Complementary
Uses 3 colors: the base color plus the two colors adjacent to its complement. Provides high contrast similar to complementary but with less visual tension. A great choice when you want contrast without the boldness of a direct complement.
Monochromatic
Uses 5 variations of the same hue at different saturation and lightness levels. Creates a clean, elegant, and cohesive look. Ideal for minimalist designs, single-brand pages, or when you want a sophisticated, understated palette.
WCAG Compliance Levels
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with visual impairments:
Level AA
- Normal text: Minimum contrast ratio of 4.5:1
- Large text: Minimum contrast ratio of 3:1
- Large text is defined as 18pt (24px) or 14pt (18.66px) bold
This is the minimum recommended level for most web content.
Level AAA
- Normal text: Minimum contrast ratio of 7:1
- Large text: Minimum contrast ratio of 4.5:1
- Provides enhanced accessibility for users with low vision
The highest level of compliance, recommended for critical content.
Tips & Best Practices
Start with your brand's primary color as the base to ensure the generated palette aligns with your identity.
Use the complementary harmony for high-impact designs like landing pages and call-to-action sections.
Analogous palettes work best for content-heavy pages where a calm, unified feel is important.
Always check contrast ratios before finalizing your palette - aim for WCAG AA at minimum for body text.
The monochromatic harmony is ideal for minimalist designs or when you want a single-brand color to dominate.
Use lighter tints for backgrounds and hover states, and darker shades for text and active states.
Export as JSON design tokens if you use tools like Style Dictionary or Figma Tokens for your workflow.
Test your palette in both light and dark contexts to ensure versatility across different themes.