# Color Tint Generator

Generate lighter tints of a color by mixing it with white in even steps. Enter one color in any CSS format, choose 2 to 20 steps and a mixing space, and get a table with HEX, RGB, HSL and OKLCH values for every tint, starting from the original color. sRGB mixing matches classic tint tools and Sass, while OKLab gives perceptually even steps. Ideal for backgrounds, hover states and scales.

## Frequently asked questions

### What is a tint?

A tint is a color mixed with white. It keeps its hue and gets lighter and paler, unlike a shade, which is mixed with black, or a tone, which is mixed with gray.

### How are the steps spaced?

With N steps, row k mixes the color with (k - 1) / N white, so 10 steps give 0%, 10%, 20% and so on up to 90%. The first row is always your original color, and pure white is never part of the list.

### What is the difference between sRGB and OKLab mixing?

sRGB mixing averages the gamma-encoded channel values, which is what Sass mix() with white and most classic tint generators do. OKLab mixing happens in a perceptual space, so the lightness steps look more even and the light end does not wash out as quickly.

### Which input formats can I use?

Hex codes with or without #, CSS color names, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() and cmyk(). Enter one color per run.

### How many tints can I generate?

Between 2 and 20 per run, 10 by default. The count includes the original color in the first row.

### Which values does the table show?

For each step, the share of white, the hex code, rgb(), hsl() and oklch() in modern CSS syntax. RGB channels are whole numbers, HSL percentages have up to two decimals and OKLCH lightness and chroma up to four.

### What happens to transparent colors?

The alpha of the input is kept for every tint, because white is mixed in at the same alpha. The hex codes then have 8 digits and the CSS functions end with the alpha after a slash.

### What happens to colors outside sRGB?

Mixing uses the full color, but HEX, RGB and HSL can only show sRGB, so out-of-gamut steps are mapped into sRGB with the CSS Color 4 algorithm in those columns. The OKLCH column keeps the unmapped value.

### How do I use the tints in CSS?

Copy the hex or oklch() values into custom properties such as --brand-100 and --brand-200. To mix in the browser instead, color-mix(in oklab, var(--brand) 80%, white) gives the same 20% tint as the OKLab setting.

### Can I put white text on a light tint?

Usually not, because light tints have little contrast against white. Use dark text on light tints and check each pair with a contrast checker; normal text needs at least 4.5:1 for WCAG AA.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)