Generate beautiful tints and shades from any color instantly
Color Tint & Shade Generator
rgb(59, 130, 246) · hsl(217, 91%, 60%)
/* Tints (lighter) */ Tint 100%: #FFFFFF Tint 90%: #EBF3FE Tint 80%: #D8E6FD Tint 70%: #C4DAFC Tint 60%: #B1CDFB Tint 50%: #9DC1FB Tint 40%: #89B4FA Tint 30%: #76A8F9 Tint 20%: #629BF8 Tint 10%: #4F8FF7 /* Base */ Base: #3B82F6 /* Shades (darker) */ Shade 10%: #3575DD Shade 20%: #2F68C5 Shade 30%: #295BAC Shade 40%: #234E94 Shade 50%: #1E417B Shade 60%: #183462 Shade 70%: #12274A Shade 80%: #0C1A31 Shade 90%: #060D19 Shade 100%: #000000
The Tint and Shade Generator lets you create a full spectrum of lighter tints and darker shades from any hex color in seconds. Pick your base color, choose how many steps you need, and instantly preview every swatch alongside HEX, RGB, or HSL values with WCAG contrast ratings — perfect for design systems, UI palettes, and brand color scales.
A tint is made by mixing a color with white, making it progressively lighter. A shade is made by mixing a color with black, making it progressively darker. Together they form a complete lightness scale around your base color.
Copy any HEX, RGB, or HSL value using the copy button on each swatch or export all values at once. Paste them directly into your CSS custom properties, Tailwind config, or any design tool that accepts standard color formats.
WCAG (Web Content Accessibility Guidelines) contrast ratings measure how readable text is on a background color. AA (4.5:1) is the minimum for normal text, AAA (7:1) is enhanced accessibility, and 'Fail' means the contrast is too low for accessible body text.
Yes. Use the 'Export All Values' section at the bottom to copy every tint and shade in plain-text format with labels, ready to paste into a style guide, Figma, or a design token file.