nutilz
🎨

Color Shades & Tints Generator

Generate an 11-step color scale from any hex color

50
100
200
300
400
500
600
700
800
900
950

Click any swatch to copy its hex value

50#ebf3fe
100#cee0fd
200#b1cdfb
300#93bafa
400#6ca1f8
500#3b82f6
600#306bca
700#2655a0
800#1c3e76
900#12274a
950#0a162a
:root {
  --color-50: #ebf3fe;
  --color-100: #cee0fd;
  --color-200: #b1cdfb;
  --color-300: #93bafa;
  --color-400: #6ca1f8;
  --color-500: #3b82f6;
  --color-600: #306bca;
  --color-700: #2655a0;
  --color-800: #1c3e76;
  --color-900: #12274a;
  --color-950: #0a162a;
}

🔒 Runs entirely in your browser. No data is sent to any server.

Related Tools

🎨

Color Palette Generator

Generate complementary, analogous and triadic palettes.

🎨

Color Picker

Pick any color and get HEX, RGB, HSL values and palettes.

🌈

CSS Gradient Generator

Build linear, radial and conic CSS gradients visually.

⚡

Color Contrast Checker

Check color contrast ratios for WCAG AA and AAA.

Browse all Design Tools tools →

What is a Color Shades & Tints Generator?

This tool takes any hex color and produces an 11-step scale — from a near-white tint to a near-black shade — following the same numbering convention (50–950) used by Tailwind CSS and many modern design systems. Enter a brand color, a primary accent, or any hex value, and instantly see the full range of lighter and darker variations that belong to the same hue family.

Tints are produced by mixing the base color with white, making each step progressively lighter. Shades are produced by mixing with black, making each step progressively darker. Step 500 is always your exact base color — the “true” expression of the hue. Steps 50–400 are tints for light backgrounds and subtle fills, while steps 600–950 are shades for text, borders, and dark UI surfaces.

Once you have the scale, export it in the format your project uses: CSS custom properties (CSS variables), a Tailwind CSS config snippet, or SCSS variables. The name field lets you customize the prefix so the output drops straight into your codebase without editing.

How to Use the Generator

  1. 1.Enter your base hex color in the text field, or click the color swatch to open the native color picker. Both inputs stay synchronized.
  2. 2.Set a scale name — for example, “brand”, “primary”, or “blue”. This prefix is used in the CSS variable names and Tailwind config key.
  3. 3.The scale generates instantly as you type. Step 500 (the base color) is highlighted with a ring. Click any swatch or its HEX / RGB / HSL button to copy that specific value to your clipboard.
  4. 4.Choose your export format — CSS Variables, Tailwind Config, or SCSS Variables — and click Copy to grab the entire scale at once.
  5. 5.Paste into your project. For CSS variables, this goes in your global stylesheet. For Tailwind, it belongs in the theme.extend.colors object. For SCSS, it goes in your variables partial.

Tints vs Shades vs Tones — the Core Concepts

Color terminology is often used loosely, but the three terms mean distinct things in color theory:

  • Tint — the result of mixing a hue with pure white. Tints reduce the perceived intensity of a color while preserving its hue. Pastel colors are extreme tints. In RGB terms, each channel moves toward 255.
  • Shade — the result of mixing a hue with pure black. Shades increase darkness and perceived weight. Deep navy and forest green are shades of blue and green. In RGB terms, each channel moves toward 0.
  • Tone — the result of mixing a hue with gray (both white and black). Tones reduce saturation without the extreme lightness shift of tints or the extreme darkness of shades. Muted, earthy color palettes consist heavily of tones.

For UI design, tints and shades are the most practically useful. Tints work well for hover backgrounds, input fill colors, notification banners, and any surface that needs to be clearly associated with a brand color without being too visually heavy. Shades work well for body text, borders, focus rings, and pressed states.

Building a Design System Color Scale

A design system color scale is a structured set of named color values that establishes a shared vocabulary for an entire product. Instead of using arbitrary hex values scattered across your CSS, you define a palette once and reference it everywhere through semantic tokens or step numbers.

