a:tint (Tint Modification)

Description

a:tint is the DrawingML tint element that lightens a color by increasing its lightness component. It is defined in ECMA-376 Part 1 §20.1.2.3.9.

Tint effects:

• Lighten colors for highlights and hover states
• Create lighter variations of scheme colors
• Apply to background and fill effects
• Work with all color models

Tint values:

• 0 = Fully light (white)
• 100000 = No change (original color)
• 50000 = 50% tint (medium lightening)

Attributes

Examples

Scheme Color with 40% Tint

<a:schemeClr val="accent1">
  <a:tint val="40000"/>
</a:schemeClr>

using DocumentFormat.OpenXml.Drawing;

var schemeClr = new SchemeColor { Val = SchemeColorValues.Accent1 };
var tint = new Tint { Val = 40000 }; // 40% lighter
schemeClr.Append(tint);

Very Light Tint (80%)

<a:srgbClr val="0070C0">
  <a:tint val="80000"/>
</a:srgbClr>

var srgbClr = new RgbColorModelHex { Val = "0070C0" };
var tint = new Tint { Val = 80000 }; // 80% lighter
srgbClr.Append(tint);

Notes

• Tint is opposite of shade (which darkens)
• Values: 0-100000 (0% = white, 100% = no change)
• Useful for creating color hierarchies and highlights
• Often used for hover states (lighter on hover)
• Can be combined with shade for balanced color variations
• Common tints: 20000 (20% lighter), 40000 (40% lighter), 60000 (60% lighter)
• More common than shade in UI designs (lighter backgrounds, highlights)