Skip to content

Tints & Shades Generator (50–950 Color Scale)

Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.

Click any swatch to copy its HEX code. The number on each swatch is its contrast ratio with white text.

Export

What are tints and shades?

A tint is a color mixed with white, so it gets lighter. A shade is a color mixed with black, so it gets darker. Together they give you a family of related colors for backgrounds, borders, hover states and text, all with the same hue as your brand color.

Color scale (50–950)

The default output is an 11-step scale named like the palettes in Tailwind CSS: your base color becomes 500, steps 50 to 400 are progressively lighter tints, and steps 600 to 950 are progressively darker shades. Typical uses:

  • 50–100: page and card backgrounds, subtle highlights.
  • 200–300: borders, dividers and disabled states.
  • 500–600: buttons, links and active states.
  • 700–950: headings, body text on light backgrounds and dark-mode surfaces.

Each swatch shows its contrast ratio with white text. Aim for 4.5:1 or more where white text sits on the color, for example on a filled button.

Percentage steps

Switch the output to 5%, 10% or 20% steps to see every tint and shade between your color and pure white or black. This is handy when a design asks for "the brand color at 20% lighter" or when you need many evenly spaced steps for charts.

Export

Give the color a name (for example brand or primary) and copy the scale as:

  • CSS variables: --brand-50 … --brand-950.
  • Tailwind: a @theme block for Tailwind v4 (classes like bg-brand-100 and text-brand-700) and a config object for v3.
  • SCSS variables or JSON design tokens.

The color, name and mode are stored in the page address, so a bookmark brings back the same scale. Need a starting color? Use the color picker or generate a palette first.

More color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)
Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.
Color Palette Generator for Websites
Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Color Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.
CSS Color Names: All 148 Named Colors with HEX Codes
All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.
Color Families: Color Codes by Color Group
Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Popular Colors: Tailwind CSS and Bootstrap 5 Palettes
The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.
Web Safe Colors: The 216-Color Palette
The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.