Paleta kolorów Material Design

Wszystkie 19 rodzin kolorów z kodami HEX, zmiennymi CSS i sprawdzaniem kontrastu. Kliknij kolor, aby skopiować.

Pobierz CSS

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Biały tekst {{ whiteContrast.toFixed(1) }}:1
Czarny tekst {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Czym jest system kolorów Material Design?

System kolorów Material Design od Google obejmuje 19 rodzin kolorów, każda z 10 głównymi odcieniami (50, 100–900) i do 4 odcieniami akcentowymi (A100–A700). Zapewnia spójny język kolorów dla stron i aplikacji.

Jak używać kolorów Material Design w CSS?

Pobierz plik CSS ze wszystkimi zmiennymi i dołącz go do projektu. Następnie używaj kolorów przez CSS Custom Properties jak var(--color-md-teal-500). Możesz także używać kodów HEX bezpośrednio.

Wskazówki dotyczące wyboru kolorów

  • Wybierz kolor główny (np. Teal 500) i kolor akcentowy z innej rodziny.
  • Używaj jaśniejszych odcieni (50–200) do tła i ciemniejszych (700–900) do tekstu.
  • Zapewnij wystarczający kontrast (co najmniej 4,5:1) między tekstem a tłem dla dostępności.
  • Odcień 500 jest standardową reprezentacją każdej rodziny kolorów i idealny jako kolor główny.