What is the difference between color shades and tints?

Shades are darker versions of a color (created by adding black or reducing lightness). Tints are lighter versions (created by adding white or increasing lightness). Together they create a complete color scale from lightest to darkest.

How do I generate color shades and tints online?

Enter a base color using the color picker or HEX code, choose the number of steps (typically 9-11), select shades only, tints only, or full scale, and the tool generates a complete color range. Export as CSS variables, Tailwind config, or SCSS.

How many shades and tints should I generate for a design system?

Most design systems use 9-11 steps (like Tailwind's 50-900 scale). This provides enough variety for backgrounds (50-200), borders and secondary elements (300-500), and text/primary actions (600-900). Adjust based on your specific needs.

What is a color scale in design systems?

A color scale is a range of colors from lightest to darkest, all derived from a single base hue. It ensures visual consistency across your design. Example: blue-50 through blue-900 in Tailwind CSS. Each step has a specific use case.

How do I use color shades in my design system?

Use lighter shades (50-200) for backgrounds and hover states, medium shades (300-500) for borders, dividers, and secondary elements, and darker shades (600-900) for text, icons, and primary actions. The 500 shade is typically the base color.

Why do some colors look muddy when darkened?

Simply reducing lightness can make colors look dull or muddy. Professional color scales often adjust saturation too - increasing it slightly for darker shades to maintain vibrancy. This tool uses perceptually uniform algorithms for better results.

How do I export color shades as CSS variables?

Click export and choose CSS custom properties format. You'll get variables like --color-50: #eff6ff; --color-100: #dbeafe; etc. Use them in CSS: background-color: var(--color-100); This enables easy theming and dark mode.

What is the 500 shade typically used for?

The 500 shade is usually the "base" or "primary" color - the most vibrant, recognizable version. It's often used for primary buttons, links, and brand elements. Lighter numbers (50-400) are tints, darker numbers (600-900) are shades.

How do I ensure text is readable on these color shades?

Use our Color Contrast Checker tool. Generally, use dark text (800-900 shades) on light backgrounds (50-200 shades) and light text (50-100 or white) on dark backgrounds (600-900 shades). Aim for 4.5:1 contrast ratio minimum.

Are generated color shades accessible?

The generated colors maintain the same hue but vary in lightness. Accessibility depends on how you use them - always verify contrast ratios for text/background combinations. Use our Color Contrast Checker and Color Blindness Simulator.

Can I customize the number of color steps?

Yes! Use the slider to generate anywhere from 3 to 15 color steps. Fewer steps for simple designs, more steps for complex design systems. 9-11 steps is the sweet spot for most projects.

How do I create a Tailwind CSS color palette?

Generate your color scale, then export as Tailwind config. You'll get a ready-to-use object: colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', ... } }. Add to your tailwind.config.js to use classes like bg-primary-100.

What is perceptual uniformity in color scales?

Perceptually uniform color scales have visually equal steps between shades. Simply dividing lightness equally doesn't achieve this because human perception is non-linear. This tool uses algorithms that account for perceptual differences.

How do I create dark mode colors from my shades?

For dark mode, invert your usage: use darker shades (800-900) for backgrounds and lighter shades (100-300) for text. Or generate a separate dark mode palette. CSS custom properties make switching between modes easy.

Is my color data private when generating shades?

Yes! All color shade generation happens 100% in your browser using JavaScript. No data is sent to any server, stored, or logged. Your color values remain completely private on your device.

What is the difference between color shades and tints?

Shades are darker versions of a color (created by adding black or reducing lightness). Tints are lighter versions (created by adding white or increasing lightness). Together they create a complete color scale from lightest to darkest.

How do I generate color shades and tints online?

Enter a base color using the color picker or HEX code, choose the number of steps (typically 9-11), select shades only, tints only, or full scale, and the tool generates a complete color range. Export as CSS variables, Tailwind config, or SCSS.

How many shades and tints should I generate for a design system?

