Skip to main content

​
Overview

Returns the complete Material Design 3 tonal palette with all tonal values (0-100) for neutral, primary, secondary, tertiary, and error colors. This provides the full spectrum of color variations used in Material Design 3.

​
Method Signature

DynamicColor.palette(callback)

​
Parameters

​
callback
function
required
Callback function that receives the palette objectCallback Parameters:
  • colors (object): Complete tonal palette with theme property

​
Returns

​
colors
object
Complete tonal palette with the following structure:

​
Example

DynamicColor.palette(function(colors) {

	console.log('Current theme:', colors.theme);
	
	// Access specific tonal values
	console.log('Primary 40:', colors.palette.primary40);
	console.log('Neutral 95:', colors.palette.neutral95);

});

​
Example Response

{
	theme: 'light',
	palette: {
		error0: '#000000',
		error10: '#410E0B',
		error20: '#601410',
		error30: '#8C1D18',
		error40: '#B3261E',
		error50: '#DC362E',
		error60: '#E46962',
		error70: '#EC928E',
		error80: '#F2B8B5',
		error90: '#F9DEDC',
		error95: '#FCEEEE',
		error99: '#FFFBF9',
		error100: '#FFFFFF',
		neutral0: '#000000',
		neutral10: '#201A17',
		neutral20: '#362F2C',
		neutral30: '#4D4542',
		neutral40: '#655D59',
		neutral50: '#7D7470',
		neutral60: '#998F8A',
		neutral70: '#B4A9A4',
		neutral80: '#D0C4BF',
		neutral90: '#ECE0DB',
		neutral95: '#FBEEE9',
		neutral99: '#FFFBFF',
		neutral100: '#FFFFFF',
		neutralVariant0: '#000000',
		neutralVariant10: '#241913',
		neutralVariant20: '#3B2E27',
		neutralVariant30: '#52443D',
		neutralVariant40: '#6B5B53',
		neutralVariant50: '#84736A',
		neutralVariant60: '#9F8D84',
		neutralVariant70: '#BBA79E',
		neutralVariant80: '#D7C2B9',
		neutralVariant90: '#F4DED4',
		neutralVariant95: '#FFEDE6',
		neutralVariant99: '#FFFBFF',
		neutralVariant100: '#FFFFFF',
		primary0: '#000000',
		primary10: '#331100',
		primary20: '#532201',
		primary30: '#703715',
		primary40: '#8D4E2A',
		primary50: '#A9653F',
		primary60: '#C87F56',
		primary70: '#E7996E',
		primary80: '#FFB68F',
		primary90: '#FFDBCA',
		primary95: '#FFEDE6',
		primary99: '#FFFBFF',
		primary100: '#FFFFFF',
		secondary0: '#000000',
		secondary10: '#2B160A',
		secondary20: '#432B1D',
		secondary30: '#5C4132',
		secondary40: '#765848',
		secondary50: '#906F5E',
		secondary60: '#AC8978',
		secondary70: '#C9A391',
		secondary80: '#E6BEAB',
		secondary90: '#FFDBCA',
		secondary95: '#FFEDE6',
		secondary99: '#FFFBFF',
		secondary100: '#FFFFFF',
		tertiary0: '#000000',
		tertiary10: '#1E1C00',
		tertiary20: '#343108',
		tertiary30: '#4B481D',
		tertiary40: '#646032',
		tertiary50: '#7C7847',
		tertiary60: '#97925F',
		tertiary70: '#B2AD78',
		tertiary80: '#CEC891',
		tertiary90: '#EBE4AA',
		tertiary95: '#F9F3B8',
		tertiary99: '#FFFBFF',
		tertiary100: '#FFFFFF'
	}
}

​
Common Usage Patterns

​
Apply Palette to DOM

DynamicColor.palette(function(colors) {
	// Apply palette colors as CSS variables
	DynamicColor.paletteToDom(colors.palette);
});

​
Use Specific Tonal Values

DynamicColor.palette(function(colors) {
	// Use specific tones for custom UI elements
	var customBackground = colors.palette.neutralVariant95;
	var customBorder = colors.palette.neutralVariant60;
	
	document.querySelector('.custom-card').style.backgroundColor = customBackground;
	document.querySelector('.custom-card').style.borderColor = customBorder;
});

​
Use in CSS

After applying palette to DOM: 
.custom-surface {
	background: var(--md-ref-palette-neutral-variant95);
	color: var(--md-ref-palette-neutral10);
	border: 1px solid var(--md-ref-palette-neutral-variant80);
}

.accent-element {
	background: var(--md-ref-palette-primary80);
	color: var(--md-ref-palette-primary20);
}

​
Tonal Value Guide

  • 0 - Black (#000000)
  • 10-90 - Progressive lightening from dark to light
  • 95 - Very light, near white
  • 99 - Almost white
  • 100 - White (#FFFFFF)
In light themes, lower tonal values (10-40) are typically used for text and prominent elements, while higher values (80-99) are used for backgrounds. In dark themes, the usage is inverted: higher tonal values for text and lower values for backgrounds.

​
Implementation Details

  • Platform Support: Android 12+ (API level 32)
  • Color Format: Hex color strings (e.g., #8D4E2A)
  • Total Colors: 65 tonal palette values
  • Material Design: Follows M3 tonal palette specification
  • Source Reference: plugin.js:212-213, DynamicColor.java:225-336
The palette provides reference colors for advanced customization. For standard UI elements, use the colors() method which provides semantic color tokens.
Always check availability using isDynamicColorAvailable() before calling this method. On unsupported devices, the palette object will be empty.

Build docs developers (and LLMs) love

Get started for freeTalk to us