Hex Color Tint & Shade Generator

How to use

1. 1️⃣
   Choose your options above
2. 2️⃣
   Click Generate
3. 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