Color Palette Generator
Enter a base hex color to generate tints, shades, complementary colors, and full harmony palettes instantly.
Understanding Color Palettes
A well-designed color palette gives your project visual consistency. Rather than picking colors at random, use these proven approaches to build harmonious schemes.
Tints and Shades
A tint is a color mixed with white — it raises the lightness value in HSL. A shade is a color mixed with black — it lowers the lightness. Generating 5–9 tint/shade steps from a single base color gives you a complete, scalable palette for use in UI components (buttons, backgrounds, borders, text).
Complementary Colors
A complementary color sits directly opposite your base color on the color wheel, 180° away in the HSL hue space. Complementary pairs create maximum contrast and are commonly used for call-to-action buttons against a brand background color.
Analogous Colors
Analogous colors sit adjacent on the color wheel (typically ±30° to ±60° from the base hue). They are naturally harmonious because they share a common undertone. Analogous palettes are excellent for backgrounds, gradients, and subtle UI variations.
Triadic Colors
A triadic palette uses three colors equally spaced around the color wheel (120° apart). Triadic schemes are vibrant and offer strong visual interest while remaining balanced — useful for bold branding and illustration work.
How to Use This in Your Project
Pick your primary brand color first, then use the tint/shade steps for UI hierarchy (dark for headings, mid for body text, light for backgrounds). Use the complementary color for highlights and CTAs. Use analogous colors for secondary content areas or gradient elements. Save the triadic colors for accent icons, tags, and badges.