Shades, Tints & Tones Tool

Create lighter, darker, and more muted variations of your colors.

All color tools
Muted Moss Green
Work with several base colors

Up to 24 solid colors.

#6A987CBase 1

Tints

#6A987CMuted Moss Green0% · text 6.40:1

Shades

#6A987CMuted Moss Green0% · text 6.40:1

Tones

#6A987CMuted Moss Green0% · text 6.40:1
Preview this color scale
A color, many possibilitiesGood things.
Thoughtfully made.

A quiet place for your next idea. See how this palette carries a headline, a paragraph, and a call to action.

Explore the collection
Interface studyYour next chapter
Shape the first ideaReady for review
Project name A fresh perspective
How these roles work together
  • Body text18.83:1 · AA text
  • Accent on background2.96:1 · Below AA text
  • Button label4.53:1 · AA text
Sample text pair · 18.83:1. Roles are suggested; check your final design.
Background #F0F4F1Text #000101Accent #6A987C
Download

Tints blend toward white, shades toward black, and tones toward gray. OKLab gives more even perceptual steps; sRGB blends screen color channels.

Saved work (0)

Save your first shade chart above. Its colors and settings will be ready to reopen.

Saved on this device with its settings. Download a project to keep a backup or import it on another device.

How to generate shades, tints, and tones
  1. Choose a base color in Shades, Tints & Tones Tool to generate its variations. A tint blends the color toward white, a shade toward black, and a tone toward gray. These three families help you explore lighter, darker, and less colorful versions of a palette.
  2. Choose 5, 10, or 20 intervals and a blending method. OKLab aims for more even perceptual steps; sRGB blends the encoded red, green, and blue channels directly. Compare the results before choosing a ramp.
  3. Open Work with several base colors to paste up to 24 solid colors. Separate values with spaces, commas, or new lines. Open each base-color chart to inspect its tints, shades, and tones; edit, add, or remove bases as needed.
  4. Turn on text contrast to compare black and white text recommendations, or test a custom text color. For WCAG AA, normal text needs 4.5:1 and large text needs 3:1; AAA raises those thresholds to 7:1 and 4.5:1 respectively.
  5. Copy HEX or RGB values, or download a complete chart as PNG/SVG, CSS tokens, CSV, text, or JSON. Exports include collapsed base-color charts too. Save your chart or download project JSON to keep its bases and settings.

Start with #336699. Compare a pale tint as a background, the base blue as a primary color, and a dark shade for text. Use the contrast check to choose the actual pair; a darker-looking shade is not automatically dark enough for every background.