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

İleri: bir ton seçin

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

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

İ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.

Pantone - HEX Dönüştürücü

Pantone PMS renklerini ekran ve baskı eşleştirmesi için en yakın HEX, RGB ve CMYK değerlerine dönüştürün; örnek önizlemeyle birlikte.

Araç diğer dillerde mevcuttur