Tailwind Scale

Your brand color becomes a full 50–950 scale. Click any swatch to copy. Step 500 is exactly your input.

Hover a step for WCAG contrast vs white/black and APCA Lc (W = vs white, B = vs black).

Closest Tailwind class

Enter any HEX to find the closest official Tailwind color.

bg-blue-600ΔE 0.002#2563EBNearest

bg-blue-500ΔE 0.012#3B82F6

bg-blue-700ΔE 0.016#1D4ED8

Cheat sheet50–100 large surfaces200–400 borders / icons500 primary / buttons600–700 hover / active800–950 headings / text

Example components

Buttons

Badges

100200500800outline

Monthly revenue

¥12,480+12.3%

68% of yearly goal

Open tickets

AAmyResolved2h

SSamActive5h

JJoePending1d

Inputs

Pro plan

¥99/mo

✓Project management
✓Priority support
✓Team collaboration

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F2F8FF',
          100: '#E7F1FF',
          200: '#CFE4FF',
          300: '#A9D0FF',
          400: '#69AEFF',
          500: '#0066FF',
          600: '#0032BE',
          700: '#00179C',
          800: '#00007C',
          900: '#000062',
          950: '#040045',
        },
      },
    },
  },
};

Self-contained values — paste and go. Regenerate here when the brand color changes.