Ana Sayfa
Renk Araçları
Material Tasarım Renkleri

Material Design Renk Paleti Tüm gölgeleri ve vurgulamaları ile Material Design renk paletini keşfedin.

🎨

Material Tasarım Renkleri

Tüm gölgeleri ve vurgulamaları ile Material Design renk paletini keşfedin.

Renk Ailesi Seç

Kırmızı, Mavi veya Yeşil gibi bir renk ailesini seçin.

Tonları Gözden Geçir

50 (en açık) ile 900 (en koyu) arasındaki tüm tonlara ve vurgulama varyantlarına bakın.

Renkleri Kopyala

Her bir tonun HEX kodunu tek tıkla kopyalayın.

Loading tool...

What Is Material Tasarım Renkleri?

Material Design Renkleri, Google'ın Material Design renk sistemine yönelik eksiksiz bir referanstır ve 50'den 900'e kadar gölgelerle birlikte 19 renk ailesi (A100-A700) sunar. Material Design paleti, kullanıcı arayüzü tasarımı için dengeli ve kapsamlı bir renk seti sağlamak amacıyla Google tarafından özenle hazırlanmıştır. Her renk ailesi, çok açık (50) ile çok koyu (900) arasında bir aralık sunar ve vurgulu elemanlar için canlı, doygun varyantlar sağlayan aksan gölgeleri sağlar. Palet, erişilebilirlik göz önünde bulundurularak tasarlanmıştır ve komşu gölgeler arasındaki kontrast açıktır. Genellikle Android uygulaması geliştirme, Material UI (React), Angular Material, Flutter ve Material Design rehberlerine uyan web uygulamalarında kullanılır. Araç, aileye göre gezinmeni sağlar, tüm gölgeleri bir görsel şeritte görüntüler ve herhangi bir rengin HEX kodunu kopyalamanı sağlar.

Why Use Material Tasarım Renkleri?

Tüm 19 renk ailesini içeren eksiksiz Material Design paleti
50-900 aralığındaki tonlar ve vurgulama varyantları (A100-A700)
Görsel renk ailesi seçici ile hızlı gezinme
Tüm varyantların bir bakışta görüldüğü ton şeridi
Her rengin tek tıkla kopyalanması

Common Use Cases

Android Geliştirme

Google'ın tasarım kılavuzlarını takip eden Android uygulamaları için Material renkleri seçin.

Material UI (React)

MUI tema özelleştirmesi için kesin renk değerlerini bulun.

Flutter Geliştirme

Flutter uygulamaları için Material renkleri güvenle seçin.

Web Tasarımı

Resmi renk paletini kullanarak Material Design ilhamlı web siteleri oluşturun.

Technical Guide

Material Design renk sistemi, yapılandırılmış bir adlandırma kuralı kullanır: Aile Adı + Gölgelik Numarası. Her ailede 10 standart gölgelik (50, 100, 200...900) ve en fazla 4 aksan gölgeliği (A100, A200, A400, A700) bulunur. Standart gölgelikler çok açık (50, arka planlar için uygun) ile çok koyu (900, metin için uygun) arasında ilerler. Aksan gölgelikleri, yüzen eylem düğmeleri, etkileşimli elemanlar ve vurgulu elemanlar için tasarlanmış doygun varyantlardır. Tüm ailelerin aksan varyantları yoktur - Kahverengi, Gri ve Mavi Gri aksan varyantlarına sahip değildir çünkü nötrdürler. Renkler, Material Design 3'te (Material You) HCT (Renk Tonu, Kroma, Ton) renk uzayında tasarlanmıştır ve bu, HSL'ye kıyasla daha algısal olarak uniform renk rampaları sağlar. Palet, 500 gölgeliği ile beyaz metin arasındaki ve açık gölgeliklerle koyu metin arasındaki WCAG AA kontrastını güvence altına alır.

Tips & Best Practices

1
500 tonu her ailenin "birincil" tonudur - bunu temel olarak kullanın
2
50-200 aralığındaki tonlar arka plan ve yüzeyler için iyi çalışır
3
600-900 aralığındaki tonlar açık arka planlarda metin için iyi çalışır
4
Vurgulama tonları (A100-A700) FAB'ler ve bağlantılar gibi vurgulama elemanları içindir
5
Material Design 3, kullanıcı duvar kağıtlarından dinamik renk getirir - Material You'da güncellemeleri kontrol edin

Related Tools

HEX'ten RGB'ye Dönüştürücü

HEX renk kodlarını anında RGB değerlerine dönüştürün ve canlı önizleme swatch'i ile birlikte kullanın.

🎨 Color Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Marka Renk Paletleri

50'den fazla popüler marka ve teknoloji şirketinin resmi renk paletlerini keşfedin.

🎨 Color Tools

Tailwind Renk Bulucu

Herhangi bir HEX koduna en yakın Tailwind CSS renk sınıfını bulun.

🎨 Color Tools

iOS ve Android Sistem Renkleri

iOS İnsan Arayüzü ve Android Material Design için sistem renklerini keşfedin.

🎨 Color Tools

Frequently Asked Questions

Q Bu en son Material Design paleti mi?

Bu, Material Design 2 paletini içerir. Material Design 3 (Material You), kullanıcı duvar kağıtlarından palette oluşturan dinamik renk temalamasını tanır, ancak klasik palet standart referans olarak kalır.

Q Neden Kahverengi, Gri ve Mavi Gri vurgulama tonlarına sahip değil?

Bu tarafsız renk aileleridir. Vurgulamalar yüksek doygunlukta ve canlı renklere tasarlanmıştır, bu da tarafsız renklerin doğasını çelişir.

Q Birincil düğmeler için hangi tonu kullanmalıyım?

Açık moda sahip birincil düğmeler için tipik olarak 500 veya 600 tonu kullanılır. Karanlık modda, koyu yüzeylerde 200 veya 300 tonu kullanılır. Her zaman kontrast oranlarını doğrulayın.

About This Tool

Material Tasarım Renkleri is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.