The 11-step scale (50, 100, 200, ..., 900, 950) has become a de facto standard because it maps neatly to the components most UI systems need:

  • 50Very light tint — ideal for large page backgrounds, sidebar fills, card surfaces. Barely perceptibly different from white.
  • 100–200Subtle fills and borders — chip backgrounds, tag fills, dividers, tooltip backgrounds.
  • 300–400Midtone tints — placeholder text on colored backgrounds, disabled states, secondary icons.
  • 500The base color — your brand identity value. Primary buttons, active links, focus rings in light theme.
  • 600Hover and pressed states on the 500 base. Slightly darker to signal interaction without losing brand identity.
  • 700–800High-contrast text on light backgrounds — headings, links, active navigation items.
  • 900–950Darkest tones — used for text on white or in dark-mode surfaces and deep backgrounds.

When building a brand palette from scratch, start with the 500 step — that is your primary color. Generate the rest of the scale with this tool, then assign semantic token names (--color-background, --color-border, --color-text-primary) that map to specific steps. This two-layer token system (global palette + semantic aliases) is the approach used by GitHub Primer, Atlassian Design System, and IBM Carbon.

Using the Scale with Tailwind CSS

Tailwind's utility-first approach works best when your custom brand colors follow the same 11-step format as its built-in palette. The Tailwind Config export from this tool outputs a ready-to-use object you can drop into your configuration file.

Once added, every step is accessible as a Tailwind class. If you named your scale “brand”, you can write bg-brand-50 for a very light fill, text-brand-700 for body text on white, border-brand-200 for a subtle divider, and hover:bg-brand-600 for a button hover state.

For dark mode, combine the scale with Tailwind's dark: variant. A common pattern for a primary button: bg-brand-500 hover:bg-brand-600 dark:bg-brand-400 dark:hover:bg-brand-300 text-white dark:text-brand-950. Light mode uses the darker 500/600 steps because white text needs sufficient contrast against the background. Dark mode flips to the lighter 400/300 steps, where the dark background provides the contrast instead.

If you are using Tailwind v4 (which uses a CSS-first configuration approach), paste the CSS Variables output into your @theme block using the --color-* namespace, and the steps become available as utilities automatically.

Dark Mode Color Strategies

Dark mode is not simply about inverting colors. A crude inversion produces harsh, low-contrast interfaces that are harder to read than well-designed dark themes. Instead, use your color scale semantically and swap assignments at the theme level.

The fundamental rule: in light mode, lighter steps go on backgrounds and darker steps go on foregrounds (text, icons). In dark mode, flip the assignment. This means the 50 step (near-white) that was your card background in light mode might become your high-emphasis text in dark mode, while the 900 step (near-black) that was heading text becomes your dark surface background.

Using CSS custom properties makes this clean. Define a set of semantic properties like --bg-surface, --text-primary, --border-default, and map them to different scale steps inside a :root block and a [data-theme="dark"] block. Components reference only the semantic tokens — never raw scale steps. This means flipping an entire app to dark mode requires updating only the token mapping file, not individual components.

