Dynamic color

Dynamic color turns one source color into every color role, in light and dark. Pick a source and a variant, and apply the result to the document or to one element.

<md-gb-button color="filled">Save</md-gb-button>

import {applyTheme} from '@material/web/labs/gb/styles/color/dynamic-color.js';

applyTheme(document, {source: '#6750a4', variant: 'expressive'});

The variant decides how the palettes are derived from the source: tonal-spot (the default), neutral, vibrant, expressive, fidelity, content, monochrome, rainbow and fruit-salad.

Each scheme has standard, medium and high contrast. Set contrast on applyTheme(), or select a level for a subtree of the static tokens with a class.

<div class="md-contrast-standard">
  <md-gb-button color="tonal">Standard</md-gb-button>
</div>
<div class="md-contrast-high">
  <md-gb-button color="tonal">High</md-gb-button>
</div>

See Color for roles, custom colors and the full options.