Tint Percentage Chart (10%–90%)

What a Tint Percentage Means

An X% tint is the base color mixed with X% white — the higher the percentage, the lighter the result. For a percentage p (0–1), each RGB channel becomes:

new = old + (255 − old) × p

30% tint of #2D6A4F — rgb(45, 106, 79):
 ├─ R: 45  + (255 − 45)  × 0.3 = 108
 ├─ G: 106 + (255 − 106) × 0.3 = 151
 └─ B: 79  + (255 − 79)  × 0.3 = 132

Result: rgb(108, 151, 132) = #6C9784

Every channel moves proportionally toward 255, so the hue stays stable and each row of the chart reads as a softer step of the same color. The theory behind the formula is covered in the tints and shades guide, and precomputed charts for thousands of colors live in the color library — for example #2D6A4F or #3498DB.

Tint Percentages in Print vs. Screen

One honest warning before you send a tint value to a print shop: the word "tint" counts in opposite directions in screen design and traditional prepress.

• On screen (this chart) — the percentage counts the white: an 80% tint is 80% white and 20% base color, a very light pastel.
• In print and prepress — the percentage counts the ink: an "80% tint" is a halftone screen with 80% ink coverage, only 20% paper showing through. It's dark, close to the solid ink color.

So a print 80% tint and a screen 80% tint are nearly opposite colors. Converting is straightforward: a print N% tint ≈ a (100 − N)% mix-with-white tint of the solid ink color. A 30% screen of your brand ink is roughly the 70% row in this chart. Treat it as an approximation — halftone dot gain and paper color shift the printed result — and proof against a printed swatch book when the exact value matters.

When Designers Use Tint Scales

• Brand systems — one brand color plus its tint scale yields hover states, surfaces, borders, and badge backgrounds without adding new hues.
• Data visualization — a tint ramp of one hue reads as ordered, sequential data; light tints for low values, the solid for high.
• Print collateral — single-spot-ink jobs use tint percentages to get an entire value range out of one ink, which is exactly why the prepress convention above exists.

Frequently Asked Questions

• What is a tint percentage?

  A tint percentage says how much white is mixed into a color: a 30% tint of #2D6A4F is 70% of the base color blended with 30% white, giving #6C9784. Per RGB channel the formula is new = old + (255 − old) × (percent ÷ 100), and the chart above applies it at every 10% step.

• What does an 80% tint mean?

  It depends on the convention. On screen — and on this chart — an 80% tint means the base color mixed with 80% white, a very light pastel. In traditional print and prepress, an 80% tint means a halftone screen with 80% ink coverage, which is dark and close to the solid ink color. A print N% tint corresponds roughly to a (100 − N)% mix-with-white tint of the solid color.

• How do I make a 1% tint?

  The formula works for any step: set p = 0.01 in new = old + (255 − old) × p, or type 1 into the custom percentage box above. A 1% tint of #2D6A4F is #2F6B51 — visually indistinguishable from the base on most screens. Steps of 5–10% are the practical floor for differences people can actually see.

• What is the tint formula?

  For each RGB channel: new = old + (255 − old) × (percent ÷ 100). It is the same operation as CSS color-mix(in srgb, yourcolor N%, white) where N = 100 minus the tint percentage — every channel moves proportionally toward pure white.

• Is a tint scale the same as a monochromatic palette?

  They overlap but are not identical. A tint scale only mixes the base color with white, while a monochromatic palette can also include shades (mixed with black) and tones (mixed with gray) of the same hue. A tint scale is usually the light half of a full monochromatic system.

Related tools: tint generator · tint and shade generator · lighten a color · darken a color · color scale generator