Color Shades & Tints Generator

Generate tints, shades, and tones from one base color and copy ready-to-use HEX, RGB, and HSL values.

Gradient editor with color stops and angle control generating CSS code

Base Color

Current value: #2563EB

Generation Settings

Base summary

#2563EB

RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
Text
White recommended
On white
5.17:1
On black
4.06:1

Visual overview

Tints
Shades
Tones

Generated colors

Tints, Shades & Tones

Tints

Base color mixed progressively with white.

10% white

#3B73ED

Best text: Black4.86:1
AA normalPass

20% white

#5182EF

Best text: Black5.79:1
AA normalPass

30% white

#6692F1

Best text: Black6.95:1
AA normalPass

40% white

#7CA1F3

Best text: Black8.25:1
AA normalPass

50% white

#92B1F5

Best text: Black9.83:1
AA normalPass

60% white

#A8C1F7

Best text: Black11.64:1
AA normalPass

70% white

#BED0F9

Best text: Black13.58:1
AA normalPass

80% white

#D3E0FB

Best text: Black15.83:1
AA normalPass

90% white

#E9EFFD

Best text: Black18.23:1
AA normalPass

Shades

Base color mixed progressively with black.

10% black

#2159D4

Best text: White6.10:1
AA normalPass

20% black

#1E4FBC

Best text: White7.24:1
AA normalPass

30% black

#1A45A5

Best text: White8.61:1
AA normalPass

40% black

#163B8D

Best text: White10.27:1
AA normalPass

50% black

#133276

Best text: White12.03:1
AA normalPass

60% black

#0F285E

Best text: White14.14:1
AA normalPass

70% black

#0B1E47

Best text: White16.27:1
AA normalPass

80% black

#07142F

Best text: White18.26:1
AA normalPass

90% black

#040A17

Best text: White19.79:1
AA normalPass

Tones

Base color mixed progressively with neutral gray.

10% gray

#2E66E0

Best text: White5.13:1
AA normalPass

20% gray

#3769D6

Best text: White5.06:1
AA normalPass

30% gray

#406CCB

Best text: White4.97:1
AA normalPass

40% gray

#496FC0

Best text: White4.86:1
AA normalPass

50% gray

#5372B6

Best text: White4.72:1
AA normalPass

60% gray

#5C74AB

Best text: White4.62:1
AA normalPass

70% gray

#6577A0

Best text: Black4.70:1
AA normalPass

80% gray

#6E7A95

Best text: Black4.88:1
AA normalPass

90% gray

#777D8B

Best text: Black5.09:1
AA normalPass

Developer Output

:root {
  --color-base: #2563EB;
  --color-tint-10: #3B73ED;
  --color-tint-20: #5182EF;
  --color-tint-30: #6692F1;
  --color-tint-40: #7CA1F3;
  --color-tint-50: #92B1F5;
  --color-tint-60: #A8C1F7;
  --color-tint-70: #BED0F9;
  --color-tint-80: #D3E0FB;
  --color-tint-90: #E9EFFD;
  --color-shade-10: #2159D4;
  --color-shade-20: #1E4FBC;
  --color-shade-30: #1A45A5;
  --color-shade-40: #163B8D;
  --color-shade-50: #133276;
  --color-shade-60: #0F285E;
  --color-shade-70: #0B1E47;
  --color-shade-80: #07142F;
  --color-shade-90: #040A17;
  --color-tone-10: #2E66E0;
  --color-tone-20: #3769D6;
  --color-tone-30: #406CCB;
  --color-tone-40: #496FC0;
  --color-tone-50: #5372B6;
  --color-tone-60: #5C74AB;
  --color-tone-70: #6577A0;
  --color-tone-80: #6E7A95;
  --color-tone-90: #777D8B;
}

Share & Support

Enjoying Color Shades & Tints Generator?

Share it with others or leave a quick rating.

Related Tools

Color Mixer

Mix colors online.

Screen Color Picker

Pick a screen color instantly.

Color Name Finder

Find color names.

Color Palette Generator

Generate color palettes.

Image Color Picker

Pick colors from images.

RGB to HSL Color Converter

Convert RGB to HSL.

Generate Tints, Shades, and Tones from One Base Color

Color Shades & Tints Generator by Solvioza turns one HEX color into a practical set of tints, shades, and tones for UI design, branding, web development, dashboards, design systems, illustrations, and creative color exploration. Enter a base color, choose how many steps you need, and instantly copy clean HEX, RGB, HSL, CSS, JSON, or plain color lists. The guide to tints, shades, and tones explains how each variation changes a base color.

A tint mixes your base color with white, a shade mixes it with black, and a tone mixes it with neutral gray. This tool uses predictable RGB interpolation, so the generated color scale is easy to understand and repeat. It is especially helpful when you need hover states, disabled states, subtle backgrounds, borders, chart colors, brand ramps, or documentation-ready color tokens.

Everything runs in your browser. Your selected color is not uploaded, stored, or sent to a server, which keeps the workflow fast and private.

3

Color ramps: tints, shades, and tones

9

Clean default steps from 10% to 90%

0

Uploads, accounts, or server processing

What You Can Create with a Shades and Tints Generator

The generator creates three useful variations from your base color. Tints move the color toward white, making lighter versions for soft surfaces, hover backgrounds, empty states, and calm brand accents. Shades move the color toward black, making deeper versions for active states, dark UI surfaces, borders, headings, and high-emphasis elements. Tones move the color toward neutral gray, reducing intensity while keeping a connection to the original hue.

