Lighten Color
Make any color lighter by an exact percentage and copy the resulting tint as a HEX or RGB code. Free and instant — every tint is calculated locally in your browser.
Tint scale (10% steps)
| Tint | Lighten | HEX | RGB |
|---|
How to lighten a color online
- Enter your base color. Use the color picker or type a HEX code (3 or 6 digits, with or without the #).
- Choose the amount and method. Drag the slider to set how much lighter the color should get. "Mix with white" blends white into the color; "HSL lightness" raises the lightness channel instead.
- Copy your tint. Copy the result as HEX or RGB, or pick any row from the 10-step tint scale below the result.
About this tool
This free color lightener creates tints — lighter versions of a color made by moving it toward white. Designers use tints constantly: hover states for buttons, subtle card and badge backgrounds derived from a brand color, disabled states, and the light end of a design-system color ramp. The default "mix with white" method matches CSS color-mix(in srgb, yourcolor, white 20%) and produces soft pastel results, while the "HSL lightness" method mirrors what Sass-style lighten() workflows do by scaling the lightness channel toward 100%.
All calculations happen locally in your browser — nothing is uploaded and there are no limits. Need the opposite direction? Use the Darken Color tool, or generate both directions at once with the Color Shades Generator.
Frequently asked questions
What is the difference between the two lightening methods?
"Mix with white" interpolates every RGB channel toward 255, which also reduces saturation slightly and gives natural pastel tints. "HSL lightness" converts the color to HSL and moves only the lightness value toward 100%, keeping the hue and saturation numbers unchanged — colors stay more vivid on the way to white. Both methods reach pure white at 100%.
What is a tint?
In color theory, a tint is a color mixed with white (a shade is a color mixed with black, and a tone is a color mixed with gray). Lightening a color by a percentage is the same as creating a tint at that mixing ratio.
How do I lighten a color directly in CSS?
Modern browsers support color-mix(): for example color-mix(in srgb, #3b82f6, white 20%) gives the same result as this tool's default method at 20%. This tool is handy when you need the final HEX code for design software, emails or older browsers.
Why does my lightened color look washed out?
Mixing with white necessarily lowers saturation, which reads as "washed out" for strong brand colors. Try the "HSL lightness" method to keep more vividness, or lighten by a smaller percentage.