Create progressively lighter variations of any color

Create lighter HSL variants by moving a base colour toward white.

freeworks offlinenothing uploaded
ToolColor Tints
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The input becomes HSL and each tint increases lightness toward one while preserving hue and saturation. The results convert back to RGB and hex.

  • Five tints are the initial count.
  • The scale models screen blending toward white, not paint mixing.

Worked example

Tints of Red
Generate lighter tints of red
Input
											#E74C3C
Output
												#E74C3C
#ED796D
#F3A69E
#F9D2CE
#FFFFFF

When to use this

UI themes create hover surfaces, design systems build lighter backgrounds, and lessons demonstrate tinting through lightness.

Edge cases

  • White cannot become visibly lighter.
  • High-saturation tints can lose text contrast.
  • HSL steps are not perceptually equal across hues.

References