ColorFlowTools

Tint and Shade Generator

Generate a full scale of tints and shades from any base color. Tints mix the color toward white and shades mix it toward black, giving you a light-to-dark range that is perfect for design tokens, hover states, and depth in a UI. Choose 5, 10, or a custom number of steps and pick the method: white/black mixing or lightness adjustment. Each step shows its number, HEX, RGB, and HSL values, a text preview on the color, a recommended text color, and its WCAG contrast, so you can see at a glance which steps are usable for text. Export the scale as a Tailwind-style 50–950 set or as CSS variables. Everything runs in your browser using the shared color engine.

Tints (lighter)

Shades (darker)

How to use the Tint and Shade Generator

  1. Choose a base color. Pick or type the color to build the scale around.
  2. Set steps and method. Choose the number of steps and whether to mix with white/black or adjust lightness.
  3. Review each step. See values, recommended text color, and WCAG contrast for every step.
  4. Export the scale. Export as Tailwind-style 50–950 names or CSS variables.

Examples

  • Button states: Generate shades of a primary color for default, hover, and active states.
  • Token scale: Export a 50–950 scale of a brand color for a design-token file.

How it works

Tints are produced by mixing the base toward white and shades by mixing toward black; tones mix toward gray. A lightness-based method instead adjusts the HSL lightness directly. Both give a smooth scale, and the tool reports each step’s contrast so you know which steps work for text.

Common use cases

  • Creating hover and active states from a base color
  • Building 50–950 design-token scales for a framework
  • Producing readable text-and-surface pairs from one hue

Privacy

All color calculations run in your browser. Nothing you enter is sent to a server. Saved palettes and recent colors are kept only in your browser’s local storage and can be cleared at any time.

Frequently asked questions

What is the difference between a tint, shade, and tone?

A tint mixes a color with white, a shade mixes it with black, and a tone mixes it with gray. This tool focuses on tints and shades.

Can I export a Tailwind-style scale?

Yes. Export the scale with 50–950 stop names, ready to paste into a Tailwind color config.

How do I know which steps are readable?

Each step shows a recommended text color and its WCAG contrast, so you can pick usable text-and-surface pairs.

Which method should I use?

White/black mixing is intuitive and common; lightness adjustment can give more even perceived steps. Try both and compare.

Monochromatic Palette Generator Generate a monochromatic palette by varying lightness of a single hue. Color Palette Generator Generate color schemes with lock, reorder, and export to CSS, JSON, SVG, and PNG. Color Mixer Mix two colors at any ratio, with intermediate steps and a gradient view. Color Contrast Checker Check the contrast ratio between two colors with clear WCAG pass/fail results. Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support.