Tints & Shades Generator

Generate a full tint and shade scale from any color, Tailwind style.

Base color

Steps

Color name

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  theme: {
    extend: {
      colors: {
        brand: {
                  "50": "#d8e9ff",
                  "100": "#cbdbff",
                  "200": "#b8c6ff",
                  "300": "#9ba8ff",
                  "400": "#7d86ff",
                  "500": "#6366f1",
                  "600": "#4946c8",
                  "700": "#3326a2",
                  "800": "#20007d",
                  "900": "#13005a",
                  "950": "#0f0046"
        },
      },
    },
  },
} satisfies Config

Loading tool...

What is Tints & Shades Generator?

Drop in a base color and get a complete perceptual scale (50-950, 100-900, or 100-900 odd). Click to copy any swatch, or export to Tailwind config, CSS variables, or JSON.

Frequently asked questions

+How is the scale calculated?

Each step interpolates lightness in the OKLCH color space around your base, with mild chroma falloff at the extremes. This produces visually uniform scales that HSL-based generators can't match.

+Can I export to Tailwind?

Yes — there's a dedicated export tab that produces a ready-to-use tailwind.config.ts fragment.

+What does the 500 step represent?

By convention, 500 is your base color. Values below go lighter (tints), above go darker (shades).

Related tools

Color Converter

Convert HEX, RGB, HSL, OKLCH, HSV, and CMYK in real time.

utilitiesTry it →

Advanced Color Picker

Full-featured color picker with HSV canvas and live formats.

utilitiesTry it →

CSS Gradient Generator

Build linear, radial, and conic gradients with live CSS.

utilitiesTry it →