Skip to main content
Back to Colors generators

Colors

Tints and Shades Generator

Used by developers, writers, and creators worldwide.

A tints and shades generator builds a complete color scale from a single hex value, producing mathematically even lighter tints and darker shades in one step. Tints mix your base color with white; shades blend it with black. Together they form a spectrum you can assign to backgrounds, borders, hover states, focus rings, and text — without eyeballing anything. Set the number of steps anywhere from 5 to 11 depending on how granular your system needs to be. This tool is especially useful when a marketing team hands over a brand hex like #3b82f6 with no accompanying scale documentation. Paste it in, pick your step count, and you get a Tailwind-style numeric scale ready to drop into a config file, Figma Variables, or a CSS custom properties sheet.

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. Enter your base color as a hex value (e.g. #3b82f6) in the Base Color field.
  2. Set the Number of Steps to match your design system — 9 for a Tailwind-style scale, 5 for a minimal palette.
  3. Click generate to render the full color grid from lightest tint to darkest shade.
  4. Click any swatch in the output grid to copy its hex value to your clipboard.
  5. Paste the hex values into your Tailwind config, CSS variables file, or Figma color styles.

Use Cases

  • •Generating a custom brand color object for tailwind.config.js from a single marketing hex
  • •Building a 9-step dark-mode ramp where step 1 is a near-black background and step 9 is near-white text
  • •Mapping hover, active, and disabled states to consistent shade steps in a Figma component library
  • •Populating Style Dictionary color tokens when an inherited brand palette is missing mid-range tones
  • •Prototyping card and alert background fills in Storybook before committing to a final primary hue

Tips

  • →Start with your brand's primary action color as the base — it usually lands near step 5, giving balanced tints and shades on either side.
  • →For neutral gray scales, desaturate your brand color slightly before generating — this produces warm or cool grays that harmonize with your palette rather than clashing.
  • →Use a 9-step scale for primary and secondary colors, but drop to 5 steps for accent or semantic colors (error, success) to keep your token set manageable.
  • →Compare your step 100 and step 900 against pure white and black — if the contrast gap is too small, increase your step count to get more extreme endpoints.
  • →Generate scales for your primary, neutral, and semantic colors in one session and name them consistently (e.g. brand-100 through brand-900) before importing into any tool.
  • →If the middle step looks too saturated next to UI chrome, try shifting your base color 5-10 degrees in hue before regenerating — cooler bases often produce cleaner-feeling scales.

FAQ

how do tints and shades actually get calculated from a hex color

Tints are produced by linearly interpolating the base color toward white (#ffffff), while shades interpolate toward black (#000000). The number of steps you choose divides that range into equal intervals, so each step moves by the same perceptual distance. This keeps the scale consistent whether you pick 5 steps or 11.

can i paste the output directly into tailwind config or css variables

Yes — every step outputs a valid hex value you can copy straight into a Tailwind color object, a CSS custom property, or a Sass map with no conversion needed. A 9-step scale maps cleanly onto Tailwind's 100–900 range, so naming is straightforward.

are the generated tints and shades accessible for text on background use

The generator produces the scale, but WCAG compliance depends on which steps you pair. As a general rule, steps 1–3 work as light backgrounds against steps 7–9 for dark text. Verify any specific pair with WebAIM's Contrast Checker before shipping to production.