Color Tools

Color Picker & Palette Generator

Pick any base color and generate tints, shades, complementary, analogous, and triadic color palettes.

Base Color

Click any swatch to copy its hex code.

About this tool

Color palettes are the foundation of visual design. A tints-and-shades palette gives you a range of lighter and darker versions of your base color for use as backgrounds, borders, and highlights. Complementary colors are opposite on the color wheel and create high contrast. Analogous colors are adjacent on the wheel and create harmonious, low-contrast combinations. Triadic schemes use three evenly-spaced hues for a balanced, vibrant palette.

Frequently asked questions

What is the difference between a tint and a shade?

A tint is a color mixed with white, producing a lighter version. A shade is a color mixed with black, producing a darker version. A tone is a color mixed with gray. Design systems typically define a scale of tints and shades for each brand color to use consistently across components.

Related tools