How to Make Lighter Tints of a Colour (HEX, RGB and HSL)

The short answer

A tint is a colour mixed with white. To make one, move each red, green and blue value part of the way towards 255: new value = old value + (255 − old value) × percentage. The Color Picker does this for you: pick or type a HEX colour and it shows seven tints, from a 10% mix with white to a 95% mix, and copies any of them with one click.

Tints are what you want for hover states, light backgrounds, table stripes and badges that match a brand colour without shouting.

Tints, shades and tones

These three words are often mixed up:

Term	What is added	Result
Tint	White	Lighter, softer version of the colour
Shade	Black	Darker, deeper version
Tone	Grey	Duller, less saturated version

The Color Picker's Tints & shades strip produces tints only, all lighter than the colour you picked. For a darker shade, use the method in the section on shades below.

How to get tints with the Color Picker

Click the colour square to open your system's colour picker, or type a code into the HEX value box. Type all six digits, such as #4f6ef7; three-digit shorthand like #fff is not expanded and gives invalid results.

The tool shows the colour as HEX, RGB, RGBA, HSL and a CSS variable line. Click any row to copy it.

Below, the Tints & shades strip shows seven swatches labelled 100 to 700. Click a swatch to copy its HEX code; a confirmation line shows what was copied.

The labels run the opposite way to some design systems. Here, 100 is the strongest tint (closest to your colour) and 700 is the palest. In Tailwind CSS, for example, a higher number means a darker colour. If you copy these tints into a design system, rename them to match your own scale.

The formula, worked through

Take the colour #4f6ef7. In RGB it is red 79, green 110, blue 247. For a 10% tint:

• Red: 79 + (255 − 79) × 0.10 = 96.6, rounded to 97
• Green: 110 + (255 − 110) × 0.10 = 124.5, rounded to 125
• Blue: 247 + (255 − 247) × 0.10 = 247.8, rounded to 248

RGB(97, 125, 248) is #617df8. The tool uses these mixing percentages for its seven swatches:

Swatch	White mixed in	HEX	HSL
Original	0%	#4F6EF7	hsl(229, 91%, 64%)
100	10%	#617DF8	hsl(229, 92%, 68%)
200	25%	#7B92F9	hsl(229, 91%, 73%)
300	40%	#95A8FA	hsl(229, 91%, 78%)
400	55%	#B0BEFB	hsl(229, 90%, 84%)
500	70%	#CAD4FD	hsl(228, 93%, 89%)
600	85%	#E5E9FE	hsl(230, 93%, 95%)
700	95%	#F6F8FF	hsl(227, 100%, 98%)

Look at the HSL column. The hue stays at about 229 and the saturation stays around 90%, while the lightness climbs from 64% to 98%. That is why tints look like the same colour, only paler. Small changes in hue and saturation at the light end come from rounding to whole RGB numbers.

Doing the same thing in HSL

Because a tint mostly raises lightness, you can get a similar result by editing the L value in HSL directly. Starting from hsl(229, 91%, 64%), you could use hsl(229, 91%, 80%) for a soft background and hsl(229, 91%, 95%) for a very light one.

HSL is handy when you write CSS by hand, because you change one number instead of three. The two methods do not give identical colours, so if you need to match a palette exactly, copy the HEX values from the tool.

How to make a darker shade

For a shade, multiply each RGB value by the amount of colour you want to keep: new value = old value × (1 − percentage).

For a 20% shade of #4f6ef7:

• Red: 79 × 0.8 = 63.2, rounded to 63
• Green: 110 × 0.8 = 88
• Blue: 247 × 0.8 = 197.6, rounded to 198

That gives #3f58c6. A 40% shade gives #2f4294. Shades work well for pressed buttons, borders and text that needs to sit on a light tint of the same colour. You can also lower the L value in HSL for a similar effect.

Tints or transparency?

Another way to lighten a colour is to keep it the same and make it see-through, for example rgba(79, 110, 247, 0.1). The difference matters:

• A solid tint looks the same everywhere. Use it when the colour must be predictable, such as brand backgrounds and print.
• A transparent colour mixes with whatever is behind it. On white it looks like a tint; on a grey card or a photo it looks different. Use it for overlays and hover effects that should adapt to the background.

The Color Picker's RGBA row always shows an alpha of 1 (fully solid). Change the last number yourself if you want transparency.

Keep text readable on tints

Pale tints make good backgrounds, but text on them still needs enough contrast. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal body text at level AA. Here are a few combinations from the example colour, calculated with the WCAG formula:

Text	Background	Contrast ratio	Normal text at AA?
#4F6EF7	White	4.28:1	No (just below 4.5)
#3F58C6 (20% shade)	White	6.14:1	Yes
#1A1A1A	#E5E9FE (600 tint)	14.44:1	Yes
#4F6EF7	#E5E9FE (600 tint)	3.55:1	No
White	#B0BEFB (400 tint)	1.81:1	No

The pattern is typical. A mid-tone brand colour is often fine for large headings and buttons but slightly too light for small text. Use a darker shade for links and body text, and put dark text, not white, on pale tints.

Common mistakes

• Using three-digit HEX codes. Expand #36f to #3366ff before typing it into the tool.
• Lightening by eye in a design app and ending up with several slightly different "light blues" across a site. Pick tints from one formula and reuse them.
• White text on pastel backgrounds. It almost never passes contrast checks.
• Treating transparency as a tint. A 10% transparent blue over a grey card is not the same colour as a 90% tint.

Related tools

Build a full set of matching colours with the Color Palette Generator, or turn two of your tints into a background with the CSS Gradient Generator. For a refresher on the colour formats themselves, read HEX, RGB and HSL explained.