COSTUI

Color Shades Generator

Enter one base color and get a ready-to-use ramp of tints and shades, each labelled with its hex value for your palette or design tokens.

Tints & shades

Tints (mixed toward white)

90%
#fbebf0
80%
#f7d6e2
70%
#f3c2d3
60%
#efadc4
50%
#eb99b6
40%
#e685a7
30%
#e27098
20%
#de5c89
10%
#da477b
base
#d6336c

Shades (mixed toward black)

10%
#c12e61
20%
#ab2956
30%
#96244c
40%
#801f41
50%
#6b1a36
60%
#56142b
70%
#400f20
80%
#2b0a16
90%
#15050b

Each swatch mixes your base color the stated percentage toward pure white (tint) or pure black (shade). Copy the hex values straight into your palette or design tokens.

One brand color is never enough

A single hex value can name your brand, but an interface built from it needs a whole family: subtle background fills, hover and active states, borders, and text that stays legible on light surfaces. Deriving those from the base color — rather than picking each one separately — keeps the whole set in the same key, so the UI feels coherent instead of stitched together.

The ramp here mixes your color toward white for tints and toward black for shades in even percentage steps. Copy the hex values you want into your palette, then fine-tune by eye and always re-check contrast before you put text on any of them.

Frequently Asked Questions

What is the difference between a tint and a shade?

A tint is your base color mixed toward white, which makes it lighter and softer. A shade is your base color mixed toward black, which makes it darker and deeper. Together they give you a ramp of related colors that all share the same starting hue.

How are the shades calculated?

Each channel is mixed linearly toward the target. A tint at 30% moves each RGB channel 30% of the way from your color to 255 (white); a shade at 30% moves each channel 30% of the way toward 0 (black). At 0% you get the base color and at 100% you get pure white or pure black.

Why do I need a whole ramp instead of one color?

Real interfaces need more than a single brand color: a lighter tint for hover and selected states, a very light one for backgrounds and badges, and darker shades for borders, pressed states, and text on light surfaces. Generating them from one base keeps the family visually consistent.

Is a linear RGB mix the same as what design tools produce?

Not always. This tool mixes in sRGB space, which is simple and predictable and matches how many CSS and design workflows think about tints and shades. Some tools mix in HSL or a perceptual space like OKLCH, which can keep lightness steps more even. Treat these values as a solid starting ramp and adjust by eye.

Will the lighter tints have enough contrast for text?

Often not — very light tints are meant for backgrounds and fills, not for text. Whenever you place text on one of these colors, check the pairing with a contrast checker to confirm it meets WCAG AA or AAA for your text size.

This is a helper that gives estimates — verify against your design system and check text contrast with real WCAG tooling before shipping these colors.