Color Palette Generator

The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the visual difference between text color and its background. A ratio of 4.5:1 is required for AA compliance on normal text, and 3:1 for large text. AAA requires 7:1 for normal text. This ensures users with low vision or color blindness can read your content — and failing these standards can make your site inaccessible and expose you to legal liability in some regions.

Color harmonies are based on the position of colors on the color wheel: Analogous uses adjacent colors (natural, professional); Complementary uses opposite colors (high contrast, energetic); Triadic uses three evenly spaced colors (vibrant, dynamic); Monochromatic uses variations of one hue (cohesive, minimal). For UI design, monochromatic and analogous tend to work best, while complementary and triadic are ideal for marketing and creative projects.

Click Export in the toolbar or switch to the Export tab on the right panel. Select "Tailwind" format and copy the generated configuration object. Paste it inside the colors object in your tailwind.config.js file. The export includes 5 semantic colors (primary, secondary, accent, neutral, highlight) plus all 10 shades (50–950) for each, ready to use as Tailwind utility classes.

The colorblind simulation tab applies mathematical color transformation matrices to your palette colors to simulate how they appear to users with different types of color vision deficiency. We simulate Deuteranopia (red-green, most common), Protanopia (red blind), Tritanopia (blue-yellow), Achromatopsia (full color blindness), and partial variants. This helps you identify problematic color combinations before publishing.

Yes! Use the Image Color Extraction section on the left panel. Upload any image (PNG, JPG, WebP) and the tool samples the image at multiple points to extract the dominant colors. This works great for matching a palette to a brand logo, product photography, or any visual reference. The extracted colors become your new palette base.

Figma tokens (also called design tokens) are a structured JSON format that defines your colors with semantic naming. The Figma format export produces a JSON file compatible with the Figma Tokens plugin, allowing you to sync your palette directly into Figma. This keeps your design tool and codebase in sync. The JSON also works with Style Dictionary for multi-platform token generation.