Can I use these colors in Tailwind CSS?

Yes. The generated 50-950 scale directly maps to Tailwind CSS's default color palette structure.

Updated: August 2026 • Verified v1.2

Hex Color Shades & Tints Palette Generator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

Color Mixing: Tint = Color * (1 - w) + White * w; Shade = Color * (1 - w) + Black * w

Was this calculation helpful?

Understanding Your Results

Calculates 9 tints (10% to 90% white mix), 9 shades (10% to 90% black mix), and an 11-step Tailwind CSS design palette (50, 100, 200, ..., 950) with 1-click hex copy.

Practical Guidance & Next Steps

Tints are ideal for hover states and subtle backgrounds; shades provide contrast for text and active borders.

What is this?

A visual design system utility that generates monochromatic color scales, tints, and shades from a base hex color.

How does it work?

1. Pick or enter any base hex color. 2. View generated Tailwind 50-950 palette, tints (+ white), and shades (+ black). 3. Click any color swatch to copy its hex code to clipboard.