What is step 500 in the color scale?

Step 500 represents your base primary color. Steps below 500 are lighter tints, and steps above 500 are darker shades.

Are the text labels readable on every swatch?

Yes. The algorithm evaluates relative luminance and dynamically switches text labels between black and white to guarantee high-contrast legibility.

Design & CSS

Color Tint & Shade Scale Builder

The problem: Designers often provide a single primary brand HEX code, leaving developers to guess tints for hover states and dark shades for borders.

ASG Privacy VerifiedVerified

100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.

ASG Privacy VerifiedVerified

100% In-Browser Execution. Zero server uploads. Your data never leaves this tab — disconnect your internet and the tool keeps working.

Base Color (Step 500)

Presets:

11-Step Tailwind Palette (Click any swatch to copy HEX)

tailwind.config.js Export

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        custom: {
        '50': '#f3fbfe',
        '100': '#e7f6fd',
        '200': '#c3e9fa',
        '300': '#9fdbf6',
        '400': '#7acef3',
        '500': '#0ea5e9',
        '600': '#0c8cc6',
        '700': '#0a73a3',
        '800': '#085b80',
        '900': '#06425d',
        '950': '#04293a'
}
      }
    }
  }
};

CSS Custom Properties (:root)

:root {
  --color-custom-50: #f3fbfe;
  --color-custom-100: #e7f6fd;
  --color-custom-200: #c3e9fa;
  --color-custom-300: #9fdbf6;
  --color-custom-400: #7acef3;
  --color-custom-500: #0ea5e9;
  --color-custom-600: #0c8cc6;
  --color-custom-700: #0a73a3;
  --color-custom-800: #085b80;
  --color-custom-900: #06425d;
  --color-custom-950: #04293a;
}

Color Tint & Shade Scale Builder: the complete guide

A Color Tint and Shade Scale Builder generates comprehensive 11-step color palettes (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) from any single brand hex color code. Design system architects building Tailwind CSS configurations or CSS custom property tokens require cohesive palettes for hover states, surface backgrounds, borders, and active rings. This tool computes mathematically balanced tints toward white and shades toward black with 1-click hex copying and config exports.

Tints vs. Shades in Digital Color Theory

In classical color theory, a 'tint' is produced by lightening a pure hue by mixing it with white, whereas a 'shade' is produced by darkening a hue with black. In digital design systems, step 500 serves as the primary anchor color; steps 50 through 400 interpolate toward white for light card backgrounds and subtle borders; and steps 600 through 950 interpolate toward black for dark mode contrast and typography.

Tailwind CSS Theme Token Alignment

Tailwind CSS standardizes color scales across 11 discrete steps. Exporting your brand color as a standardized object allows seamless utility usage such as `bg-custom-100`, `text-custom-700`, or `border-custom-300`, ensuring consistency across engineering and design teams.

Step by step: how to use Tint & Shade Scale

1
Select your brand color using the visual color picker or type a 6-digit HEX code.
2
Or click a popular preset color swatch (ASG Sky, Indigo, Emerald, Rose, Amber).
3
Inspect the generated 11-step palette grid from 50 (lightest) to 950 (darkest).
4
Click any swatch card to copy its individual HEX color code to your clipboard.
5
Copy the complete `tailwind.config.js` snippet or CSS custom properties block.

Security & privacy

Color interpolation runs locally using pure RGB and HSL mathematical transformations in your browser tab. No brand colors or design files are uploaded.