Shades and Tints Generator
Automatically generate the lightest tints and darkest shades of any color, with its HEX code.
How to Generate Shades and Tints of a Color
Choose a Base Color
Select your starting color using the visual picker or enter its HEX code.
View the Tints and Shades
You'll automatically see 5 lighter tints and 5 darker shades generated from your color.
Copy the HEX you need
Click on any swatch to copy its HEX code to your clipboard.
Frequently asked questions about the shades and tints generator
Having lighter and darker variants of a color is essential for creating a coherent design palette (for example, for hover states, backgrounds, or borders). This tool calculates them automatically.
What's the difference between a tint and a shade?
+
A tint is obtained by mixing the color with white (lightening it) and a shade by mixing it with black (darkening it).
How many variants does it generate?
+
It generates 5 lighter tints and 5 darker shades from your base color, 10 in total.
Can I copy the codes?
+
Yes, click on any color in the list to copy its HEX code.
Can it be used to create a Tailwind-style design palette?
+
Yes, it's exactly the same concept as the 50-900 color scales used by many design systems.
Is it free?
+
Yes, this tool is completely free.
Is my color uploaded to any server?
+
No, all calculations are done directly in your browser.
Colors
Color Converter (HEX, RGB, HSL, CMYK)
Convert any color between HEX, RGB, HSL, and CMYK instantly, with live preview and the closest color name.
Color Palette Generator
Create harmonious 5-color palettes (complementary, analogous, triadic, or monochromatic) from a base color.
CSS Gradient Generator
Create linear or radial gradients with up to 4 colors and copy the ready-to-use CSS code.
WCAG Contrast Checker
Check if your text and background color combination meets AA and AAA accessibility levels.
Random Color
Generate a random color with one click and discover its name, HEX/RGB/HSL codes, and similar colors.
Color Picker (eyedropper)
Pick any color from your screen using the browser's eyedropper tool, or use the classic color picker.
Color Blindness Simulator
Upload an image and see how people with protanopia, deuteranopia, or tritanopia would perceive it.
Mesh Gradient Generator
Create backgrounds with mesh gradients (blurred color patches) and download them as PNG or copy the CSS code.
Color Mixer
Mix two colors and discover the intermediate tones step by step, with their HEX code.
Color Wheel (Harmonies)
Choose a color on the wheel and discover its harmonious combinations: complementary, analogous, triadic, and more.
Image Palette Extractor
Upload an image and automatically extract its dominant colors into a palette, with the HEX code for each one.
Average Color of an Image
Upload an image and instantly calculate its average color, with HEX, RGB and HSL codes.
Explore colors by family
More than 469 named colors, with their HEX, RGB, HSL and CMYK codes, organized into 12 color families.
