Why are there 11 swatches, not 9?

The brief asked for 5 lighter tints + base + 5 darker shades = 11. We include pure white and pure black as the endpoints so the ramp is complete — if you only want the tints and shades, skip the white and black swatches when copying.

How is the mixing done?

Linear RGB interpolation: tint = base × (1 − amount) + white × amount, shade = base × (1 − amount) + black × amount. Amount goes from 20% to 80% in 20% steps, plus 100% (pure white/black) at the ends.

Is my colour sent to a server?

No. Mixing, conversion and export all run in your browser. Nothing is uploaded.

Can I get HSL values too?

Use the related Color Picker tool — it converts any HEX to RGB and HSL. The shade generator focuses on producing a usable ramp of HEX values for design tokens.

Design Tools

Color Shade Generator

Pick a base colour and instantly generate 11 swatches — 5 lighter tints (mixed with white), the original, and 5 darker shades (mixed with black). Each swatch is click-to-copy as HEX. Export the full ramp as CSS variables or a Tailwind colour object.

Your input is processed locally in your browser. It is not uploaded to Dueneo.

Loading Color Shade Generator…

How to use

1
Pick a base colour
Use the colour picker, type a HEX value, or click one of the common-colour swatches. The ramp updates instantly.
2
Browse the 11 swatches
Lightest white is on the left, the base colour is in the middle (marked Base), darkest black is on the right. Five tints above, five shades below.
3
Click to copy
Click any swatch to copy its HEX value to your clipboard. The label and HEX are shown on the swatch.
4
Export as CSS or Tailwind tokens
Use the Copy buttons in the export panel to grab the full ramp as CSS custom properties or a Tailwind colour object — ready to paste into your design-system config.

Common use cases

Generate a complete colour ramp for a design system from a single brand colour.
Find the right tint or shade for hover/active/disabled UI states of a primary button.
Build accessible colour scales — pair with the Contrast Checker tool to verify text legibility.
Export CSS variables or Tailwind tokens for a new design token file.

Limitations

The ramp uses linear RGB mixing (base × (1 − amount) + white/black × amount), not HSL lightness. This is closer to what design tools like Figma produce when you mix colours in RGB mode, but the result may differ slightly from your design software's shade generator.
Alpha / opacity variants are not generated — use the related Color Picker or CSS Gradient Generator for those.
The end swatches (pure white and pure black) are included for completeness but usually aren't useful as design tokens — exclude them when copying into your config.

Frequently asked questions

Related tools

View all

Color Picker

Pick colours and convert between HEX, RGB, HSL.

design

Open

Color Palette Generator

Generate harmonious colour palettes from a base colour.

design

Open

CSS Gradient Generator

Build linear and radial CSS gradients visually.

design

Open

Contrast Checker

Check WCAG colour contrast between two colours.

design

Open

Loading Color Shade Generator…

How to use

Pick a base colour

Use the colour picker, type a HEX value, or click one of the common-colour swatches. The ramp updates instantly.

Browse the 11 swatches

Lightest white is on the left, the base colour is in the middle (marked Base), darkest black is on the right. Five tints above, five shades below.

Click to copy

Click any swatch to copy its HEX value to your clipboard. The label and HEX are shown on the swatch.

Export as CSS or Tailwind tokens

Use the Copy buttons in the export panel to grab the full ramp as CSS custom properties or a Tailwind colour object — ready to paste into your design-system config.

Common use cases

Generate a complete colour ramp for a design system from a single brand colour.

Find the right tint or shade for hover/active/disabled UI states of a primary button.

Build accessible colour scales — pair with the Contrast Checker tool to verify text legibility.

Export CSS variables or Tailwind tokens for a new design token file.

Limitations

The ramp uses linear RGB mixing (base × (1 − amount) + white/black × amount), not HSL lightness. This is closer to what design tools like Figma produce when you mix colours in RGB mode, but the result may differ slightly from your design software's shade generator.
Alpha / opacity variants are not generated — use the related Color Picker or CSS Gradient Generator for those.
The end swatches (pure white and pure black) are included for completeness but usually aren't useful as design tokens — exclude them when copying into your config.