Dark Mode Renk Paletleri: Gece İçin Hex Kodlu 12 Palet
Tam hex kodlu on iki dark mode renk paleti: geceleri parlayan vurgular, batan vurgular, iki tema için tek vurgu ve göz yormayan kırık beyaz metin.
Dark mode paleti, açık paletin ters çevrilmiş hali değildir. Vurgu rengi koyu bir sayfada farklı davranır, metnin daha yumuşak olması gerekir ve bazı renkler artık işe yaramaz. İşte geceyle birlikte nelerin değiştiğini göstermek için kurulmuş, her hex kodu verilmiş on iki koyu palet.
Dark mode vurgunuzu tersine çevirir
Beyazda zorlanan vurgular, koyu yüzeyde parlayanlardır. Beyazda sağlam görünen vurgular ise keskinliğini kaybedebilir. Yani koyu tema, açık temanın vurgusunu kontrol etmeden ödünç alamaz.
Aşağıdaki her palet bir açık mürekkep, bir vurgu ve bir koyu yüzeyden oluşur. Karolar vurguyu koyu sayfada ve beyazda gösterir. Koyu temanın arkasındaki sistem için dark mode renk sistemleri yazımıza bakın.
Lime
Graphite #17181C üzerinde Electric Lime #C6F432: parlıyor
Aynı vurgu beyazda: soluk
Graphite üzerinde Chalk #F2F3EE
Electric Lime beyazda neredeyse görünmez, Graphite üzerinde parlar. Beyazda zorlanan renkler, gece parlayanlardır.
Pink
Night Plum #1A1218 üzerinde Hot Pink #FF4F9A: parlıyor
Aynı vurgu beyazda: daha zayıf
Night Plum üzerinde Blush White #F6EEF2
Hot Pink beyazda daha zayıf, Night Plum üzerinde çok daha güçlüdür.
Amber
Coffee Black #1B1610 üzerinde Amber #FFB020: parlıyor
Aynı vurgu beyazda: soluk
Coffee Black üzerinde Warm White #F5F0E6
Amber beyazda zayıf bir vurgudur, Coffee Black üzerinde ise sıcak ve güçlüdür.
Royal
Midnight #121426 üzerinde Royal #3B4CCA: batıyor
Aynı vurgu beyazda: güçlü
Midnight üzerinde Frost #EEF0FA
Royal, açık modun ders kitabı mavisidir. Midnight üzerinde, bir butonun şekil olarak görünmesi için gereken seviyenin altına batar. Aynı hex, farklı sayfa.
Aynı hex, farklı sayfa. Royal dikkat edilmesi gereken renktir: beyazda çalışan bir buton gece batabilir.
Tek vurgu, iki tema
Bir buton, üzerinde durduğu sayfadan ayrışmak zorundadır. Waikiki bunu hem açık sayfasında hem koyu sayfasında yapar. Very Berry de öyle. Tek hex, iki tema.
Lime Punch ve Gentian Blue yapamaz. İkisi de bir temada harika görünür, diğerinde kaybolur.
Waikiki
Waikiki
Silver Bird #FBF8F1 üzerinde: geçiyor
Midnight Oil #10141F üzerinde: geçiyor
Her iki sayfada da öne çıkan orta tonlu bir turkuaz. Tek hex, iki tema.
Very Berry
Very Berry
French Porcelain #F7F4FB üzerinde: geçiyor
Twilight Zone #0F1C16 üzerinde: geçiyor
Hem açık sayfasında hem koyu sayfasında çalışan bir başka orta ton.
Lime Punch
Lime Punch
Ceramic #FBFAF5 üzerinde: kalıyor
Infinite Night #171538 üzerinde: geçiyor
Açık mod için fazla açık: gündüz yüzeyinde buton neredeyse kayboluyor. Infinite Night üzerinde ise parlıyor.
Gentian Blue
Gentian Blue
Open Book #F6EFE5 üzerinde: geçiyor
Balsamico #1C1612 üzerinde: kalıyor
Dark mode için fazla koyu. Open Book üzerinde güçlü, Balsamico üzerinde yok oluyor.
İki tema için tek vurgu istiyorsanız orta ton seçin ve iki kez kontrol edin. İstemiyorsanız her temaya kendi tonunu verin. Dark mode tasarımı rehberimiz bu ikinci temayı nasıl yayına alacağınızı anlatıyor.
Kırık beyaz, saf beyazı yener
Almost siyah bir yüzeyde saf beyaz elde edebileceğiniz en güçlü kontrasttır ve sorun da tam bu: göz alır. Bu paletlerdeki kırık beyazlar, gövde metninin ihtiyaç duyduğundan hâlâ çok daha okunaklıdır.
Material Design'ın koyu teması da aynı nedenle ana metni %87 beyazla ayarlar. Kırık beyaza biraz sıcaklık ya da biraz serinlik verin ve konuşmayı vurguya bırakın.
Smoked Salmon
Dark Moon #0B1B1F üzerinde Distant Cloud #E7ECEC
Dark Moon üzerinde saf beyaz #FFFFFF: göz alıyor
Dark Moon üzerinde Smoked Salmon #FF887A
Sıcak bir mercan vurguyla serin bir kırık beyaz. Vurgu hiçbir yardıma ihtiyaç duymadan net şekilde öne çıkar.
Minted Elegance
Violet Void #1C1022 üzerinde Vanilla Sugar #F1EBDF
Violet Void üzerinde saf beyaz #FFFFFF: göz alıyor
Violet Void üzerinde Minted Elegance #4FCB9C
Vanilla Sugar biraz sıcaklık taşır, nane vurgusunun da Violet Void üzerinde bolca alanı vardır.
Malibu
Asphalt #1C140F üzerinde Milk and Cookies #EFE7E7
Asphalt üzerinde saf beyaz #FFFFFF: göz alıyor
Asphalt üzerinde Malibu #57BAF0
Sıcak bir almost siyah üzerinde sıcak bir kırık beyaz ve onu kesip geçen bir gök mavisi.
Dream Vapour
Black Stallion #0E1A16 üzerinde Star Magnolia #EAEFE4
Black Stallion üzerinde saf beyaz #FFFFFF: göz alıyor
Black Stallion üzerinde Dream Vapour #BB9DF0
Star Magnolia hafif yeşile kayar, bu da yumuşak bir leylak vurguyla güzel durur.
Bu dördündeki her vurgu gece yüzeyinde net şekilde öne çıkıyor, yani metin sessiz kalabilir.
On iki paletin hepsi tek tabloda
| Palet | Renkler | Neyi gösteriyor |
|---|---|---|
| Lime | Chalk #F2F3EE, Electric Lime #C6F432, Graphite #17181C | Koyuda parlar |
| Pink | Blush White #F6EEF2, Hot Pink #FF4F9A, Night Plum #1A1218 | Koyuda daha güçlü |
| Amber | Warm White #F5F0E6, Amber #FFB020, Coffee Black #1B1610 | Koyuda parlar |
| Royal | Frost #EEF0FA, Royal #3B4CCA, Midnight #121426 | Koyuda batar |
| Waikiki | Midnight Oil #10141F, Waikiki #0098A4, Silver Bird #FBF8F1 | İki temada da çalışır |
| Very Berry | Twilight Zone #0F1C16, Very Berry #CE4390, French Porcelain #F7F4FB | İki temada da çalışır |
| Lime Punch | Infinite Night #171538, Lime Punch #B7DD31, Ceramic #FBFAF5 | Sadece koyuda çalışır |
| Gentian Blue | Balsamico #1C1612, Gentian Blue #292BAE, Open Book #F6EFE5 | Sadece açıkta çalışır |
| Smoked Salmon | Distant Cloud #E7ECEC, Smoked Salmon #FF887A, Dark Moon #0B1B1F | Kırık beyaz metin |
| Minted Elegance | Vanilla Sugar #F1EBDF, Minted Elegance #4FCB9C, Violet Void #1C1022 | Kırık beyaz metin |
| Malibu | Milk and Cookies #EFE7E7, Malibu #57BAF0, Asphalt #1C140F | Kırık beyaz metin |
| Dream Vapour | Star Magnolia #EAEFE4, Dream Vapour #BB9DF0, Black Stallion #0E1A16 | Kırık beyaz metin |
Seçimi savunan kişi için rakamlar
Her eşleşme, üzerinde durduğu yüzeye karşı WCAG 2 kontrast formülüyle ölçüldü. Bu, yazıdaki oranların yer aldığı tek tablodur.
| Palet | Test | Oran | Sonuç |
|---|---|---|---|
| Lime | Vurgu koyu yüzeyde / beyazda | 13.84:1 / 1.28:1 | Parlar, soluk |
| Pink | Vurgu koyu yüzeyde / beyazda | 5.98:1 / 3.07:1 | Koyuda daha güçlü |
| Amber | Vurgu koyu yüzeyde / beyazda | 9.82:1 / 1.83:1 | Parlar, soluk |
| Royal | Vurgu koyu yüzeyde / beyazda | 2.66:1 / 6.83:1 | Koyuda batar |
| Waikiki | Buton açıkta / koyuda | 3.2:1 / 5.2:1 | İkisinde de geçer |
| Very Berry | Anahtar açıkta / koyuda | 3.9:1 / 4.0:1 | İkisinde de geçer |
| Lime Punch | Buton açıkta / koyuda | 1.4:1 / 11.1:1 | Kalır, geçer |
| Gentian Blue | Oynat butonu açıkta / koyuda | 8.9:1 / 1.7:1 | Geçer, kalır |
| Smoked Salmon | Kırık beyaz metin / saf beyaz / vurgu | 14.7:1 / 17.6:1 / 7.6:1 | Geçer, göz alır, geçer |
| Minted Elegance | Kırık beyaz metin / saf beyaz / vurgu | 15.4:1 / 18.3:1 / 9.0:1 | Geçer, göz alır, geçer |
| Malibu | Kırık beyaz metin / saf beyaz / vurgu | 14.9:1 / 18.1:1 / 8.3:1 | Geçer, göz alır, geçer |
| Dream Vapour | Kırık beyaz metin / saf beyaz / vurgu | 15.2:1 / 17.8:1 / 7.8:1 | Geçer, göz alır, geçer |
Koyu paletinizi nasıl kurarsınız
- Önce koyu yüzeyi seçin. Graphite #17181C ya da Violet Void #1C1022 gibi almost siyah bir ton, saf siyahtan daha yumuşaktır.
- Metni kırık beyazla yazın. Vanilla Sugar #F1EBDF'teki gibi biraz sıcaklık ya da biraz serinlik ekleyin.
- Vurguyu koyu yüzeyde test edin. Açık temanın vurgusunu kontrol etmeden tekrar kullanmayın.
- Bir vurgu mu iki mi, karar verin. Tek vurgu iki temaya da hizmet edecekse orta ton seçin ve iki sayfada da kontrol edin. Yoksa her temaya kendi tonunu verin.
- Butonu bir şekil olarak kontrol edin. Sadece etiket gibi okunmamalı, sayfadan ayrışmalı.
Her set için dosyaları alın
Her set, Forge'da ücretsiz bir renk setidir: dokun-kopyala kodlar, Figma ve Adobe için swatch dosyaları (ASE), CSS değişkenleri ve design token'lar içerir.
Ücretsiz renk seti
Dark mode vurgunuzu tersine çevirir: Lime, Pink, Amber, Royal
Her hex, ayrıca ASE swatch'ları, CSS değişkenleri ve design token'lar.
Ücretsiz renk seti
Tek vurgu, iki tema: Waikiki, Very Berry, Lime Punch, Gentian Blue
Her hex, ayrıca ASE swatch'ları, CSS değişkenleri ve design token'lar.
Ücretsiz renk seti
Dark mode için kırık beyaz: Smoked Salmon, Minted Elegance, Malibu, Dream Vapour
Her hex, ayrıca ASE swatch'ları, CSS değişkenleri ve design token'lar.
SSS
Bir dark mode renk paletinde en iyi hangi renkler çalışır?
Almost siyah bir yüzey, metin için kırık beyaz ve koyuda öne çıkan bir vurgu. Dark Moon #0B1B1F üzerinde Smoked Salmon #FF887A ve metin için Distant Cloud #E7ECEC iyi bir örnektir.
Dark mode saf beyaz metin kullanmalı mı?
Hayır. Almost siyah bir yüzeyde saf beyaz göz alır. Vanilla Sugar #F1EBDF gibi bir kırık beyaz, gövde metninin ihtiyacından hâlâ çok daha okunaklıdır ve daha yumuşaktır.
Açık ve koyu modda aynı vurgu rengini kullanabilir miyim?
Yalnızca orta tonsa. Waikiki #0098A4 iki sayfada da öne çıkar. Lime Punch #B7DD31 açıkta, Gentian Blue #292BAE ise koyuda kaybolur.
Mavi butonum dark mode'da neden kayboluyor?
Beyazda güçlü olan bir mavi, koyu yüzey için fazla koyu olabilir. Royal #3B4CCA, Midnight #121426 üzerinde batar. Koyu tema için daha açık bir mavi kullanın.
Dark mode butonları hangi renk olmalı?
Koyu yüzeyden ayrışan herhangi biri. Electric Lime #C6F432, Hot Pink #FF4F9A ve Amber #FFB020'nin hepsi bunu yapar, çünkü parlak renkler geceleri parlar.
En iyi dark mode arka plan rengi hangisi?
Saf siyah yerine Graphite #17181C ya da Coffee Black #1B1610 gibi almost siyah bir ton. Kırık beyazın yanında daha yumuşaktır ve vurgunun yine de parlamasına izin verir.
Kaynaklar
- Renk adları ve hex kodları, Forge üzerindeki UX Brainy renk setlerinden (vol 05, 09 ve 10). Kontrast, her rengin üzerinde durduğu yüzeye karşı WCAG 2 formülüyle hesaplandı.
- Metin ve şekil eşikleri W3C WCAG 2.2'yi izler: Contrast (Minimum) ve Non-text Contrast.
- Material Design'ın koyu teması ana metni %87 beyazla ayarlar: Material Design, Dark theme.
- İlk olarak UX Brainy'de üç carousel olarak yayımlandı: Beyazda çalışan vurgu dark mode'da kaybolabilir, Açık ve koyu mod için tek vurgu yalnızca ortada çalışır ve Dark mode'un saf beyaz metne ihtiyacı yok.
Want a dark theme designed and tested for your own product, not borrowed from the light one? Our team designs interfaces that hold up in both themes.
Get Started
