Tints & shades generator

What this tints and shades generator does

Enter one color and get a strip of darker shades on the left, the base in the middle and lighter tints on the right. Each is a plain mix of your color with black or white in sRGB, at evenly spaced ratios. Choose 2 to 10 steps in each direction, then click any swatch to copy its hex. It is the fastest way to produce the “slightly darker for hover, slightly lighter for a border” variants that every component needs.

How to use it

1. Type a CSS color in Base color or use the picker.
2. Drag Steps (2–10) to set how many tints and how many shades you want.
3. Read the strip, ordered darkest shade → base → lightest tint.
4. Click a swatch to copy. A check mark confirms the copy.

What the strip contains

With 5 steps the ratios are 1/6, 2/6, 3/6, 4/6 and 5/6 toward white or black, so the endpoints (pure white, pure black) are never included. For #6b46ff:

Position	Hex	Mix	Typical role
Shade 5	#120c2a	83% black	Text on light tints
Shade 4	#241755	67% black
Shade 3	#362380	50% black	Dark-mode surface
Shade 2	#472faa	33% black	Active / pressed
Shade 1	#593ad5	17% black	Hover
Base	#6b46ff	—	Primary button, links
Tint 1	#8465ff	17% white	Hover on dark
Tint 2	#9c84ff	33% white	Focus ring
Tint 3	#b5a3ff	50% white	Border, disabled
Tint 4	#cec1ff	67% white	Selected row
Tint 5	#e6e0ff	83% white	Subtle background

The strip can be dropped into CSS custom properties as-is:

:root {
  --brand: #6b46ff;
  --brand-hover: #593ad5;   /* shade 1 */
  --brand-active: #472faa;  /* shade 2 */
  --brand-border: #b5a3ff;  /* tint 3 */
  --brand-bg: #e6e0ff;      /* tint 5 */
}

Tints vs shades vs OKLCH ramps

Mixing with white and black is the traditional, predictable method — it is what Sass mix(), most Figma plugins and color-mix(in srgb, …) do. It has two known limits:

• Shades lose vibrancy faster than tints. Multiplying every channel toward zero makes a dark shade of a saturated color look slightly grey. Tints suffer less because white adds equally to all channels.
• Steps are not perceptually even. The visual jump between shade 4 and shade 5 is smaller than between tint 1 and tint 2, because the eye is more sensitive to changes in light colors.

For component states (hover, active, border) this does not matter — the differences are small and consistent. For a full 50–900 design-token ramp or for very saturated colors, use the palette generator, which keeps hue and spaces lightness evenly in OKLCH.

Common uses

• Button states: base, shade 1 for hover, shade 2 for active, tint 3 for a disabled look with reduced opacity.
• Form focus rings: tint 2 at 3px around the base-colored input.
• Status backgrounds: tint 5 of your success/warning/error colors gives a soft banner background that still clearly belongs to each status; pair with shade 4 for the text and check it in the contrast checker.
• Charts: a monochromatic series using every second swatch.

Related tools and snippets

• Palette generator — perceptually even OKLCH scale plus harmony colors for a full token set.
• Color mixer — the same mixing at a single, arbitrary percentage and in OKLCH or HSL as well as RGB.
• Contrast checker — make sure your chosen tint background and shade text pass WCAG AA.
• Color converter — convert a swatch to hsl() or oklch() for your stylesheet.
• Hover lift card snippet — a hover effect that pairs well with a one-step shade change.