Colors

Hex Color Tint & Shade Generator

A hex color tint and shade generator lets you build a complete, production-ready color scale from a single base hex color. Tints are produced by blending your chosen color toward white; shades push it toward black. The result is a graduated spectrum that handles every UI state — backgrounds, borders, text, hover effects — without you eyeballing contrast ratios by hand. Enter your hex value, set the number of steps, and the scale generates instantly. This approach is the backbone of every major design token system. Tailwind CSS, Material Design, and Chakra UI all publish color scales built on exactly this tint-and-shade logic. When you configure a custom brand color in any of these frameworks, you need a full numeric scale (50 through 900 is common) rather than a single hex value — and this generator produces exactly that. The number of steps controls how granular your scale is. Five steps gives you a compact palette useful for simple components. Ten or more steps suits a full design system where you need subtle distinctions between a card background, a divider, and a disabled input. More steps also make data visualization gradients smoother, since each band of color transitions more gradually. Beyond developer tooling, the generator is useful anywhere color consistency matters: brand guidelines, print layouts, slide decks, or icon sets that need to feel cohesive across light and dark contexts. Copy any output hex directly into Figma, CSS variables, or a JSON token file and your palette is ready to use.

How to Use

  1. Type or paste your base hex color (e.g., #3a86ff) into the Base Hex Color field.
  2. Set the Steps field to the number of color stops you want — use 5 for a quick palette or 11 to match Tailwind's scale.
  3. Click generate to instantly see the full grid of tints and shades.
  4. Click any swatch or its hex value to copy it to your clipboard.
  5. Paste the copied hex values into your CSS variables, tailwind.config.js, or Figma color styles.

Use Cases

  • •Generating Tailwind CSS custom color scales for tailwind.config.js
  • •Creating hover, active, and disabled states for a single brand color
  • •Building accessible background-to-text color pairings in a design system
  • •Producing smooth gradient stops for data visualization charts
  • •Extending a logo's primary color into a full UI component library
  • •Creating light and dark mode token sets from one base color
  • •Generating consistent neutral gray scales from a tinted brand color
  • •Populating Figma color styles with a full numeric palette

Tips

  • →Use a mid-saturation base color around 50–70% saturation; highly saturated colors produce washed-out tints and muddy shades.
  • →For dark mode tokens, map your darkest shades (steps 800–900) as surface colors and your lightest tints as text colors — the same scale works both ways.
  • →If you need a neutral gray that still feels on-brand, tint a very desaturated version of your brand hue rather than using pure #808080.
  • →When building a data viz ramp, use only the tint half or only the shade half so the gradient reads as a single directional progression.
  • →Cross-check your 600 and 700 steps against a contrast tool before assigning them as interactive element colors — they're the most likely candidates for accessible buttons and links.
  • →Generate scales for both your primary and accent colors with the same step count so numeric keys align and component tokens stay consistent across the whole system.

FAQ

What is the difference between a tint and a shade?

A tint mixes your base color with white, producing lighter variants. A shade mixes it with black, producing darker ones. In a typical scale the lightest tints sit at the low-numbered steps (e.g., 50–200) and the darkest shades at the high end (700–900). The base color itself usually falls around the 500 position.

How many steps should I use for a Tailwind CSS color scale?

Tailwind's built-in palettes use 11 stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Set the generator to 11 steps to match that structure. You can then map each output hex to the corresponding numeric key in your tailwind.config.js colors object.

How do I add these colors to Tailwind CSS?

In tailwind.config.js, add a colors entry for your brand name and map each generated hex to a numeric key — e.g., brand: { 50: '#eef4ff', 100: '#d9e8ff', ..., 900: '#0a1f4d' }. Tailwind then exposes classes like bg-brand-100 and text-brand-700 throughout your project.

How do I know which shade is dark enough for accessible text?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text against its background. As a rough rule, shades at step 700 or darker usually pass on white backgrounds, while tints at step 100 or lighter usually pass with dark text. Always verify with a dedicated contrast checker before finalising.

Can I use these hex values as CSS custom properties?

Yes. Paste each output hex into a :root block as --color-brand-100, --color-brand-200, and so on. Any property in your stylesheet can then reference var(--color-brand-500). This approach also makes swapping your brand color trivial — update the base tokens and every reference updates automatically.

Why does my generated scale look washed out or muddy?

Pure tint-and-shade mixing toward white or black desaturates the color as it shifts. Highly saturated base colors (vivid blues, greens) tend to wash out in light tints and go muddy in dark shades. If the result looks flat, try adjusting the base color to be slightly less saturated before generating, or manually tweak the extreme steps in your colour editor.

What's the difference between 5 steps and 10 steps in the output?

Five steps gives you broader jumps between each stop — useful for simple component palettes where you only need a background, a mid tone, and a dark text color. Ten or more steps gives finer gradations, which matter when you have many components (badges, alerts, charts, borders) that each need a slightly different shade to feel visually distinct.

Can I use these colors in Figma?

Yes. Copy each hex value and create a Figma color style for it under a shared library. Name them consistently — Brand/100, Brand/200, etc. — so the scale appears as a grouped set in the color panel. You can then apply and swap them across components just as you would with design tokens.