Color palette generator
Generate beautiful color palettes with the space bar. Lock colors, pick schemes and moods, check contrast, and export to CSS, Tailwind, ASE, or PNG.
Color shades generator
Generate tints, shades, and tones of any color in even steps. Classic or perceptual mixing, HEX/RGB/HSL codes, and export to CSS or Tailwind.
How to use Color shades generator
Make tints, shades and tones of any color. Enter a hex code and get lighter tints (mixed with white), darker shades (mixed with black) and softer tones (mixed with gray) in even steps — from 3 to 20 each way.
- Classic mixing matches what most tint-and-shade tools give, in 10% steps by default
- Perceptual mixing (OKLab) makes each step look equally different to the eye
- Show codes as HEX, RGB, HSL or OKLCH and click any swatch to copy
- Export the full light-to-dark scale as CSS, SCSS, Tailwind, JSON, ASE or PNG
Color shades generator FAQs
Is Color shades generator free?
Color shades generator is a free online tool on ReallyUseful.Tools. No account is required.
Does Color shades generator run in my browser?
Color shades generator is designed to run in your browser where supported, so files can stay on your device instead of being uploaded to a server.
More Colors
Color picker & converter
Pick any color and get HEX, RGB, HSL, CMYK, OKLCH, and code values. Eyedropper, color names, harmonies, tints and shades, and contrast.
Color wheel
Interactive color wheel for complementary, analogous, triadic, and other color schemes. Switch between the artist's RYB wheel and the RGB wheel.
Color palette from image
Extract a color palette from any photo or design. Drag markers to fine-tune colors, then export CSS, Tailwind, JSON, Adobe ASE, or PNG.
CSS gradient generator
Design linear, radial, and conic CSS gradients visually. Drag color stops, blend in OKLab, add easing, and export CSS, Tailwind, SVG, or PNG.