Color Tint & Shade Generator

Generate tints (lighter) and shades (darker) of any hex color. Creates a palette of 10 steps for design systems, Tailwind-style color scales, and CSS variables.

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

How to Use Color Tint & Shade Generator

1Enter a base hex color or use the color picker.
2View 10 tints (lighter variants) and 10 shades (darker variants).
3Click any swatch to copy its hex value.
4Export as CSS custom properties or Tailwind config.

Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.

CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.

CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

What is the difference between a tint and a shade?▾

A tint is created by adding white to a color — making it lighter while preserving hue. A shade is created by adding black — making it darker. Together, tints and shades form a color scale. Modern design systems (like Tailwind CSS, Material Design, and Ant Design) use scales of 50–900, where 50 is the lightest tint and 900 is the darkest shade. The base color is typically around 500 or 600.

How does Tailwind CSS use color scales?▾

Tailwind CSS provides a 11-step scale (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) for each named color. When creating custom brand colors, you extend the Tailwind config with your own scale. This tool generates scales compatible with the Tailwind format. You can copy the output as a Tailwind config object or CSS custom properties (--color-brand-50 through --color-brand-900).

What is HSL color space?▾

HSL (Hue, Saturation, Lightness) represents colors in a way that is intuitive for generating scales. Hue (0–360°) is the color angle on the color wheel. Saturation (0–100%) is the color intensity — 0% is gray. Lightness (0–100%) is the brightness — 0% is black, 100% is white. To create tints, increase lightness toward 100%. To create shades, decrease lightness toward 0%. This produces more perceptually consistent scales than RGB mixing.

What is the difference between shade generation methods?▾

Linear interpolation (mixing with white/black): simple but can look washed out or muddy at extremes. HSL lightness adjustment: more perceptually uniform but can oversaturate dark shades. Chroma-adjusted (OKLCH/LCH): the most perceptually accurate — maintains consistent perceived lightness. Tools like Radix UI and shadcn/ui use OKLCH for their color systems. This tool uses HSL which provides a good balance of accuracy and compatibility.

How do I use color scales in CSS?▾

Define colors as CSS custom properties (variables): :root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; } Then use them as var(--color-brand-50) in your styles. For dark mode, redefine the same variables in a @media (prefers-color-scheme: dark) or .dark class. CSS custom properties cascade and can be overridden at any level of the DOM, making them powerful for theming.

Image Tools