Discover the lighter, darker, and softer sides of any color.
All color tools
Enter a valid HEX color.
Work with several base colors
Enter a valid HEX color.
AA: 4.5:1 · AAA: 7:1 · Large text: 3:1. Pass/fail uses the full contrast ratio.
#6A987CBase 1
Enter a valid HEX color.
Tints
Shades
Tones
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.
Removed from saved work.
Saved on this device with its settings. Download a project to keep a backup or import it on another device.
Create lighter, darker, and softer variations
- Choose your base color to update its chart immediately. Open Work with several base colors to paste up to 24 solid colors. HEX, RGB, HSL, CSS names and other fixed CSS colors are accepted; spaces, commas and new lines separate values.
- Choose 5, 10 or 20 intervals. OKLab creates more even perceptual steps; sRGB blends the red, green and blue channels directly.
- Open a base-color chart to compare its tints, shades and tones. Choose Edit to adjust that base, or add and remove colors. Undo and Redo retain earlier settings.
- Show text contrast to compare black/white recommendations or test your own text color on every swatch. AA needs 4.5:1 for regular text, AAA needs 7:1, and large text needs 3:1.
- Choose HEX or RGB copying, or download a complete PNG/SVG chart, CSS tokens, CSV, text or JSON. Every base is included, including collapsed charts.
- Save a named chart with every base, blending method, interval count and text setting. Project JSON backups retain the full chart.
Paste #336699 #E79068 #8B74B5, switch to sRGB, and compare white text across their tints and shades.