MDL colors

Base colors

{{#markdown}} ```scss .color-white: #FFFFFF; ``` {{/markdown}}

{{#markdown}} ```scss .color-black: #000000; ``` {{/markdown}}

{{#markdown}} ```scss .color-accent: #0078D7; ``` {{/markdown}}

{{#markdown}} ```scss .color-alert: #D02E00; ``` {{/markdown}}

Background colors

{{#markdown}} ```scss .color-bg-light-vivid-high: $color-white; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-light-vivid-mid: #F2F2F2; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-light-vivid-low: #E5E5E5; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-light-neutral-high: #D9D9D9; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-light-neutral-mid: #CCCCCC; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-dark-vivid-high: $color-black; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-dark-vivid-mid: #191919; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-dark-vivid-low: #262626; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-dark-neutral-high: #333333; ``` {{/markdown}}

{{#markdown}} ```scss .color-bg-dark-neutral-mid: #404040; ``` {{/markdown}}

Fill colors

{{#markdown}} ```scss .color-fill-accent-vivid-high: $color-accent; ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-vivid-mid: rgba($color-accent, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-vivid-low: rgba($color-accent, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-neutral-high: rgba($color-accent, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-neutral-mid: rgba($color-accent, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-neutral-low: rgba($color-accent, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-dim-high: rgba($color-accent, 0.15); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-dim-mid: rgba($color-accent, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-accent-dim-low: rgba($color-accent, 0.05); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-alert: $color-alert; ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-dim-low: rgba($color-black, 0.05); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-dim-mid: rgba($color-black, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-low: rgba($color-black, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-mid: rgba($color-black, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-high: rgba($color-black, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-low: rgba($color-black, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-mid: rgba($color-black, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-high: $color-black; ``` {{/markdown}}

Line colors

{{#markdown}} ```scss .color-line-accent-vivid-high: $color-accent; ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-vivid-mid: rgba($color-accent, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-vivid-low: rgba($color-accent, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-neutral-high: rgba($color-accent, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-neutral-mid: rgba($color-accent, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-neutral-low: rgba($color-accent, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-dim-high: rgba($color-accent, 0.15); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-dim-mid: rgba($color-accent, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-accent-dim-low: rgba($color-accent, 0.05); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-alert: $color-alert; ``` {{/markdown}}

{{#markdown}} ```scss .color-line-dim-low: rgba($color-black, 0.05); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-dim-mid: rgba($color-black, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-low: rgba($color-black, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-mid: rgba($color-black, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-high: rgba($color-black, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-low: rgba($color-black, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-mid: rgba($color-black, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-high: $color-black; ``` {{/markdown}}

Text colors

Primary

{{#markdown}} ```scss .color-type-primary: $color-black; ``` {{/markdown}}

Secondary

{{#markdown}} ```scss .color-type-secondary: rgba($color-black, 0.6); ``` {{/markdown}}

Disabled

{{#markdown}} ```scss .color-type-disabled: rgba($color-black, 0.2); ``` {{/markdown}}

Accent

{{#markdown}} ```scss .color-type-accent: $color-accent; ``` {{/markdown}}

Alert

{{#markdown}} ```scss .color-type-alert: $color-alert; ``` {{/markdown}}

MDL alt colors

Alt fill colors

{{#markdown}} ```scss .color-fill-dim-mid-alt: rgba($color-white, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-dim-high-alt: rgba($color-white, 0.15); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-low-alt: rgba($color-white, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-mid-alt: rgba($color-white, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-neutral-high-alt: rgba($color-white, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-low-alt: rgba($color-white, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-mid-alt: rgba($color-white, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-fill-vivid-high-alt: $color-white; ``` {{/markdown}}

Alt line colors

{{#markdown}} ```scss .color-line-dim-mid-alt: rgba($color-white, 0.1); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-dim-high-alt: rgba($color-white, 0.15); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-low-alt: rgba($color-white, 0.2); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-mid-alt: rgba($color-white, 0.3); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-neutral-high-alt: rgba($color-white, 0.4); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-low-alt: rgba($color-white, 0.6); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-mid-alt: rgba($color-white, 0.8); ``` {{/markdown}}

{{#markdown}} ```scss .color-line-vivid-high-alt: $color-white; ``` {{/markdown}}

Alt text colors

Primary

{{#markdown}} ```scss .color-type-primary-alt: $color-white; ``` {{/markdown}}

Secondary

{{#markdown}} ```scss .color-type-secondary-alt: rgba($color-white, 0.6); ``` {{/markdown}}

Disabled

{{#markdown}} ```scss .color-type-disabled-alt: rgba($color-white, 0.2); ``` {{/markdown}}

Accent

{{#markdown}} ```scss .color-type-accent-alt: $color-accent; ``` {{/markdown}}

Alert

{{#markdown}} ```scss .color-type-alert-alt: $color-alert; ``` {{/markdown}}