Which shade is the brand default?

Shade 500 is the referential brand color — calibrated by Google so it remains clearly visible on white. For CTAs and primary buttons it's the standard. Hover should then switch to 700.

What is the difference between 500 and A400?

500 is the normal, perceptually balanced brand variant. A400 is an accent tone — more saturated, louder, intended for FABs and visual highlights, not for standard CTAs.

How do I combine two Material colors?

Pick a primary and a secondary with clear hue separation (e.g. teal + orange = 165° apart). Keep both at shade 500 or 600. Avoid complementary punches (red + cyan) if your brand should feel serious.

Is Material Design accessible?

The palette itself is neutral — accessibility depends on the token set you build from it. For WCAG AA: body text on 100-level backgrounds = shade 800/900 for text; brand buttons = shade 700+ to satisfy 4.5:1.

What about Material 3?

Material 3 uses dynamically generated HCT palettes (hue-chroma-tone) that derive all surface variants from one seed color. For native Android apps and Flutter this is the current recommendation; for pure web UIs Material 2 remains more practical.

How do I reskin the whole brand quickly?

If all components use var(--color-primary) instead of a hard-coded hue, one entry is enough: :root { --color-primary: var(--color-md-blue-500); } swaps the whole brand from teal to blue in a single line.

Material Design Color Palette

All 19 color families with HEX codes, CSS variables and contrast checking. Click any color to copy.

Download CSS

CSS Variables Example

{{ usageExample }}

Contrast Check

White text {{ whiteContrast.toFixed(1) }}:1

Black text {{ blackContrast.toFixed(1) }}:1

{{ lastCopied.cssVar }}

What Is the Material Design Color System?

Google's Material Design color system includes 19 color families, each with 10 primary shades (50, 100–900) and up to 4 accent shades (A100–A700). It provides a consistent color language for websites and apps. Each color is carefully tuned to work harmoniously in combination and provide sufficient contrast for accessibility.

How to Use Material Design Colors in CSS?

Download the CSS file with all variables and include it in your project. Then use the colors via CSS Custom Properties like var(--color-md-teal-500). You can also use the HEX codes directly, e.g. color: #009688;. CSS variables have the advantage that you can change colors centrally.

Color Selection Tips

Choose a primary color (e.g. Teal 500) and an accent color from a different family.
Use lighter shades (50–200) for backgrounds and darker ones (700–900) for text.
Ensure sufficient contrast (at least 4.5:1) between text and background for accessibility.
The 500 shade is the standard representation of each color family and ideal as a primary color.

Material Design color system: shades, accents, tonality

Google's Material Design color system (introduced 2014, refined in Material 2 and Material 3) maps each hue to a 10-step scale from 50 to 900 plus optional accent shades A100, A200, A400, A700. The steps are perceptually graded: 50 is near white, 500 the typical brand saturation, 900 nearly black. The scale was calibrated so each step reads against the next and 500 shades form typical CTA buttons. Compared to Tailwind or Bootstrap, Material differs in higher saturation at the 500 token — Tailwind's 500 is often paler.

Accent shades (A100–A700) are more saturated and less perceptually uniform — they were designed for accent elements like FABs (Floating Action Buttons), selections, and highlights. When building a brand, use 500 as primary, 700 as hover state, and 100 as a light background variant. Accents come in when an element must actively stand out. Important: Material 3 (introduced 2021) is gradually replacing the old system with a dynamic color system using tonal palettes (Primary, Secondary, Tertiary, Surface) computed from a single seed color via HCT (Hue-Chroma-Tone).

The Material palette is defined in sRGB; all hex values are exactly those Google publishes in the spec. The CalcSI design system stores Material colors as CSS variables like --color-md-teal-500 and links them to classic variables like --color-primary. That way the whole brand can be reskinned via a single token change. WCAG compliance is not automatic: mid-range shades (300, 400, 500) often only reach AA Large against white. For body text on brand backgrounds use 700 or 800, or dark text on 50/100.

