Tints & Shades Generator
Generate tints (lighter) and shades (darker) of any hex color. Preview swatches and copy hex codes for your design system.
Tints (lighter →)
Tint 1#eff0fe
Tint 2#e0e0fc
Tint 3#d0d1fb
Tint 4#c1c2f9
Tint 5#b1b3f8
Tint 6#a1a3f7
Tint 7#9294f5
Tint 8#8285f4
Tint 9#7375f2
Base
Base#6366f1
(← darker) Shades
Shade 1#595cd9
Shade 2#4f52c1
Shade 3#4547a9
Shade 4#3b3d91
Shade 5#323379
Shade 6#282960
Shade 7#1e1f48
Shade 8#141430
Shade 9#0a0a18
Full scale (click to copy)
How to Use Tints & Shades Generator
- 1Enter a base hex color or pick with the color picker.
- 2Choose the number of tints and shades to generate.
- 3Preview the color swatches from light to dark.
- 4Click any swatch to copy its hex code.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
Frequently Asked Questions
What is the difference between a tint and a shade?▾
A tint is created by adding white to a color, making it lighter. A shade is created by adding black to a color, making it darker. A tone is created by adding gray. In digital design, tints and shades are used to create cohesive color scales for UI components — lighter tints for backgrounds, mid-range for buttons and interactive elements, darker shades for text and borders. Design systems like Tailwind CSS use 10-step scales (50, 100, 200, ... 900).
How are the tints and shades calculated?▾
This generator uses linear interpolation between the base color and white (for tints) or black (for shades). Each step blends the base color with white or black by an equal percentage. For example, with 9 steps: tint 1 is 10% base + 90% white, tint 5 is 50/50, tint 9 is 90% base + 10% white. This produces perceptually consistent steps in the sRGB color space.
How do I use these colors in CSS?▾
You can paste the hex codes directly into CSS, or define them as CSS custom properties: --color-100: #f5f3ff; --color-500: #7c3aed; --color-900: #1e0a4b; etc. Then reference them with var(--color-500). For Tailwind CSS, you can add the generated scale to your tailwind.config.js under theme.colors. For design tokens, export as a JSON object for use in Figma, Storybook, or design token tools.
Should I use HSL instead of RGB for color scales?▾
HSL (hue, saturation, lightness) is often preferred for generating perceptually uniform scales. Adjusting lightness in HSL while keeping hue and saturation constant produces consistent-looking colors. However, sRGB interpolation (what this tool uses) is simpler and produces predictable results for UI design. For more advanced perceptual color spaces, consider OKLCH or LCH which are supported in modern CSS.
How do I export these colors to Figma?▾
In Figma, you can create a color library by making a frame with rectangles for each color swatch and adding the hex values as labels. Then right-click → Create Component for each, and publish to your team library. Alternatively, use the "CSS Variables" export and paste into a Figma plugin like Design Tokens or Token Studio. Copy the generated CSS variables from this tool and paste them directly into the plugin.