One practical consideration: your base 500 color may need adjustment for dark backgrounds because it was designed to have contrast against white. Run the 500 step through a contrast checker against a dark surface (e.g., #1E293B) and if it fails WCAG AA, use the 300 or 400 step instead on dark backgrounds. The step that passes contrast is your dark-mode interactive color.

Practical Use Cases

Brand consistency across a product.If your brand logo uses #E63946, generate the scale and use step 500 for primary CTAs, step 100 as a subtle error or notification background, and step 800 for high-emphasis text that matches the brand's energy without being too saturated.

Data visualization color ramps. Charts that use a single-hue ramp — such as a heat map or choropleth map — need evenly distributed lightness steps. Use steps 200, 400, 500, 700, and 900 from this generator for a five-level ramp that is perceptually ordered from light (low data) to dark (high data).

Generating accessible interactive states. WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text. Use the Color Contrast Checker on Nutilz to test each step against your chosen background. Typically step 600 or 700 on white passes AA for text, while step 500 on white may only pass for large text (3:1). The scale gives you options close to your brand color that still pass accessibility requirements.

Rapid prototyping.When building a proof-of-concept, you often don't have a finalized brand palette. Pick any reasonable accent color, generate the scale, and apply it consistently. The systematic numbering makes it easy to describe design decisions in handoff notes: “use brand-500 for the CTA, brand-100 for the selected row background, and brand-700 for the icon in the active nav item.”

Frequently Asked Questions

What is the difference between a tint and a shade?+
A tint is created by mixing a color with white, making it lighter and less saturated toward pastel. A shade is created by mixing a color with black, making it darker and more muted. For example, if your base color is #3B82F6 (a medium blue), tints produce lighter blues like #EFF6FF, while shades produce darker blues like #1E3A8A. Tints and shades are the foundation of color scales used in design systems — they give UI components a consistent visual language across different states (hover, focus, pressed) and surfaces (backgrounds, borders, text, and icons).
What is the Tailwind CSS color scale format?+
Tailwind CSS uses an 11-step numeric scale from 50 (lightest) to 950 (darkest), with 500 representing the base or "medium" color. Each step — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — is a discrete color in the same hue family. The even gaps between step numbers are intentional: they leave room to insert new intermediate steps in the future without renaming existing ones. Tailwind uses this format for all built-in palettes (blue, red, green, etc.) and you can apply the same format to your own custom colors in tailwind.config.js under the theme.colors or theme.extend.colors key.
How do I add a custom color scale to Tailwind CSS config?+
Copy the Tailwind Config output from this tool and paste it into your tailwind.config.js or tailwind.config.ts under the theme.extend.colors object. For example: extend: { colors: { brand: { 50: '#eff6ff', 100: '#dbeafe', ..., 950: '#172554' } } }. Your brand color is then available as utility classes like bg-brand-500, text-brand-700, border-brand-200, hover:bg-brand-600, and so on. Use theme.extend.colors to add to Tailwind's default palette, or place it directly under theme.colors to replace the defaults entirely.
How do I use CSS custom properties (variables) from this tool?+
The CSS Variables output defines --color-50 through --color-950 custom properties on the :root selector. Paste this into your global stylesheet (globals.css, styles.css, or equivalent) and reference each shade anywhere in your CSS: background-color: var(--color-100); color: var(--color-700); border-color: var(--color-200). You can rename the prefix — replace "--color" with "--brand", "--primary", "--accent", or any descriptive name. CSS custom properties also work inside Tailwind's arbitrary value syntax: bg-[var(--color-500)].
How many steps should a design system color scale have?+
Most modern design systems use 9–11 steps. Tailwind CSS, Material Design 3, and Radix UI all use variants of an 11-step scale. Fewer steps (5 or 7) work well for small projects, while 11 steps give you enough granularity to cover backgrounds, borders, text, icons, and interactive states without reusing the same color for different purposes. The key is assigning semantic roles: 50 for large surface backgrounds, 100–200 for subtle borders and fills, 400–500 for interactive elements (buttons, links), 700–800 for high-contrast text on light backgrounds, and 900–950 for the darkest surfaces.
What is the difference between a tone and a tint or shade?+
A tint mixes a color with white; a shade mixes it with black. A tone is created by mixing a color with gray — both white and black simultaneously — which reduces the color's saturation without dramatically changing its lightness. Tones are often more sophisticated-looking than pure tints or shades because they maintain a muted, natural quality. Digital color tools represent tones as HSL values with both a lightness shift and a saturation reduction. This generator focuses on tints and shades (the most commonly needed for UI design), but you can achieve tones by also reducing the saturation of each step in your CSS or design tool.
Can I use this color scale for dark mode?+
Yes — the conventional approach is to invert the scale usage for dark mode. In light mode, you might use the 50 shade for the page background and the 900 shade for primary text. In dark mode, flip these: use 950 or 900 for the page background and 50 or 100 for primary text, while interactive components use middle shades (400–600) for their main colors. With CSS custom properties, redefine the --color-* variables inside a .dark or [data-theme="dark"] selector to remap semantic roles without changing component styles. Tailwind's dark: variant works naturally once you've added your custom scale.