🎨Tint & Shade Palette Generator

Generate a 10-step tint and shade palette from any base color

How to Use the Tint & Shade Palette Generator

Pick a base color using the color picker or type a HEX code directly. The tool instantly generates 5 tints (lighter variants) and 5 shades (darker variants) by mixing your base color with white or black at 20% increments. Click any swatch to copy its HEX code.

T20 means 20% white is blended into the base color; T100 is pure white. S20 means 20% black is blended in; S100 is pure black. Use tints for hover states, backgrounds, and disabled elements. Use shades for pressed states, borders, and text on light surfaces.

This palette format is compatible with Tailwind CSS custom colors (100–900 scale), Material Design color systems, and Figma color styles. Simply map T20–T80 to lighter steps and S20–S80 to darker steps.

Frequently Asked Questions

What is the difference between a tint and a shade?

A tint mixes the base color with white to make it lighter. A shade mixes it with black to make it darker. T20 = 20% white added; S40 = 40% black added.

How do I copy a HEX code?

Click any color swatch and its HEX code is instantly copied to your clipboard. No selection needed.

Can I input RGB or HSL instead of HEX?

Currently only HEX (#RRGGBB) input is supported. Convert RGB or HSL to HEX using an online converter first.