Mobil Uygulama Renk Tasarımı Rehberi

Mobil uygulama renk tasarımı, masaüstü web'den farklı zorluklar içerir: küçük ekranlar, parlak ışıkta okunabilirlik, dark mode desteği ve platform (Android/iOS) rehberleri. Bu rehberde Material Design renk sistemi, iOS Human Interface Guidelines, dark mode uygulaması, erişilebilirlik ve dinamik renkler konularını ele alıyoruz.

Material Design Renk Sistemi

Google'ın Material Design 3 (M3) renk sistemi, primary, secondary, tertiary ve surface tonlarını tanımlar. Tema renkleri HSL tabanlıdır; light ve dark varyantları otomatik üretilir. Primary renk marka kimliğini yansıtır; secondary ve tertiary vurgu ve arka plan için kullanılır. Surface renkleri arka plan katmanlarını tanımlar; elevation ile birlikte derinlik hissi verir.

CSS

/* Material 3 benzeri renk değişkenleri */
:root {
  --md-primary: #6750a4;
  --md-secondary: #625b71;
  --md-tertiary: #7d5260;
  --md-surface: #fef7ff;
  --md-on-primary: #ffffff;
  --md-on-surface: #1c1b1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-surface: #141218;
    --md-on-surface: #e6e1e5;
  }
}

iOS Human Interface Guidelines Renkleri

Apple'ın HIG belgeleri, sistem renkleri (System Blue, Green, Red vb.) kullanımını önerir. Özel marka renkleri kullanacaksanız, SF Symbols ile uyumlu ve kontrast kurallarına uygun olmalıdır. iOS'ta light ve dark appearance için ayrı paletler tanımlanır. Semantic renkler (label, link, separator) otomatik olarak temaya uyum sağlar.

Adaptive Renk Kullanımı

Hem Android hem iOS'ta prefers-color-scheme: dark ile dark mode algılanır. Renkleri sabit değil, semantik olarak tanımlayın: "primary", "surface", "onSurface" gibi isimler kullanın. Bu sayede tema değiştiğinde tüm arayüz tutarlı güncellenir.

Dark Mode ve Renk Seçimi

Dark mode sadece renkleri tersine çevirmek değildir. Saf siyah (#000) yerine koyu gri (#121212 veya benzeri) kullanmak göz yorgunluğunu azaltır. Yüksek doygunluklu renkler dark mode'da rahatsız edici olabilir; hafif soluk tonlar tercih edin. Beyaz metin için opacity kullanarak elevation farkı yaratabilirsiniz.

CSS

/* Dark mode için optimize edilmiş gradient */
.dark-hero {
  background: linear-gradient(
    180deg,
    #1a1a2e 0%,
    #16213e 50%,
    #0f3460 100%
  );
  color: #e4e4e7;
}

.dark-hero .accent {
  color: #818cf8; /* Daha yumuşak vurgu */
}

Nötr renkler kullanımı rehberimizde gri tonları ve yüzey renkleri hakkında ek bilgi bulabilirsiniz.

Erişilebilirlik ve Kontrast

Mobil cihazlar genellikle parlak ortamlarda kullanılır; ekran yansıması kontrastı düşürür. WCAG AA standardı için normal metin en az 4.5:1, büyük metin 3:1 kontrast gerektirir. Renk körlüğü olan kullanıcılar için sadece renkle bilgi iletmeyin; ikon, etiket veya desen ekleyin. Renk körlüğü ve erişilebilirlik rehberimizde test yöntemlerini bulabilirsiniz.

Sistem Renkleri

Android ve iOS, sistem tema renklerini uygulamalara sunar. Android 12+ Dynamic Color ile kullanıcı duvar kağıdından otomatik tema üretir. Bu özelliği desteklemek, marka kimliğinizi korurken kullanıcı tercihine saygı gösterir. Tamamen özel renk kullanan uygulamalar için sistem renklerini fallback olarak kullanın; böylece native his korunur.

Küçük Ekranlarda Renk Kullanımı

Mobil ekranlar sınırlı alan sunar; bu nedenle her renk anlamlı olmalıdır. Navigasyon ikonları için sistem renkleri veya tek bir vurgu rengi kullanın. Çok fazla renk karışıklık yaratır. Touch hedefleri en az 44x44 px olmalı; renk değişimi tek başına tıklanabilirliği belirtmez, boyut da önemlidir. Mobilde gradient'ler daha küçük alanlarda görünür; bu yüzden hafif ve yumuşak geçişler tercih edin.

Dinamik Renkler (Material You / Dynamic Color)

Material You ve iOS 18+ benzeri sistemler, kullanıcının seçtiği renkten tüm paleti türetir. Uygulama geliştirirken bu renkleri override edebilir veya "source" olarak kabul edebilirsiniz. Dinamik renk desteği, uygulamanızın modern ve kişiselleştirilmiş hissetmesini sağlar. Web'de bu özellik henüz sınırlı; CSS color-scheme ve @media (prefers-color-scheme) ile benzer davranış sağlanabilir.

Responsive Renk Tasarımı

Farklı ekran boyutlarında renk algısı değişebilir. Küçük ekranlarda çok ince detaylar kaybolur; büyük alanlarda hafif gradient'ler daha belirgin hale gelir. Responsive renk tasarımı rehberimizde breakpoint'lere göre palet ayarlamalarını inceleyebilirsiniz.

Özet

Mobil uygulama renk tasarımı, platform rehberlerine uyum, dark mode desteği, erişilebilirlik ve sistem/dinamik renk entegrasyonunu gerektirir. Renk psikolojisi ve marka kimliği renk seçimi rehberlerimizle paletinizi oluşturun; Palet Oluşturucu ile denemeler yapabilirsiniz.