Color Shades Generator Free Online Tool 2026

Last updated March 22, 2026

Color Shades Generator Examples

The Color Shades Generator creates a complete tonal scale from any base color. Below are examples of generated shade palettes and how to use them in CSS and Tailwind projects.

Blue Palette — Generated from #3b82f6

A full 50–950 tonal scale:

--blue-50:  #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6;   /* base color */
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
--blue-950: #172554;

Green Brand Color — Generated from #16a34a

--green-50:  #f0fdf4;
--green-100: #dcfce7;
--green-200: #bbf7d0;
--green-300: #86efac;
--green-400: #4ade80;
--green-500: #22c55e;
--green-600: #16a34a;   /* base color */
--green-700: #15803d;
--green-800: #166534;
--green-900: #14532d;
--green-950: #052e16;

Using Shades as CSS Custom Properties

Paste the generated values into your root selector:

:root {
  --brand-50:  #fdf4ff;
  --brand-100: #fae8ff;
  --brand-200: #f5d0fe;
  --brand-300: #e879f9;
  --brand-400: #d946ef;
  --brand-500: #a855f7;   /* primary brand */
  --brand-600: #9333ea;
  --brand-700: #7e22ce;
  --brand-800: #6b21a8;
  --brand-900: #581c87;
  --brand-950: #3b0764;
}

.btn-primary {
  background-color: var(--brand-600);
  color: white;
}

.btn-primary:hover {
  background-color: var(--brand-700);
}

.card-bg {
  background-color: var(--brand-50);
  border: 1px solid var(--brand-200);
}

Tailwind CSS Config Integration

Add your custom brand shades to tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#fdf4ff',
          100: '#fae8ff',
          200: '#f5d0fe',
          300: '#e879f9',
          400: '#d946ef',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
          800: '#6b21a8',
          900: '#581c87',
          950: '#3b0764',
        },
      },
    },
  },
};

Now use standard Tailwind utilities with your brand color:

<button class="bg-brand-600 hover:bg-brand-700 text-white px-4 py-2 rounded">
  Get Started
</button>

<div class="bg-brand-50 border border-brand-200 rounded-lg p-4">
  Info card
</div>

Shade Usage Guide

• 50–100: Page backgrounds, subtle highlights, card backgrounds
• 200–300: Borders, dividers, input outlines
• 400–500: Icons, secondary elements, badges
• 600: Primary buttons, links, active states
• 700: Hover states for primary elements
• 800–900: Dark text on light backgrounds, headings
• 950: Maximum contrast text, dark mode backgrounds

Accessibility — Contrast Ratios

The generator shows contrast ratios for each shade against white and black:

Shade   vs White   vs Black   Use for text?
50      1.05:1     19.8:1     No (too light for text)
100     1.12:1     18.7:1     No
200     1.35:1     15.5:1     No
300     1.89:1     11.1:1     No
400     2.85:1     7.36:1     No (fails WCAG AA on white)
500     4.52:1     4.64:1     Borderline (passes AA large text)
600     5.91:1     3.55:1     Yes (passes WCAG AA on white)
700     8.23:1     2.55:1     Yes (passes WCAG AAA on white)
800     11.4:1     1.84:1     Yes (passes WCAG AAA on white)
900     14.7:1     1.43:1     Yes
950     18.2:1     1.15:1     Yes

Dark Mode Shade Mapping

/* Light mode */
.card { background: var(--brand-50); color: var(--brand-900); }

/* Dark mode — invert the scale */
@media (prefers-color-scheme: dark) {
  .card { background: var(--brand-900); color: var(--brand-100); }
}

Common Use Cases

• Building a custom design system with systematic brand colors
• Extending Tailwind CSS with brand-specific color scales
• Creating consistent hover and active state colors
• Generating accessible text and background color pairs
• Designing dark mode color mappings from a single base color
• Producing design tokens for Figma or Storybook

Enter any hex, RGB, or HSL color to instantly generate a complete 11-step tonal palette with contrast ratios and ready-to-use CSS output.