#007FFF10 tones
Azure
Add a neutral gray to your colors. Tone steps mix the base hue with#808080to produce muted, real world variants.
Base color
Variations
Export codeCSS, Tailwind, SCSS, JS, JSON, SVGClick any swatch to copy HEX0 to 90% gray
TonesMixed with #808080
Export code
10 colors, named azure.
Format
Color values
variables.css
:root {
--azure-tone-0: #007FFF;
--azure-tone-10: #0D7FF2;
--azure-tone-20: #1A7FE6;
--azure-tone-30: #267FD9;
--azure-tone-40: #337FCC;
--azure-tone-50: #4080C0;
--azure-tone-60: #4D80B3;
--azure-tone-70: #5A80A6;
--azure-tone-80: #668099;
--azure-tone-90: #73808D;
}
How it works
Mix any color with neutral grey to produce tones: muted variants that keep the hue but drop the intensity.
Tones, tints, and shades
A tint adds white, a shade adds black, and a tone adds grey. Tones are the least used and the most useful for interfaces, because they lower intensity without moving lightness, so a toned color still works at the same place in a layout.
Fully saturated brand colors are exhausting across large areas. Toning a hero background by 20 to 30 percent usually reads as more considered without anyone noticing what changed.
Frequently asked
3 questions people ask about the tones generator.
1What is the difference between a tone, a tint, and a shade?
A tint is the color mixed with white, a shade is mixed with black, and a tone is mixed with grey. Tints and shades move lightness; tones mainly reduce saturation.
2When should I use a toned color?
For large surfaces such as backgrounds, cards, and section fills, where a fully saturated color would dominate. Keep the saturated version for small elements that need attention, like buttons.
3Do tones change the hue?
No. Mixing with a neutral grey leaves the hue angle intact and pulls saturation toward zero.