Tints & Shades

WCAG Contrast Check

Check if your palette colors meet accessibility standards.

Color Harmony Explained

Complementary

Colors opposite on the wheel. High contrast, vibrant. Great for CTAs and highlighting key elements.

Analogous

Colors next to each other. Harmonious and serene. Perfect for backgrounds and creating cohesive feels.

Triadic

Three evenly spaced colors. Vibrant and balanced. Used by many well-known brands for visual richness.

Tetradic

Four colors in two complementary pairs. Rich palettes for complex designs. Requires careful balancing.

How to Use ColorCraft

Pick a base color using the color wheel or enter a hex/HSL/RGB value.
Select a harmony type: complementary, triadic, analogous, split-complementary, or tetradic.
Browse the generated palette and click any swatch to copy its code.
Export the palette as CSS variables, Tailwind config, or a downloadable .ase file.

Why Use a Color Palette Generator

Choosing colors for a website, app, or brand is harder than it looks. Random color picking leads to clashing combinations that feel unprofessional. ColorCraft uses color theory principles — complementary contrast, analogous harmony, triadic balance — to generate palettes that work together visually.

The tool also checks WCAG accessibility contrast ratios so you know whether your text-on-background combinations are readable for users with visual impairments. The direct CSS and Tailwind export means you can drop the palette straight into your project without manual reformatting.

Frequently Asked Questions

What color formats does it output?
Hex (#ff6b35), RGB (rgb(255,107,53)), HSL (hsl(18,100%,60%)), and CSS custom properties. Tailwind and Adobe ASE export are also available.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for AAA compliance.
What is a complementary color scheme?
Complementary colors sit opposite each other on the color wheel (e.g., blue and orange). They create strong contrast and visual energy, making them good for call-to-action elements.