What are color tints and shades?

Tints are created by mixing a base hue with white (lighter values 50-400), while shades mix with black (darker values 600-950).

Can I use this palette in Tailwind CSS?

Yes, copy the generated JSON config directly into your tailwind.config.js colors object.

How does this tool calculate step 500?

Step 500 represents your original base color, ensuring brand hue consistency.

Are contrast levels calculated?

Yes, text labels dynamically adapt between black and white for optimal readability.

Is there any server requirement?

No, all color math runs in pure client JavaScript.

Color Shades & Tints Generator

Generate complete 11-step shade and tint ramps (50 to 950) for any base hex color with CSS variables and Tailwind exports.

100% free
Private in browser
No signup
No watermarks

Choose Base Color

Color Palette Scale (50 to 950)

#EBF3FE

100

#D8E6FD

200

#B1CDFB

300

#89B4FA

400

#629BF8

500Base

#3B82F6

600

#326FD1

700

#295BAC

800

#204887

900

#183462

950

#0F213E

CSS Custom Properties

:root {
  --color-primary-50: #ebf3fe;
  --color-primary-100: #d8e6fd;
  --color-primary-200: #b1cdfb;
  --color-primary-300: #89b4fa;
  --color-primary-400: #629bf8;
  --color-primary-500: #3b82f6;
  --color-primary-600: #326fd1;
  --color-primary-700: #295bac;
  --color-primary-800: #204887;
  --color-primary-900: #183462;
  --color-primary-950: #0f213e;
}

Tailwind CSS Palette

{
  "customColor": {
    "50": "#ebf3fe",
    "100": "#d8e6fd",
    "200": "#b1cdfb",
    "300": "#89b4fa",
    "400": "#629bf8",
    "500": "#3b82f6",
    "600": "#326fd1",
    "700": "#295bac",
    "800": "#204887",
    "900": "#183462",
    "950": "#0f213e"
  }
}

Rate this tool

Be the first to rate — helps others and improves this page.

About Color Shades & Tints Generator

Generate complete 11-step shade and tint ramps (50 to 950) for any base hex color with CSS variables and Tailwind exports. Use this free client-side tool on TheToolss with zero installation and complete privacy.

How to use Color Shades & Tints Generator

Pick or enter your primary brand hex color
Click any swatch to copy individual hex codes
Copy the full CSS variables snippet or Tailwind config
Paste directly into your design system or stylesheet

Key features

11-step tint and shade ramp (50 to 950)
Instant hex to clipboard on swatch click
Ready-to-use CSS Variables & Tailwind config
Calculates luminance for text readability

Frequently asked questions

What are color tints and shades?: Tints are created by mixing a base hue with white (lighter values 50-400), while shades mix with black (darker values 600-950).
Can I use this palette in Tailwind CSS?: Yes, copy the generated JSON config directly into your tailwind.config.js colors object.
How does this tool calculate step 500?: Step 500 represents your original base color, ensuring brand hue consistency.
Are contrast levels calculated?: Yes, text labels dynamically adapt between black and white for optimal readability.
Is there any server requirement?: No, all color math runs in pure client JavaScript.