Tint & Shade Generator
Turn a single brand color into a full UI scale. Every step shows contrast on white and black plus CMYK for print specs.
50
#F8F5FB
cmyk(1,2,0,2)
100
#E9E1F3
cmyk(4,7,0,5)
200
#D3C4E6
cmyk(8,15,0,10)
300
#BDA6DA
cmyk(13,24,0,15)
400
#A788CD
cmyk(19,34,0,20)
500
#926BC1
cmyk(24,45,0,24)
500
#6D39AC
cmyk(37,67,0,33)
600
#5D3092
cmyk(36,67,0,43)
700
#4C2878
cmyk(37,67,0,53)
800
#3C1F5F
cmyk(37,67,0,63)
900
#2C1745
cmyk(36,67,0,73)
950
#1B0E2B
cmyk(37,67,0,83)
950
#0D0715
cmyk(38,67,0,92)
theme: {
extend: {
colors: {
brand: {
50: '#F8F5FB',
100: '#E9E1F3',
200: '#D3C4E6',
300: '#BDA6DA',
400: '#A788CD',
500: '#926BC1',
500: '#6D39AC',
600: '#5D3092',
700: '#4C2878',
800: '#3C1F5F',
900: '#2C1745',
950: '#1B0E2B',
950: '#0D0715',
},
},
},
},Validate text pairs with the WCAG contrast checker.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Interactive Color Wheel
Drag to pick a hue and see complementary, triadic, and analogous harmonies live — with HEX, RGB, and CMYK values.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
Learn how color models work in our HSL color guide, then convert any swatch with the HEX to CMYK converter for vendor handoffs.
FAQ
Frequently asked questions
Common questions about this tool.
- What is a tint and shade generator?
- It creates lighter tints (mixed toward white) and darker shades (mixed toward black) from one base color — the foundation of design system color ramps.
- Does this match Tailwind naming?
- Yes. The scale uses steps 50, 100, 200 … 950 matching Tailwind CSS conventions. Export directly into
tailwind.config.js. - How do I pick accessible text colors?
- Check the /white and /black contrast badges on each swatch, or run pairs through the WCAG contrast checker.