Readable design tokens
Each step has a stable role and CSS variable name, so a highlight, base, and shadow can move from exploration into a component or design system without manual transcription.
Free browser color tool
Color shades generator for tints and toon shadows
Build a five-, seven-, or nine-step palette from one base color. Switch between mathematically even tints and shades or a more expressive toon-shading curve, then copy production-ready values without uploading anything.
Updated July 23, 2026
color shades generator
What does this color shades generator make?
This color shades generator turns one valid three- or six-digit HEX value into a centered scale with the original color preserved exactly. Classic mode mixes toward white for tints and black for shades. Toon mode changes hue, saturation, and brightness together to create warmer highlights and cooler shadows that feel less mechanical. Every result includes HEX, RGB, HSB, contrast against white and black, a copy action, CSS custom properties, and a locally generated PNG.
One base color, three useful outputs
Use the scale as a starting system, not as an unnamed row of decorative swatches.
Visible contrast checks
White and black contrast ratios appear beside every shade. The labels show AA normal-text, AA large-text, or fail, helping you choose a plausible foreground before testing the complete interface.
Cartoon-friendly shading
Toon mode adds a restrained hue shift as values get lighter or darker. It creates a livelier family for character art, badges, game UI, and flat illustration while keeping the base HEX unchanged.
HEX · RGB · HSB · WCAG
Generate a tint-to-shadow scale
Choose a base color, mode, and number of steps. The scale updates immediately in your browser.
Tint 3#D1EFF6
RGB 209, 239, 246
HSB 191°, 15%, 96%
- White text
- 1.21:1Below AA
- Black text
- 17.39:1AA normal
--toon-shade-01Tint 2#9FDEED
RGB 159, 222, 237
HSB 192°, 33%, 93%
- White text
- 1.48:1Below AA
- Black text
- 14.15:1AA normal
--toon-shade-02Tint 1#6ACCE3
RGB 106, 204, 227
HSB 191°, 53%, 89%
- White text
- 1.85:1Below AA
- Black text
- 11.36:1AA normal
--toon-shade-03Base#2FB8D8
RGB 47, 184, 216
HSB 191°, 78%, 85%
- White text
- 2.34:1Below AA
- Black text
- 8.97:1AA normal
--toon-shade-04Shade 1#22869E
RGB 34, 134, 158
HSB 192°, 78%, 62%
- White text
- 4.22:1AA large
- Black text
- 4.97:1AA normal
--toon-shade-05Shade 2#175A6A
RGB 23, 90, 106
HSB 192°, 78%, 42%
- White text
- 7.76:1AA normal
- Black text
- 2.71:1Below AA
--toon-shade-06Shade 3#0C3038
RGB 12, 48, 56
HSB 191°, 79%, 22%
- White text
- 14.04:1AA normal
- Black text
- 1.50:1Below AA
--toon-shade-07:root {
--toon-shade-01: #D1EFF6;
--toon-shade-02: #9FDEED;
--toon-shade-03: #6ACCE3;
--toon-shade-04: #2FB8D8;
--toon-shade-05: #22869E;
--toon-shade-06: #175A6A;
--toon-shade-07: #0C3038;
--toon-shade-base: var(--toon-shade-04);
}How to generate useful color shades
A scale becomes useful when the base, spacing, and intended role are explicit. Follow the same short workflow whenever you create or revise a palette.
1. Start from an authoritative HEX
Use a value from the design file, brand token, or sampled source rather than guessing from a compressed screenshot. The generator preserves that exact six-digit value in the center, so every neighboring step remains traceable to the chosen source.
2. Choose the scale for the job
Classic mode is predictable for backgrounds, borders, charts, and interface states. Toon mode is an artistic heuristic for highlights and shadows. Compare both, then keep the simpler scale unless the hue-shifted result genuinely improves hierarchy.
3. Verify contrast in context
Treat the displayed ratios as a fast filter. Check the final text size, weight, surrounding color, focus state, and interactive component before release. A passing swatch does not automatically make the complete design accessible.
Classic shades versus toon shades
Both modes keep the base in the middle, but they solve different problems. This table makes the transformation and expected use explicit.
| Method | Color change | Best fit | Watch for |
|---|---|---|---|
| Classic | Linear RGB mix toward white or black | UI surfaces, borders, charts, neutral token ramps | Midpoints can feel gray or mechanically even |
| Toon | HSB brightness curve with small hue and saturation shifts | Character art, game UI, stickers, flat illustration | It is a creative starting point, not a brand specification |
| Contrast labels | WCAG relative-luminance ratio against pure white and black | Early foreground screening for each swatch | Test the real font, size, state, and surrounding component |
How the shade calculation works
An odd step count creates a true center. With five steps, the scale contains two lighter colors, the original base, and two darker colors; seven and nine steps add finer intervals on both sides. Classic tints are produced by mixing the base RGB channels toward 255, while classic shades mix them toward zero. The outer steps stop before pure white and pure black, leaving useful color identity at both ends. Because the base is not recalculated, its HEX, RGB, and HSB values remain exact.
Toon mode follows a different curve. Highlights gain brightness, lose some saturation, and shift a few degrees toward a warmer direction; shadows lose brightness, gain a little saturation, and move toward a cooler direction. The adjustment grows with distance from the center. This is a transparent design heuristic rather than a physical light simulation. Materials, ambient light, reflected color, and scene composition can demand a different hue direction, so artists should treat the output as an editable draft.
Tints, tones, and shades are related but different
In traditional color terminology, a tint is made by adding white and a shade by adding black. A tone usually means adding gray, which reduces intensity while controlling lightness. Digital tools often use “shade” as a broad label for every lighter and darker variation, so interfaces can blur these definitions. This generator names the lighter side tint and the darker side shade. Its classic method does not insert a separate gray-only tone row; the base remains the reference between both directions.
The distinction matters when handing a palette to another person. “Use shade 2” is reproducible when the scale, base color, and method are saved; “make it a little darker” is not. Copy the complete CSS block when a project needs consistent naming. If a desaturated hover or disabled state is required, create it intentionally with an HSB picker rather than assuming every midpoint in a white-to-black ramp is an appropriate tone.
Standards, measurements, and method notes
The generator separates reproducible calculations from creative judgment. These references explain the value formats, terminology, and contrast thresholds used on the page.
- CSS Color Module Level 4 defines six-digit hexadecimal notation as three 8-bit sRGB channels. Each channel has 256 possible values, producing 16,777,216 RGB combinations before alpha. W3C CSS Color Module Level 4
- WCAG 2.2 sets a 4.5:1 minimum contrast ratio for normal text and 3:1 for large text at level AA; its enhanced criterion uses 7:1 for normal text. W3C Web Content Accessibility Guidelines 2.2
- The classic scale is reproducible RGB interpolation. The toon scale is clearly labeled as a Toon Tone design heuristic, not a lighting model, official brand palette, or proof of accessibility. W3C colour theory reference
WCAG 2.2 states:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Continue working with your palette
Color shades generator FAQ
What is the difference between a tint and a shade?
A tint is a color mixed toward white; a shade is mixed toward black. Tone usually refers to adding gray. This tool places tints before the exact base and shades after it.
Does the generator preserve my original HEX color?
Yes. Valid three-digit HEX is expanded to six digits, and that normalized value stays exactly in the center of every five-, seven-, or nine-step scale.
Which mode should I choose for interface design?
Start with Classic for predictable surfaces, borders, and states. Try Toon when an illustration or game interface benefits from warmer highlights and cooler, more saturated shadows.
Do the WCAG labels guarantee accessibility?
No. They calculate the swatch ratio against pure white or black. You still need to test the actual foreground, background, font size, weight, state, and complete component.
Are my colors uploaded or stored?
No upload or account is required. Generation, copying, contrast calculation, and PNG rendering happen in the browser. The download is created locally on your device.