Softonic

Material Design Renk Seçici

Adım 1 / 3 Bir renk ailesi seçin

Sabit 2014 Material Design paleti (Material Design 2). Material 3 bunun yerine oluşturulan ton paletlerini kullanır.

Bir renk ailesi seçin

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Material Design paleti, Kırmızı, Pembe ve Mor’dan Gri ile Mavi Gri’ye kadar toplam 19 renk ailesi tanımlar; her biri 50 (soluk) tonundan 900 (neredeyse siyah) tonuna kadar bir geçişe ve isteğe bağlı A100–A700 vurgu tonlarına sahiptir. Bu seçici, tüm renk örneklerini bir ızgarada düzenler ve her renk değerini HEX, RGB, HSL ya da Material token adı biçiminde kopyalayarak Tailwind, CSS değişkenleri, iOS UIColor veya Android renk kaynaklarında kullanmanıza olanak tanır.

Palet nasıl kullanılır?

  1. 1

    Izgarayı tarayın

    Aileler solda dikey olarak dizilir; tonlar ise üstte 50'den 900'e kadar yatay olarak sıralanır.

  2. 2

    Bir renk örneğine dokunun

    HEX, RGB, HSL ve standart Material token adını (örneğin Indigo 500) görün.

  3. 3

    İhtiyacınız olan biçimi kopyalayın

    Tek tıklamayla tam dizeyi kopyalar: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Kontrastı denetleyin

    Panel, erişilebilir metin renkleri seçmek için beyaza ve siyaha karşı WCAG kontrast oranını gösterir.

Ton merdiveni

Ton Kullanım
50 Üzerine gelme arka planları, soluk yüzeyler
100 Çip arka planları, düşük vurgulu dolgular
200 Devre dışı durumlar, ikincil yüzeyler
300 Kenarlıklar, ayırıcılar
400 Açık arka planlarda ikincil metin
500 Varsayılan / birincil renk, temel değer
600 Etkileşimli durumlar (üzerine gelme, basılı)
700 Başlıklar, güçlü vurgu
800 Açık arka planlarda koyu metin
900 En yüksek kontrastlı öğe (neredeyse siyah)
A100 Açık vurgu
A200 Varsayılandan daha açık vurgu
A400 Vurgu (genellikle markanın “parlak” öne çıkan rengi)
A700 Koyu vurgu

Material paletindeki aileler

Kırmızı, Pembe, Mor, Koyu Mor, İndigo, Mavi, Açık Mavi, Camgöbeği, Deniz Yeşili, Yeşil, Açık Yeşil, Limon Yeşili, Sarı, Kehribar, Turuncu, Koyu Turuncu, Kahverengi, Gri, Mavi Gri.

Kahverengi, Gri ve Mavi Gri’nin vurgu tonları yoktur, bunlar nötr ailelerdir.

Birincil renk seçmek

Şartname, birincil renk olarak 500’ü, daha koyu varyant için (Android’deki durum çubuğunda kullanılır) 700’ü ve ikincil eylemler için A200 ya da A400 vurgusunu önerir. Bu bir kuraldan çok bir gelenektir, modern Material 3 (dinamik renk), sabit tonlardan seçmek yerine tek bir tohum renginden paletler türetir.

Erişilebilirlik denetim noktası

  • Gövde metni: arka planına karşı kontrast oranı ≥ 4,5:1 (WCAG AA).
  • Büyük metin (18 pt+ kalın veya 24 pt+ normal): ≥ 3:1.
  • Arayüz bileşenleri ve grafik nesneler: ≥ 3:1.

Palet, varsayılan olarak kontrast açısından güvenli değildir. Beyaz üzerine Sarı 500 WCAG’yi ciddi biçimde geçemez. Bir kombinasyonu yayınlamadan önce oranı her zaman denetleyin, seçici bunu satır içinde gösterir.

Desteklenen biçimler

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (modern söz dizimi) veya rgb(63, 81, 181) (eski).
  • HSL: hsl(231 48% 48%).
  • Material token: Indigo 500, tasarım belgeleri ve Figma için pratiktir.
  • Tailwind: indigo-500, Tailwind temanız Material ölçeğini kullanıyorsa doğrudan bir sınıf özniteliğine ekleyin.
  • Android renk XML: <color name="indigo_500">#FF3F51B5</color>, ARGB biçimi.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Sık Sorulan Sorular

Bu araç, Google’ın 2014’te yayımladığı ve daha sonra Material Design 2 sitesinde belgelediği sabit Material Design paletini sunar. Bir kaynak renkten Material 3 ton paleti üretmez. Klasik numaralı tonlara ve vurgu renklerine ihtiyaç duyduğunuzda kullanın.

Kahverengi, Gri ve Mavi Gri nötr renklerdir ve vurgu rengi eşleşmelerine katılmazlar. Şartname bunlar için A100–A700 aralığını basitçe atlar.

Tailwind’in varsayılan paleti Material’dan esinlenmiştir ancak birebir aynı değildir. Tam Material renkleri istiyorsanız theme.extend.colors alanını Material değerleriyle genişletin ve sınıf adlarınızda bunlara material-indigo-500 olarak başvurun.

Gelenek evet der, ancak birincil olarak 700’ü ya da bir vurguyu kullanmanızı engelleyen hiçbir şey yoktur. 500 geleneği, varyasyon için her iki yönde 8 adımı olan güvenilir bir temel tona sahip olmakla ilgilidir.

İlgili Araçlar

İsimlik Oluşturucu

Ad | ikinci satır listesinden yazdırılabilir en fazla 60 isimlik oluşturun. A4 veya US Letter üzerinde sayfa başına 8 kart ya da 15 etiket seçin ve yerel olarak yazdırın.

Fotoğrafı Eskize Dönüştürme

JPEG, PNG veya WebP fotoğrafı tarayıcıda grafit, yumuşak kalem ya da füzen tonlarında eskize dönüştürüp PNG veya JPEG olarak kaydedin.

QR Kod Okuyucu

PNG, JPG veya WebP görüntüsünden QR kodu tarayıcıda çözün. URL, Wi-Fi, vCard, SMS, e-posta, takvim, geo veya metni kullanmadan önce görün.

Görsel boyutlandırıcı

Görselleri en boy oranını koruyarak kesin piksel ölçülerine veya yüzdelere göre yeniden boyutlandırın. Toplu hazırlık için uygundur, yükleme gerekmez.

Görsel sıkıştırıcı

Görsel kaliteyi korurken dosya boyutunu azaltmak için JPG, PNG ve WebP görsellerini sıkıştırın. Tamamen tarayıcınızda çalışır, yükleme gerekmez.

Grafiti Yazı Oluşturucu

Tag, balon, blok, şablon, neon ve wild efektleriyle grafiti tarzı yazılar hazırlayın. Renkleri ayarlayıp tarayıcıda PNG veya SVG olarak dışa aktarın.