Açık Mod Arka Plan Rengi: #FFFFFF Neden Yetmez ve Kullanılacak 8 Renk
Bembeyaz bir ekranda derinliğe yer kalmaz. Onun yerine kullanılacak açık mod arka plan rengi (beyaz kartların arkasında #F2F2F7), daha yumuşak metin renkleri, daha koyu vurgu rengi ve geliştiricine verilecek 8 kod.
En iyi açık mod arka plan rengi #FFFFFF değildir. Sayfayı #F2F2F7 gibi yumuşak bir griye oturt, beyazı da üstünde duran kartlara sakla; böylece yüzeylerin yükselebileceği bir zemin olur. İşte tamamen beyaz bir ekranın neden çuvalladığı, üç çözüm ve geliştiricine vereceğin sekiz renk.
Tamamen beyaz ekran neden düzleşir
Çoğu tasarımcı açık modu her şeyi beyaza boyayarak başlatır. Her tasarım aracında varsayılan dolgu, her tarayıcıda varsayılan arka plan olduğu için nötr hissettirir. Nötr değildir. Derinlik gösterme yeteneğini ortadan kaldıran tek seçimdir.
Bir kartın üzerinde durduğu sayfadan farklı görünmesi gerekir. İkisi de #FFFFFF olduğunda onları ayırmanın tek yolu çerçeve ya da gölge kalır; bu iki detay bütün işi yüklenir. Birkaç kart daha ekle, ekran bir çerçeveler ızgarasına döner.
Karanlık mod bunu zaten çözdü. Orada daha açık yüzey daha yüksek yüzey demektir, yani her katman altındakinden bir adım daha açıktır. Karanlık mod renk sistemleri yazımız bu rampayı, karanlık mod tasarımı yazımız ise paletin geri kalanını anlatıyor. Açık modda beyazın üstünde daha açık bir adım yok, bu yüzden farklı bir hamle lazım: zemini aşağı çek.
Çözüm 1: Sayfayı #F2F2F7 ile başlat
Sayfa ve kartlar #FFFFFF
Sayfa #F2F2F7, kartlar #FFFFFF
#F2F2F7, iOS'un gruplanmış listelerin arkasına koyduğu gridir. Açık modda Apple'ın sistem gray 6 rengidir ve Apple'ın kendi yönergesi gruplanmış tablo görünümleri için gruplanmış arka plan renklerini kullanmaktır. Ayarlar klasik örnektir: soluk gri bir sayfa, beyaz satırlar.
Tek bir değişiklik sana bir zemin ve bir tavan verir. Sayfa zemindir, kartlar ve sheet'ler tavandır; aralarındaki fark tek bir çizgi çizmeden görünür.
Nerede uygulanır:
- Sayfa arka planı: kart, liste ya da bölüm içeren her ekranın arkasında.
- Gruplanmış listeler ve ayar ekranları: satırlar beyaz, boşluklar gri.
- Beyaz kart içindeki girdi alanları: sayfa grisinde durup içe gömülü okunabilirler.
Ekranın hiç kart içermeyen uzun bir beyaz makaleyse beyaz gayet iyidir. Kural, yüzeylerden oluşan arayüzler içindir.
Çözüm 2: Kaldırma işini gölgeler yapsın
Karanlık modda yükseklik daha açık bir renktir. Açık modda yüzeyler beyaz kalır, bunun yerine gölge büyür. Duran bir karta küçük, yumuşak bir gölge verilir; üstünde süzülen bir menü ya da diyalog daha büyük ve daha yumuşak bir gölge alır.
İki alışkanlık bunu doğru gösterir:
- Gölgeyi saf siyahla değil, mürekkebinle renklendir. Metnin renginde bir gölge (yazıda #1B1530, koyu bir mor kullanıldı) arayüzün parçası gibi durur. Saf siyah leke gibi durur.
- Büyük, yüksek demek olsun. Küçükten büyüğe dört kademelik kısa bir ölçek kullan ve her seviyeyi bir işe eşle: kart, yükseltilmiş kart, menü, diyalog. Sonra asla beşincisini icat etme.
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
Bunu çalıştıran gri sayfadır. Beyaz bir sayfada yumuşak bir gölge neredeyse görünmez, insanlar da daha koyu bir gölge ya da çerçeveyle telafi eder. #F2F2F7 üzerinde hafif bir gölge yeter.
Çözüm 3: Siyahını yumuşat, sonra vurgunu derinleştir
Beyaz ya da beyaza yakın bir sayfada saf #000000 metin gerekenden sert gelir ve yanındaki her rengi zayıf gösterir. Material 3 açık metnini bir adım daha yumuşak tutar.
Metin
İkincil metin
Devre dışı, yüzde 38
- #1D1B20 metin için. Material 3'ün on-surface rengidir. Hafif violet dokunuşlu neredeyse siyahtır; hem beyazda hem grisinde iyi durur.
- #49454F alt yazı, yardımcı satır ve zaman damgası gibi ikincil metinler için. Hâlâ rahat okunur ve ana metinden belirgin biçimde daha sessizdir.
- Aynı mürekkebin yüzde 38'i devre dışı etiket ve ikonlar için. Beyazın üstünde #A9A8AA'ya denk gelir ve Material tam bu opaklığı kullanır. Devre dışı metin, düşük kontrastın amaç olduğu tek yerdir ve WCAG onu muaf tutar.
Vurgu rengi ise ters yönde düzeltme ister. Koyu ekranda harika görünen parlak, açık bir marka rengi beyazda kaybolur.
Beyazda açık vurgu
Beyazda koyu vurgu
#BB86FC, Material'ın koyu temalar için baseline moru. Beyazda neredeyse yok olur; bu da buton ya da bağlantı gibi okunması gereken her şey için sorundur.
#6200EE ise Material'ın açık temalar için baseline moru; aynı aile, kendini taşıyacak kadar koyu. Açık tema kurarken koyu temanın vurgusunu yeniden kullanma. Aynı tonun daha koyu adımını seç.
8 açık mod rengi
Kodunu kopyalamak için herhangi bir çipe dokun.
| Rol | Değer | Ne için kullanılır |
|---|---|---|
| Zemin | #F2F2F7 | Sayfa, kartların ve gruplanmış listelerin arkası |
| Kartlar | #FFFFFF | Kartlar, sheet'ler, menüler, satırlar |
| Ayırıcılar | #E5E5EA | Satırlar arasındaki çizgiler. Girdi çerçeveleri için değil |
| Metin | #1D1B20 | Başlıklar ve gövde |
| İkincil | #49454F | Alt yazılar, yardımcı metin, zaman damgaları |
| Devre dışı | #A9A8AA | Devre dışı etiket ve ikonlar (yüzde 38 metin) |
| Birincil | #6200EE | Butonlar, bağlantılar, seçili durumlar |
| Hata | #B00020 | Hata metni, çerçeveleri ve ikonları |
#E5E5EA iOS system gray 5'tir ve ayırıcı için işe yarar, çünkü ayırıcının okunması değil fark edilmesi yeter. Alan çerçevesi bundan fazlasını ister. Placeholder ve etiketler yazımız onun yerine kullanılacak çerçeve rengini veriyor.
Bunu geliştiricine ver
Aynı sekiz renk CSS özel özellikleri olarak:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
Karanlık tema da yayınlıyorsan, bu isimlerin her birine @media (prefers-color-scheme: dark) altında ikinci bir değer ver; karanlık mod token haritasındaki gibi. İsimler aynı kalır, yalnızca değerler değişir; açık modun "ters çevrilmiş karanlık mod" olmasını engelleyen de budur.
"Rahat görünür"ün arkasındaki sayılar
Yazıda "rahat görünür" ve "zor görünür" diyoruz. Seçimi bir incelemede savunacak kişi için işte sayılar (beyaz üzerinde hesaplanmış WCAG 2 kontrast oranları):
| Çift | Kontrast | Karar |
|---|---|---|
| #FFFFFF üzerinde #1D1B20 metin | 17,1 / 1 | 4,5 / 1 minimumun çok üstünde |
| #FFFFFF üzerinde #49454F metin | 9,3 / 1 | İkincil metin için rahat |
| #FFFFFF üzerinde #A9A8AA devre dışı | 2,4 / 1 | Muaf, devre dışı sessiz olmalı |
| #FFFFFF üzerinde #BB86FC | 2,65 / 1 | Buton şeklinin ihtiyaç duyduğu 3 / 1'in altında |
| #FFFFFF üzerinde #6200EE | 7,63 / 1 | Rahat görünür |
Bilmeye değer bir şey daha: Material 3'ün kendi açık yüzeyi de #FFFFFF değildir. #FEF7FF'tir, zar zor renklendirilmiş bir beyaz. Çoğu ekibin varsayılan saydığı tasarım sistemi bile ekranı saf beyaza boyamaz.
SSS
Açık mod için en iyi arka plan rengi nedir?
Sayfa için #F2F2F7 gibi yumuşak açık gri, üstündeki kartlar için #FFFFFF. Gri, beyaz yüzeylere ayrışacakları bir zemin verir; böylece daha az çerçeve ve gölgeye ihtiyaç duyarsın.
#FFFFFF kötü bir arka plan rengi mi?
Her zaman değil, ama tamamen beyaz bir ekranın derinlik gösterme şansı yoktur. Kartlar sayfaya erir, çerçeveler ve gölgeler bütün işi yüklenir. Beyaz, bütün ekranın değil yüzeylerin rengi olarak en iyi çalışır.
#F2F2F7 nedir?
Açık modda iOS system gray 6'dır; Apple'ın Ayarlar uygulaması gibi gruplanmış listelerin arkasında kullandığı gri. Apple, gruplanmış tablo görünümleri için gruplanmış arka plan renklerini önerir.
Beyaz arka planda hangi metin rengini kullanmalıyım?
Metin için #1D1B20 gibi yumuşak bir neredeyse siyah, ikincil metin için #49454F. İkisi de Material 3 rengidir ve hem beyazda hem #F2F2F7 üzerinde rahat okunur.
Açık modda yükseklik nasıl gösterilir?
Gölgelerle. Karanlık modda daha açık yüzey daha yüksek demektir, ama açık modda beyazın üstünde daha açık bir adım yoktur; bu yüzden yüzeyler beyaz kalır ve gölge yükseklikle birlikte büyür.
Vurgu rengi açık ve karanlık mod arasında değişmeli mi?
Evet. #BB86FC gibi açık bir vurgu koyu ekranlarda çalışır ama beyazda neredeyse kaybolur. Açık yüzeylerde aynı tonun #6200EE gibi daha koyu bir adımını kullan.
Kaynaklar
- Apple Human Interface Guidelines, Color: #F2F2F7 açık modda systemGray6'dır (R242 G242 B247) ve gruplanmış arka plan renkleri gruplanmış tablo görünümleri içindir.
- Material 3 renk rolleri, androidx Compose ColorLightTokens ve PaletteTokens'tan okundu: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), açık surface #FEF7FF. Bkz. Material renk rolleri.
- Devre dışı etiket ve ikon opaklığı 0,38, Material 3 bileşen token'larından. #FFFFFF üzerinde yüzde 38 #1D1B20, #A9A8AA eder.
- #BB86FC ve #6200EE, Material'ın baseline koyu ve açık birincil renkleridir. #B00020 Material'ın baseline açık hata rengidir. #E5E5EA açık modda iOS system gray 5'tir.
- WCAG 2.2, 1.4.3 Contrast (Minimum) ve 1.4.11 Non-text Contrast. Oranlar WCAG göreli parlaklık formülüyle hesaplandı. Devre dışı metin minimumdan muaftır.
- #1B1530 gölge mürekkebi ve dört gölge seviyesi bizim kendi önerimizdir, bir platform değeri değildir.
- İlk olarak UX Brainy üzerinde carousel olarak yayınlandı.
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