How to use the palette as a design-system base

Material colors are not a finished design, but an extremely solid base. These steps lead from lookup to a production token file.

Pick a primary hue (e.g. teal or blue) — that becomes your brand identity. Click the 500 swatch to copy hex and CSS variable to clipboard.
Also pick a contrasting secondary for CTAs (e.g. orange 700 or pink A400 alongside a teal primary). The tool instantly shows contrast against white and black so you can verify legibility.
Define three surface tokens: light --surface-base: #FAFAFA (gray 50), card --surface-card: #FFFFFF, elevated --surface-elevated: #FFFFFF with extra shadow. In dark mode: gray 900/800/700.
For states use the same hue at different shades: primary 500 = default, primary 700 = hover, primary 800 = active, primary 100 = disabled background. Consistency turns 500 tokens into a tangible brand.
Download md-bs.css if you want the whole system — all Material variables plus CalcSI extensions are included.

Concrete Material token examples

Here is how you combine the Material scales into a consistent token set.

CalcSI-style brand: --color-primary: var(--color-md-teal-500); --color-primary-hover: var(--color-md-teal-700); — clean darker hover.
Body text on white: color: var(--color-md-gray-900); yields 16.1:1 contrast — easily AAA.
Status colors: success --color-success: var(--color-md-green-700);, warning --color-warn: var(--color-md-amber-700);, error --color-error: var(--color-md-red-700); — all accessible against white.
Background accent: background: linear-gradient(135deg, var(--color-md-teal-50), var(--color-md-blue-50)); — very subtle brand wash.
Dark mode: --surface-base: var(--color-md-gray-900); --color-text: var(--color-md-gray-100); — robust default that works for 99% of content.

Limits of the Material palette

The Material palette was defined in sRGB in 2014 — Display-P3 devices show the values slightly more saturated than on older monitors. That is not a bug but the browser's intentional gamut mapping. For maximum precision across devices, document P3 fallbacks separately. Color-blindness friendliness is not guaranteed: some hue pairs (red 500 vs. green 500) are barely distinguishable for deuteranopes — always combine with icons or text labels. Mid-range shades 300/400/500 often only reach AA Large against white; body text must switch to shade 700+ or use dark text on 50/100. The palette is also bounded: 19 hues x 14 shades = 266 colors. That covers standard UI, but complex data visualizations (heatmaps, choropleth maps) additionally need perceptually uniform palettes like Viridis or Cividis. Finally, Material 2 is an older system — Material 3 uses dynamic HCT palettes generated from a seed color. If you stay long-term in Google's ecosystem, evaluate Material 3 instead of 2.

Frequently asked Material palette questions

Which shade is the brand default?: Shade 500 is the referential brand color — calibrated by Google so it remains clearly visible on white. For CTAs and primary buttons it's the standard. Hover should then switch to 700.
What is the difference between 500 and A400?: 500 is the normal, perceptually balanced brand variant. A400 is an accent tone — more saturated, louder, intended for FABs and visual highlights, not for standard CTAs.
How do I combine two Material colors?: Pick a primary and a secondary with clear hue separation (e.g. teal + orange = 165° apart). Keep both at shade 500 or 600. Avoid complementary punches (red + cyan) if your brand should feel serious.
Is Material Design accessible?: The palette itself is neutral — accessibility depends on the token set you build from it. For WCAG AA: body text on 100-level backgrounds = shade 800/900 for text; brand buttons = shade 700+ to satisfy 4.5:1.
What about Material 3?: Material 3 uses dynamically generated HCT palettes (hue-chroma-tone) that derive all surface variants from one seed color. For native Android apps and Flutter this is the current recommendation; for pure web UIs Material 2 remains more practical.
How do I reskin the whole brand quickly?: If all components use var(--color-primary) instead of a hard-coded hue, one entry is enough: :root { --color-primary: var(--color-md-blue-500); } swaps the whole brand from teal to blue in a single line.