Skip to main content
Back to Colors generators

Colors

Hex Color Tint & Shade Generator

Used by developers, writers, and creators worldwide.

A hex color tint and shade generator takes a single base hex value and builds a complete color scale in seconds. Tints blend your color toward white; shades push it toward black. The result is a graduated palette ready for UI states, design tokens, and component libraries — without manually eyeballing contrast ratios. Enter any hex (the default is #3a86ff) and set the number of steps to control how granular the scale gets. Five steps suits a compact component palette; ten or more gives the fine gradations that Tailwind, Material, and Chakra UI color scales are built on. Copy any output hex straight into CSS variables, Figma styles, or a JSON token file.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  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

  • •Mapping 11 generated stops to Tailwind's 50–950 keys in tailwind.config.js
  • •Creating hover, active, and disabled button states from a single brand hex
  • •Populating a Figma shared library with a Brand/100 through Brand/900 color group
  • •Generating smooth gradient stops for a D3.js or Chart.js data visualization
  • •Building light and dark mode CSS custom properties from one base color token

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's the difference between a tint and a shade in a color scale

A tint mixes your base color with white, producing lighter variants; a shade mixes it with black, producing darker ones. In a typical 11-step scale, the lightest tints sit at steps 50–200 and the darkest shades at 700–950, with the base color landing around 500.

how many steps should I use to match a Tailwind CSS color palette

Tailwind's built-in palettes use 11 stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Set the steps input to 11, then map each generated hex to the corresponding numeric key in your tailwind.config.js colors object — e.g., brand: { 50: '#eef4ff', ..., 950: '#060f26' }.

why does my generated color scale look washed out or muddy

Pure tint-and-shade mixing desaturates color as it shifts toward white or black, so vivid hues tend to wash out in light tints and go muddy in dark shades. If the output looks flat, try reducing the saturation of your base hex slightly before generating, then tweak the extreme steps manually in Figma or your CSS editor.