Skip to main content

​
Overview

Mixes two colors together according to Material Design Guidelines Elevation levels. This method applies predefined tint amounts based on elevation levels 1-5, following Material Design specifications for surface elevation tinting.

​
Signature

DynamicColor.mixColorElevation(color1, color2, elevation)

​
Parameters

​
color1
string
required
The base color as a hex string (e.g., '#FFFBFF'). Typically a surface color.
​
color2
string
required
The tint color as a hex string (e.g., '#8D4E2A'). Typically the surfaceTint color.
​
elevation
number
required
The elevation level from 1 to 5. Each level corresponds to a predefined tint amount:
  • 1 → 5% tint (0.05)
  • 2 → 8% tint (0.08)
  • 3 → 11% tint (0.11)
  • 4 → 12% tint (0.12)
  • 5 → 14% tint (0.14)

​
Returns

​
result
string
A hex color string representing the mixed color at the specified elevation level.

​
Elevation Tint Map

The elevation-to-tint mapping is defined in Material Design Guidelines:
ElevationTint AmountUse Case
15%Low elevation surfaces
28%Cards, elevated buttons
311%Menus, dialogs
412%Navigation drawer
514%Modal bottom sheets

​
Example

DynamicColor.colors(function(colors) {
  var surface = colors.light.surface;
  var tint = colors.light.surfaceTint;
  
  // Create elevation variants
  var surface1 = DynamicColor.mixColorElevation(surface, tint, 1);
  var surface2 = DynamicColor.mixColorElevation(surface, tint, 2);
  var surface3 = DynamicColor.mixColorElevation(surface, tint, 3);
  var surface4 = DynamicColor.mixColorElevation(surface, tint, 4);
  var surface5 = DynamicColor.mixColorElevation(surface, tint, 5);
  
  console.log(surface);  // '#FFFBFF'
  console.log(surface1); // '#f9f2f4'
  console.log(surface2); // '#f6edee'
  console.log(surface3); // '#f2e8e8'
  console.log(surface4); // '#f1e6e5'
  console.log(surface5); // '#efe3e1'
});

​
Use Cases

​
Creating Elevated Surfaces

// Apply elevation to a card component
var cardBackground = DynamicColor.mixColorElevation(
  colors.light.surface,
  colors.light.surfaceTint,
  2 // Elevation level 2 for cards
);

​
Custom Component Elevation

// Different elevation levels for different states
var buttonResting = DynamicColor.mixColorElevation(surface, tint, 1);
var buttonHovered = DynamicColor.mixColorElevation(surface, tint, 2);
var buttonPressed = DynamicColor.mixColorElevation(surface, tint, 1);
This method is internally used by tintColors to generate surface1-surface5 variants automatically.

​
Implementation Details

Implementation location: www/plugin.js:63-66 The elevation map is defined at www/plugin.js:31-37: 
var tintElevations = {
  1: 0.05,
  2: 0.08,
  3: 0.11,
  4: 0.12,
  5: 0.14,
};

function mixColorElevation(color1, color2, elevation) {
  return _mixColorElevation(hexToRgb(color1), hexToRgb(color2), elevation);
}
For custom tint amounts outside the predefined elevation levels, use mixColor with a specific amount value.

​
Material Design Guidelines

This implementation follows the Material Design 3 elevation tinting system, which applies surface tint to create visual hierarchy and depth without using shadows.

Build docs developers (and LLMs) love

Get started for freeTalk to us