Most design systems use 9-11 steps (like Tailwind's 50-900 scale). This provides enough variety for backgrounds (50-200), borders and secondary elements (300-500), and text/primary actions (600-900). Adjust based on your specific needs.

What is a color scale in design systems?

A color scale is a range of colors from lightest to darkest, all derived from a single base hue. It ensures visual consistency across your design. Example: blue-50 through blue-900 in Tailwind CSS. Each step has a specific use case.

How do I use color shades in my design system?

Use lighter shades (50-200) for backgrounds and hover states, medium shades (300-500) for borders, dividers, and secondary elements, and darker shades (600-900) for text, icons, and primary actions. The 500 shade is typically the base color.

Why do some colors look muddy when darkened?

Simply reducing lightness can make colors look dull or muddy. Professional color scales often adjust saturation too - increasing it slightly for darker shades to maintain vibrancy. This tool uses perceptually uniform algorithms for better results.

How do I export color shades as CSS variables?

Click export and choose CSS custom properties format. You'll get variables like --color-50: #eff6ff; --color-100: #dbeafe; etc. Use them in CSS: background-color: var(--color-100); This enables easy theming and dark mode.

What is the 500 shade typically used for?

The 500 shade is usually the "base" or "primary" color - the most vibrant, recognizable version. It's often used for primary buttons, links, and brand elements. Lighter numbers (50-400) are tints, darker numbers (600-900) are shades.

How do I ensure text is readable on these color shades?

Use our Color Contrast Checker tool. Generally, use dark text (800-900 shades) on light backgrounds (50-200 shades) and light text (50-100 or white) on dark backgrounds (600-900 shades). Aim for 4.5:1 contrast ratio minimum.

Are generated color shades accessible?

The generated colors maintain the same hue but vary in lightness. Accessibility depends on how you use them - always verify contrast ratios for text/background combinations. Use our Color Contrast Checker and Color Blindness Simulator.

Can I customize the number of color steps?

Yes! Use the slider to generate anywhere from 3 to 15 color steps. Fewer steps for simple designs, more steps for complex design systems. 9-11 steps is the sweet spot for most projects.

How do I create a Tailwind CSS color palette?

Generate your color scale, then export as Tailwind config. You'll get a ready-to-use object: colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', ... } }. Add to your tailwind.config.js to use classes like bg-primary-100.

What is perceptual uniformity in color scales?

Perceptually uniform color scales have visually equal steps between shades. Simply dividing lightness equally doesn't achieve this because human perception is non-linear. This tool uses algorithms that account for perceptual differences.

How do I create dark mode colors from my shades?

For dark mode, invert your usage: use darker shades (800-900) for backgrounds and lighter shades (100-300) for text. Or generate a separate dark mode palette. CSS custom properties make switching between modes easy.

Is my color data private when generating shades?

Yes! All color shade generation happens 100% in your browser using JavaScript. No data is sent to any server, stored, or logged. Your color values remain completely private on your device.

Color Shade/Tint Generator

simple

Generate shades and tints of any color for design systems. Create complete color scales like Tailwind CSS.

Color Toolscolorshadestintsscale

100% Private - Runs Locally

How to Use

1Enter a base color
2Choose shades, tints, or full scale
3Adjust number of steps
4Copy as CSS variables

Examples

Blue Shades

Input

#3b82f6

Output

50: #eff6ff
100: #dbeafe
...
900: #1e3a8a

Green Tints

Input

#22c55e

Output

Lighter variations from base to near-white

Full Color Scale

Input

#8b5cf6

Output

11 colors from lightest tint to darkest shade

Frequently Asked Questions

Related Tools

View all

Color Palette Generator

Generate harmonious color palettes using color theory. Create complementary, analogous, triadic, and more color schemes.

Color Picker

Pick colors and convert between HEX, RGB, HSL, HSV, and CMYK formats. Visual color selection with eyedropper tool support.