Color Palette Generator
Pick a base color and generate tints, shades, complementary pairs, analogous sets, and a full color scale.
Base Color
Palette Type
Generated Palette
Color Scale (100–900)
About this tool
Generate professional color palettes from any HEX color. Choose from five palette types: tints (lighter variations), shades (darker variations), complementary (opposite hue), analogous (adjacent hues), or triadic (three equally-spaced hues). Also generates a full 100–900 color scale like those used in Tailwind CSS and Material Design.
How to use it
Quick steps to get the most out of this utility.
- 1
Choose a base color
Use the color picker or type a hex value like #3b82f6.
- 2
Select a palette type
Try tints for lighter variations, shades for darker ones, or a harmony type.
- 3
Copy any swatch
Click the copy button under any color to get its hex code.
- 4
Use the color scale
The 100–900 scale at the bottom gives you a full range for a design system.
Choosing the right color harmony
- Tints/shades: Use for building a monochromatic scale — one color at multiple lightness levels for UI hierarchy.
- Complementary: Use for high-contrast CTAs or accent colors that pop against a primary color.
- Analogous: Use for calm, cohesive interfaces — backgrounds, illustrations, or data visualizations.
- Triadic: Use for vibrant, balanced designs where three distinct brand colors need to coexist.
Frequently asked questions
What is a color palette?+
A color palette is a curated set of colors designed to work harmoniously together. In design and branding, a palette typically includes a primary color, accent colors, neutrals, and tints/shades that create visual consistency across a product.
What are tints and shades?+
Tints are created by mixing a color with white, making it lighter. Shades are created by mixing with black, making it darker. A color scale (100–900) provides a full range from very light tints to very dark shades.
What is a complementary color?+
A complementary color sits directly opposite on the color wheel (180° away in hue). Complementary pairs create high contrast and visual energy — for example, blue and orange, or red and green.
What are analogous colors?+
Analogous colors are adjacent on the color wheel (typically ±30°). They create harmonious, low-contrast combinations often seen in nature — like yellow, yellow-green, and green.
What are triadic colors?+
Triadic colors are three colors equally spaced around the color wheel (120° apart). They provide strong visual contrast while remaining balanced — for example, red, blue, and yellow.
Keep exploring
More utilities and reading from Toolisk.