Skip to main content

​
Overview

Converts a palette object to a CSS custom properties (CSS variables) string. This method is specifically designed for Material Design 3 reference palette colors, which include tonal values from 0-100 for each color group (primary, secondary, tertiary, neutral, error).

​
Signature

DynamicColor.paletteToCssVars(palette, prefix)

​
Parameters

​
palette
Object
required
The palette object containing palette color key-value pairs. Typically from DynamicColor.palette() response (colors.palette).
{
  error0: '#000000',
  error10: '#410E0B',
  error20: '#601410',
  primary0: '#000000',
  primary10: '#331100',
  primary40: '#8D4E2A',
  neutral50: '#7D7470',
  neutralVariant95: '#FFEDE6',
  // ... more palette colors
}
​
prefix
String
default:"--md-ref-palette"
The prefix to use for CSS variable names. The method will append a hyphen and the kebab-cased palette key name.

​
Returns

​
cssVars
String
A string containing CSS custom property declarations, one per line, formatted as prefix-key-name: value;\nCamelCase keys are automatically converted to kebab-case (e.g., neutralVariant95 becomes neutral-variant95).

​
Example

DynamicColor.palette(function(colors) {
  var cssVars = DynamicColor.paletteToCssVars(colors.palette);
  
  console.log(cssVars);
  /*
  --md-ref-palette-error0: #000000;
  --md-ref-palette-error10: #410E0B;
  --md-ref-palette-error20: #601410;
  --md-ref-palette-error30: #8C1D18;
  --md-ref-palette-error40: #B3261E;
  --md-ref-palette-error50: #DC362E;
  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral10: #201A17;
  --md-ref-palette-neutral20: #362F2C;
  --md-ref-palette-neutral-variant0: #000000;
  --md-ref-palette-neutral-variant10: #241913;
  --md-ref-palette-neutral-variant95: #FFEDE6;
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #331100;
  --md-ref-palette-primary40: #8D4E2A;
  --md-ref-palette-primary90: #FFDBCA;
  --md-ref-palette-secondary0: #000000;
  --md-ref-palette-tertiary100: #FFFFFF;
  ... and more
  */
});

​
With Custom Prefix

DynamicColor.palette(function(colors) {
  var cssVars = DynamicColor.paletteToCssVars(colors.palette, '--palette');
  
  /*
  --palette-error0: #000000;
  --palette-primary40: #8D4E2A;
  --palette-neutral95: #FBEEE9;
  ... and more
  */
});

​
Implementation

This method is a wrapper around colorsToCssVars() with a different default prefix: 
// From plugin.js:118-121
function paletteToCssVars(colors, prefix = '--md-ref-palette') {
  return colorsToCssVars(colors, prefix);
}
The underlying implementation uses the same logic as colorsToCssVars(): 
// From plugin.js:106-116
function colorsToCssVars(colors, prefix = '--md-sys-color') {
  var cssVars = '';
  
  for(var key in colors) {
    cssVars += prefix+'-'+key.replace(/([A-Z])/g, '-$1').toLowerCase()+': '+colors[key]+';\n';
  }
  
  return cssVars;
}
This method only generates the CSS string. To apply these palette variables to the DOM, use paletteToDom() instead.

​
Use Cases

  • Generate Material Design 3 reference palette CSS variables
  • Access full tonal scale for custom color derivations
  • Create theme systems with granular palette control
  • Export palette variables to external style systems

​
Material Design 3 Palette Structure

The palette includes tonal values (0-100) for:
  • Primary colors: Brand and key UI elements
  • Secondary colors: Less prominent components
  • Tertiary colors: Accents and highlights
  • Neutral colors: Surfaces and backgrounds
  • Neutral Variant colors: Alternative surface colors
  • Error colors: Error states and warnings
Each color group has values at: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us