Shade and tint generator: lighter and darker versions of any color

Enter a color to get nine tints (mixed with white), nine shades (mixed with black) and nine tones (mixed with gray) in 10% steps, plus its codes, six color harmonies and contrast against white, black and a background you choose.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated November 10, 2026

Your color#7B3F8Cmedium-dark, saturated purple

Pick or paste a color

HEX: #7B3F8C
RGB: rgb(123, 63, 140)
HSL: hsl(287, 38%, 40%)

Best text on it: white at 7.16:1

Build a palette Make a gradient Check contrast Wallpaper

#7B3F8C#7B3F8C

Every code for #7B3F8C

HEX#7B3F8C
RGBrgb(123, 63, 140)
HSLhsl(287, 38%, 40%)
HSV287°, 55%, 55%
CMYK12%, 55%, 0%, 45%
Lablab(37% 36.1 -32.2)
OKLCHoklch(47.5% 0.135 318.4)
Decimal8077196

Tints, shades and tones

From white to black in 10% steps, with #7B3F8C in the middle. Tap a code to copy it.

90%#F2ECF4
80%#E5D9E8
70%#D7C5DD
60%#CAB2D1
50%#BD9FC6
40%#B08CBA
30%#A379AF
20%#9565A3
10%#885298
Base#7B3F8C
10%#6F397E
20%#623270
30%#562C62
40%#4A2654
50%#3E2046
60%#311938
70%#25132A
80%#190D1C
90%#0C060E

Tones (mixed with gray)

10%#7C468B
20%#7C4C8A
30%#7D5388
40%#7D5987
50%#7E6086
60%#7E6685
70%#7F6D84
80%#7F7382
90%#807A81

Matching colors

Complementary

#7B3F8C
#508C3F

Analogous

#543F8C
#7B3F8C
#8C3F77

Triadic

#7B3F8C
#8C7B3F
#3F8C7B

Split complementary

#7B3F8C
#778C3F
#3F8C54

Tetradic (square)

#7B3F8C
#8C543F
#508C3F
#3F778C

Monochromatic

#1E1022
#4D2757
#7B3F8C
#A460B7
#C295CF

#7B3F8C in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

#7B3F8C with its complement, its triad and its tint and shade

#7B3F8C
Triad #8C7B3F
Triad #3F8C7B
Complement
50% tint
50% shade

#7B3F8C in use

New collectionAutumn edit

Card body text stays dark for reading; #7b3f8c carries the header and the button.

Shop nowTag

Headline in #7B3F8C

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

Typical color vision#7B3F8C
Protanopia (no red cones)#2F548F
Deuteranopia (no green cones)#435A8A
Tritanopia (no blue cones)#7B4B5F

Contrast and readability

Pairing	Ratio	WCAG 2.2
as text on white	7.16:1	AA AA large AAA
as text on black	2.93:1	AA AA large AAA
white text on it	7.16:1	AA AA large AAA
black text on it	2.93:1	AA AA large AAA
on your background	6.25:1	AA AA large AAA

Try a background

Export

:root {
  --7b3f8c: #7b3f8c;
  --7b3f8c-rgb: 123 63 140;
  --7b3f8c-on: #ffffff;
}

On this page

Designers rarely need just one color. A button needs a hover state, a card needs a faint background, a chart needs a darker line, and all of them should look related. The fastest way to get there is to start with one color and move it toward white, black or gray. This generator does that for any color you type.

What the tool shows

Enter a hex code in Your color, or use the color picker beside it. The page then fills in four things:

Color codes in HEX, RGB, HSL, HSV, CMYK, Lab, OKLCH and decimal form, each with its own copy button.
Tints, shades and tones, in three strips labeled 10% to 90%.
Matching colors: complementary, analogous, triadic, split complementary, tetradic and monochromatic sets.
Contrast and readability, listing your color as text on white and on black, white and black text on your color, and a pairing with a background you set under Try a background.

At the bottom, a CSS variable block can be copied in one click.

Tints, shades and tones

A tint is your color mixed with white, a shade is mixed with black, and a tone is mixed with mid gray. The percentage is how much of the added color goes in, so the 30% tint is 70% your color and 30% white. The mix happens in sRGB, the same default as CSS's color-mix(), so you can reproduce any step in a stylesheet and get the same result.

Tints stay lively and turn pastel; shades turn deep and a little muted; tones lose saturation but keep their brightness, which gives the dusty, vintage look that interior designers like.

Worked example

Your brand color is the purple #7B3F8C and you need states for a website button. White text on the base purple measures 7.16:1. For the hover state, take the 10% shade, #6F397E, where white text rises to 8.19:1, and for the pressed state the 20% shade, #623270, at 9.50:1. A subtle tinted background for a notification strip comes from the 90% tint, #F2ECF4, and the brand purple on top of it measures 6.16:1, enough for body text.

A tint can look right and still fail. The 20% tint, #9565A3, looks like a nice disabled-state purple, but white text on it measures 4.49:1. ColorPlum cuts ratios instead of rounding them, so that is a fail against the 4.5:1 requirement for normal text, by a hair. The 10% tint, #885298, gives white text 5.66:1 and passes.

Using the output

Copy a code from a chip to paste it into a design file, or use Copy next to the CSS variable.
To compare your color with others in a set, send it to the color palette generator, or check a specific pair on the contrast checker.
To spread a color across a background, use the gradient generator, which accepts the same hex codes.

Tones (mixed with gray)

What the tool shows

Tints, shades and tones

Worked example

Using the output

Sources