Material Design Renk Paleti

HEX kodları, CSS değişkenleri ve kontrast kontrolü ile 19 renk ailesi. Kopyalamak için bir renge tıklayın.

CSS indir

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Beyaz metin {{ whiteContrast.toFixed(1) }}:1
Siyah metin {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Material Design Renk Sistemi nedir?

Google'un Material Design renk sistemi, her biri 10 ana ton (50, 100–900) ve 4'e kadar vurgu tonuna (A100–A700) sahip 19 renk ailesini içerir. Web siteleri ve uygulamalar için tutarlı bir renk dili sağlar.

CSS'de Material Design renkleri nasıl kullanılır?

Tüm değişkenleri içeren CSS dosyasını indirin ve projenize dahil edin. Ardından var(--color-md-teal-500) gibi CSS Özel Özellikleri ile renkleri kullanın.

Renk seçimi ipuçları

  • Birincil bir renk (orn. Teal 500) ve farklı bir aileden vurgu rengi seçin.
  • Açık tonları (50–200) arka planlar için, koyu tonları (700–900) metin için kullanın.
  • Erişilebilirlik için metin ile arka plan arasında yeterli kontrast (en az 4.5:1) sağlayın.
  • 500 tonu, her renk ailesinin standart temsilidir ve birincil renk olarak idealdir.