Because the tool uses percentage-based RGB channel mixing, each step has a clear meaning. A 30% tint means the base color is mixed 30% toward white. A 60% shade means the base color is mixed 60% toward black. This makes the output easier to explain in design documentation and easier to reproduce in code. If you need to blend the base with a color other than white, black, or gray, use the Color Mixer and the online color mixing guide.

Create UI Color Scales and Brand Color Systems

Design teams often need more than a single brand color. A primary blue may need pale backgrounds for alerts, darker values for buttons, muted tones for charts, and readable labels for components. This tint and shade generator helps you quickly build a structured color ramp without guessing values by eye.

Developers can copy CSS custom properties for tokens such as --color-tint-10, --color-shade-40, and --color-tone-70. Designers can copy HEX, RGB, or HSL values into design files, style guides, design QA notes, and handoff documents.

This tool creates lighter, darker, and muted variations of one base color. If you need multiple coordinated hues instead, use the Color Palette Generator to build a broader color scheme. The website color palette guide shows how to assign colors to practical interface roles.

How to Generate Tints, Shades, and Tones

  1. Choose a base color. Use the color picker or enter a HEX value such as #2563EB, 2563EB, or short HEX like #36C. You can capture an existing color with the Screen Color Picker or Image Color Picker. If you need a descriptive label, check it with the Color Name Finder and the HEX color-name guide.
  2. Set the number of steps. The default creates nine clean steps: 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, and 90%.
  3. Adjust the maximum mix amount. Lower values keep the colors closer to the base color. Higher values move the final color closer to white, black, or gray.
  4. Choose the output format. View and copy generated colors as HEX, RGB, or HSL.
  5. Export for your workflow. Copy CSS custom properties, valid JSON, or a plain color list for design documentation.

Understanding Tints, Shades, and Tones

Tints

A tint is created by mixing the base color with white. Tints are useful for light backgrounds, badges, subtle UI states, and gentle brand accents.

Shades

A shade is created by mixing the base color with black. Shades help create depth, emphasis, button states, text colors, and dark-mode-friendly variants.

Tones

A tone is created by mixing the base color with neutral gray. Tones are useful when a color feels too saturated but still needs to stay visually related to the brand color.

Check Text Readability Across the Color Scale

Each generated color card compares the swatch against pure black and pure white text, then shows which text color has the better contrast ratio. The card label makes the recommendation explicit, such as Best text: Black or Best text: White, and keeps the WCAG AA normal-text indicator visible.

This is useful because a color ramp may switch from white text to black text as it becomes lighter or darker. Seeing the recommended text color beside the ratio helps prevent mistakes when turning generated colors into real buttons, labels, badges, and cards.

The result applies to the exact solid swatch and the recommended black or white text color. Test the final component separately when it uses transparency, gradients, images, overlays, different text colors, or interactive states. For a detailed comparison between any two colors, use the Color Contrast Checker. The WCAG color contrast guide explains the AA and AAA thresholds.

Export Tints, Shades, and Tones for CSS and Design

The developer output section gives you copy-ready formats for real projects. CSS custom properties are helpful for websites and design tokens, JSON works well for configuration or documentation pipelines, and the plain list is easy to paste into design specs, brand notes, or issue comments.

The CSS output uses understandable names based on the mix type and percentage, such as --color-base, --color-tint-10, --color-shade-50, and --color-tone-90. If tones are disabled, tone values are omitted from copy and export output. To use several generated values as background stops, continue with the CSS Gradient Generator and the CSS gradient guide.

Common Uses for Tints, Shades, and Tones

  • Build a consistent UI or brand color scale from one base color.
  • Create lighter tints for app backgrounds, alerts, callouts, and cards.
  • Create darker shades for buttons, active states, focus states, and dark surfaces.
  • Generate toned-down color variants for charts, tags, and secondary UI accents.
  • Copy HEX, RGB, HSL, CSS variables, JSON, or plain color lists for design handoff.
  • Check whether black or white text is more readable on each generated color.

Private Browser-Based Color Scale Generation

This online tints, shades, and tones generator is client-side. The color picker, HEX validation, interpolation, contrast recommendation, copy actions, and exports happen locally in your browser. You do not need to sign in, upload a file, or send your selected colors to Solvioza.

Related Guides & Articles

Learn more with practical guides related to this tool.

Frequently Asked Questions

A color shades and tints generator creates lighter, darker, and more muted versions of a base color. This tool generates tints by mixing with white, shades by mixing with black, and tones by mixing with neutral gray.

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. Tints usually feel lighter, shades feel deeper, and tones feel less saturated.

The tool uses percentage-based RGB interpolation. Each red, green, and blue channel is mixed toward white, black, or neutral gray by the selected percentage amount.

The default settings use nine steps with a 90% maximum mix amount. This creates clean, easy-to-read percentages from 10% to 90% without repeating the original base color.

Yes. You can switch the display format between HEX, RGB, and HSL. Individual color cards, section copy, and Copy All Colors respect the currently selected format.

Yes. The Developer Output section can generate CSS custom properties, valid JSON, or a plain color list. Tones are included only when the Include tones option is enabled.

Each generated color is compared against pure black text and pure white text. The tool selects whichever text color has the higher contrast ratio and shows whether it passes WCAG AA for normal text.

No. The Color Shades & Tints Generator works in your browser. Color generation, contrast checks, copying, and exports are handled client-side without uploading your color data.