Colors

Token values as CSS custom properties.

{
  "baseline_seed": "#6750A4",
  "light": {
    "--md-sys-color-primary": "#6750A4",
    "--md-sys-color-on-primary": "#FFFFFF",
    "--md-sys-color-primary-container": "#EADDFF",
    "--md-sys-color-on-primary-container": "#21005D",
    "--md-sys-color-inverse-primary": "#D0BCFF",
    "--md-sys-color-secondary": "#625B71",
    "--md-sys-color-on-secondary": "#FFFFFF",
    "--md-sys-color-secondary-container": "#E8DEF8",
    "--md-sys-color-on-secondary-container": "#1D192B",
    "--md-sys-color-tertiary": "#7D5260",
    "--md-sys-color-on-tertiary": "#FFFFFF",
    "--md-sys-color-tertiary-container": "#FFD8E4",
    "--md-sys-color-on-tertiary-container": "#31111D",
    "--md-sys-color-error": "#B3261E",
    "--md-sys-color-on-error": "#FFFFFF",
    "--md-sys-color-error-container": "#F9DEDC",
    "--md-sys-color-on-error-container": "#410E0B",
    "--md-sys-color-background": "#FFFBFE",
    "--md-sys-color-on-background": "#1C1B1F",
    "--md-sys-color-surface": "#FFFBFE",
    "--md-sys-color-on-surface": "#1C1B1F",
    "--md-sys-color-surface-variant": "#E7E0EC",
    "--md-sys-color-on-surface-variant": "#49454F",
    "--md-sys-color-surface-dim": "#DDD8E3",
    "--md-sys-color-surface-bright": "#FFFBFE",
    "--md-sys-color-surface-container-lowest": "#FFFFFF",
    "--md-sys-color-surface-container-low": "#F7F2FA",
    "--md-sys-color-surface-container": "#F3EDF7",
    "--md-sys-color-surface-container-high": "#ECE6F0",
    "--md-sys-color-surface-container-highest": "#E6E0E9",
    "--md-sys-color-inverse-surface": "#313033",
    "--md-sys-color-inverse-on-surface": "#F4EFF4",
    "--md-sys-color-outline": "#79747E",
    "--md-sys-color-outline-variant": "#CAC4D0",
    "--md-sys-color-shadow": "#000000",
    "--md-sys-color-scrim": "#000000"
  },
  "dark": {
    "--md-sys-color-primary": "#D0BCFF",
    "--md-sys-color-on-primary": "#381E72",
    "--md-sys-color-primary-container": "#4F378B",
    "--md-sys-color-on-primary-container": "#EADDFF",
    "--md-sys-color-inverse-primary": "#6750A4",
    "--md-sys-color-secondary": "#CCC2DC",
    "--md-sys-color-on-secondary": "#332D41",
    "--md-sys-color-secondary-container": "#4A4458",
    "--md-sys-color-on-secondary-container": "#E8DEF8",
    "--md-sys-color-tertiary": "#EFB8C8",
    "--md-sys-color-on-tertiary": "#492532",
    "--md-sys-color-tertiary-container": "#633B48",
    "--md-sys-color-on-tertiary-container": "#FFD8E4",
    "--md-sys-color-error": "#F2B8B5",
    "--md-sys-color-on-error": "#601410",
    "--md-sys-color-error-container": "#8C1D18",
    "--md-sys-color-on-error-container": "#F9DEDC",
    "--md-sys-color-background": "#1C1B1F",
    "--md-sys-color-on-background": "#E6E1E5",
    "--md-sys-color-surface": "#1C1B1F",
    "--md-sys-color-on-surface": "#E6E1E5",
    "--md-sys-color-surface-variant": "#49454F",
    "--md-sys-color-on-surface-variant": "#CAC4D0",
    "--md-sys-color-surface-dim": "#141218",
    "--md-sys-color-surface-bright": "#3B383E",
    "--md-sys-color-surface-container-lowest": "#0F0D13",
    "--md-sys-color-surface-container-low": "#1D1B20",
    "--md-sys-color-surface-container": "#211F26",
    "--md-sys-color-surface-container-high": "#2B2930",
    "--md-sys-color-surface-container-highest": "#36343B",
    "--md-sys-color-inverse-surface": "#E6E1E5",
    "--md-sys-color-inverse-on-surface": "#313033",
    "--md-sys-color-outline": "#938F99",
    "--md-sys-color-outline-variant": "#49454F",
    "--md-sys-color-shadow": "#000000",
    "--md-sys-color-scrim": "#000000"
  }
}