a:shade (Shade Modification)

Description

a:shade is the DrawingML shade element that darkens a color by reducing its lightness component. It is defined in ECMA-376 Part 1 §20.1.2.3.11.

Shade effects:

• Darken colors for depth and visual hierarchy
• Create darker variations of scheme colors
• Apply to shadows and depth effects
• Work with all color models

Shade values:

• 0 = Fully dark (black)
• 100000 = No change (original color)
• 50000 = 50% shade (medium darkening)

Attributes

Examples

Scheme Color with 40% Shade

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

using DocumentFormat.OpenXml.Drawing;

var schemeClr = new SchemeColor { Val = SchemeColorValues.Accent1 };
var shade = new Shade { Val = 40000 }; // 40% darker
schemeClr.Append(shade);

Very Dark Shade (80%)

<a:srgbClr val="0070C0">
  <a:shade val="20000"/>
</a:srgbClr>

var srgbClr = new RgbColorModelHex { Val = "0070C0" };
var shade = new Shade { Val = 20000 }; // 80% darker
srgbClr.Append(shade);

Notes

• Shade is opposite of tint (which lightens)
• Values: 0-100000 (0% = black, 100% = no change)
• Useful for creating color hierarchies and depth
• Often used for hover states (darker on hover)
• Can be combined with other modifications
• Common shades: 20000 (20% darkening), 40000 (40% darkening), 60000 (60% darkening)