Arayüz Renk Paletleri: Her Rengin Yapabildiği ve Yapamadığı İşler
Tam hex kodlarıyla on iki arayüz renk paleti, rol rol test edildi. Hangi vurgu rengi hem buton hem bağlantı olur, hangi gri metin renkli kartta çöker ve soluk bir vurgu neden doldurur ama asla yazmaz.
Bir arayüz renk paleti güzel renklerden oluşan bir set değildir. Roller kümesidir ve her renk bazı işleri yapabilir, bazılarını yapamaz. İşte her biri genelde ters giden tek bir rolde test edilmiş on iki palet, tüm hex kodlarıyla.
Arayüz paletindeki üç rol
Mürekkep yazar. Her metin satırının rengidir, bu yüzden yüzeyde yeterince koyu olmalıdır; örneğin Indigo Mist #EEF0FB üzerinde Ink Navy #141238 gibi. Vurgu yapamadığında bağlantılar için de mürekkebi kullanırsınız.
Yüzey taşır. Her şeyin arkasındaki sayfa ya da karttır. Beyaz olmak zorunda değildir ve seçtiğiniz ton, diğer her rengin davranışını değiştirir.
Vurgu dokunur. "Bu bir şey yapar" diyen tek renktir. Bu tek iş gibi görünüyor, bir sonraki bölüm ise iki iş olduğunu gösteriyor.
Bir vurgunun iki işi vardır
Butonda etiket vurgunun üzerinde okunmalı ve buton sayfadan ayrışmalıdır. Bir cümlenin içinde aynı vurgu bağlantıdır, bağlantı da metindir; yani aynı sayfada okunabilir olmalıdır. İki iş de aynı renk çiftini kullanır ama ikincisinin eşiği daha yüksektir.
Bu, bir vurgunun iyi buton ama kötü bağlantı olabileceği anlamına gelir. Sky ve Coral tam bu boşlukta durur. Indigo ve Berry ikisini de geçer.
Indigo
Indigo #4338CA, beyaz etiket: geçer
Indigo Mist #EEF0FB üzerinde bağlantı olarak Indigo: geçer
Bağlantı olarak Ink Navy #141238: geçer
Indigo hem buton hem bağlantı olarak çalışır. Tek renk, iki iş, düzeltilecek bir şey yok.
Berry
Berry #A61E4D, beyaz etiket: geçer
Berry Milk #FBEAF0 üzerinde bağlantı olarak Berry: geçer
Bağlantı olarak Deep Berry #2A0A18: geçer
Berry de aynısını yapar: butonda beyaz etiket, soluk pembe yüzeyinde okunaklı bağlantı.
Sky
Sky #248AE4, Harbor Ink etiket: geçer
Sky Wash #EAF4FC üzerinde bağlantı olarak Sky: kalır
Bağlantı olarak Harbor Ink #021828: geçer
Sky iyi bir buton ve zor bir bağlantıdır. Butonlara ayırın, bağlantıları altı çizili Harbor Ink ile yazın.
Coral
Coral #E85446, Burnt Clay etiket: geçer
Coral Milk #FDEEEB üzerinde bağlantı olarak Coral: kalır
Bağlantı olarak Burnt Clay #290E0A: geçer
Coral'da da aynı ayrım var. İnsanların görebildiği bir buton ve Coral Milk içinde kaybolan bir bağlantı.
Vurguyu butonlara saklayın
Çözüm ucuz. Sky ve Coral'ı butonlara ayırın, bağlantıları altı çizili mürekkeple yazın. Aynı cümle iki şekilde.
Parola
Parolanı mı unuttun?
✕ Bağlantı olarak Sky: okuması zor
Parola
Parolanı mı unuttun?
✓ Bağlantı olarak Harbor Ink: okuması kolay
Renkli kartlarda gri metin
İkincil metin genelde mürekkebinizin yaklaşık %65'idir. Beyazda dört paletin hepsinde rahat okunur, soluk bir yüzeyde de pek değişmez. Gerçek bir tonda ise çizginin altına düşebilir.
O yüzden beyazda değil, üzerinde durduğu yüzeyde test edin. Güçlü bir tonda griyi %70'e çıkarın, toparlanır.
Red Panda
Sombre Night
Red Panda
Sugar Milk #FAF7F0 üzerinde #636772: geçer
Beyazda aynı %65 karışım #656A77: geçer
Sugar Milk neredeyse beyaz, bu yüzden gri pek değişmez. Hem kartta hem beyazda geçer.
Warm Purple
English Walnut
Warm Purple
Oh Pistachio #BCDBA4 üzerinde #606146: kalır
%70'te #59573F: geçer
Oh Pistachio gerçek bir ton. Beyazda geçen aynı gri burada çizginin altına düşüyor, %70 onu geri getiriyor.
Mango
Jedi Night
Mango
Heart of Ice #F2F5FA üzerinde #5E6C68: geçer
Beyazda aynı %65 karışım #626F6A: geçer
Heart of Ice soluk, soğuk bir ton, bu yüzden gri dayanıyor.
Viridian
Midnight Dreams
Viridian
Digital Lavender #D3CAEE üzerinde #535D71: kalır
%70'te #495467: geçer
Digital Lavender aynı griyi kaldıracak kadar güçlü bir ton. %70'e çıkarın, kart yeniden okunur olur.
Soluk vurgu doldurur, asla yazmaz
Soluk bir vurgu harika bir dolgu ve umutsuz bir metin rengidir. Kendi sayfasında bu dördünün hiçbiri metin olarak okunamaz. Aynı rengi dolgu yapın, doğru kelimeleri seçtiğiniz sürece çalışır.
Purple Estate
Sunwashed Paper #F5EDCE üzerinde metin olarak Blue Horizon #72AFCC: kalır
Blue Horizon üzerinde Purple Estate #58287F: yalnızca büyük yazı
Sunwashed Paper üzerinde Purple Estate: geçer
Soluk mavi kâğıt üzerinde metin olarak kalır. Dolgu olarak Purple Estate'i taşır; büyük bir tarih için iyi, küçük yazı için değil.
Blue Horizon
Desert Cream #F5E9D8 üzerinde metin olarak Blue Horizon #2FA4D7: kalır
Blue Horizon üzerinde Cocoa Noir #3E2C23: geçer
Desert Cream üzerinde Cocoa Noir: geçer
Daha parlak mavi de Desert Cream üzerinde metin olarak kalır. Dolgu olarak Cocoa Noir'ı rahatça taşır.
Herb Garden
Sun Linen #FEFFD3 üzerinde metin olarak Herb Garden #BCD9A2: kalır
Herb Garden üzerinde Red Monarch #A82323: geçer
Sun Linen üzerinde Red Monarch: geçer
Dördü içinde sayfasında en silik olanı. Yeşilin üzerine Red Monarch koyun, sayı net okunur.
Nordic Sky
Manor Cream #EAE0CF üzerinde metin olarak Nordic Sky #7288AE: kalır
Nordic Sky üzerinde beyaz #FFFFFF: yalnızca büyük yazı
Manor Cream üzerinde Velvet Indigo #4B5694: geçer
Nordic Sky yalnızca beyazı kabul eder, o da sadece büyük yazı için; yani sayılar evet, küçük punto hayır. Sayfa metni Velvet Indigo ile yazılır.
Bu yüzden yalnızca sayfayı değil, dolguyu ve üzerindeki kelimeleri kontrol edin. Dolgudaki kelimeler yalnızca büyük yazı kontrastına ulaşıyorsa, onları büyük tutun.
On iki paletin hepsi tek tabloda
| Palet | Renkler | Test ettiği rol |
|---|---|---|
| Indigo | Ink Navy #141238, Indigo #4338CA, Indigo Mist #EEF0FB | Buton ve bağlantı ikisi de geçer |
| Berry | Deep Berry #2A0A18, Berry #A61E4D, Berry Milk #FBEAF0 | Buton ve bağlantı ikisi de geçer |
| Sky | Harbor Ink #021828, Sky #248AE4, Sky Wash #EAF4FC | Buton geçer, bağlantı kalır |
| Coral | Burnt Clay #290E0A, Coral #E85446, Coral Milk #FDEEEB | Buton geçer, bağlantı kalır |
| Red Panda | Sombre Night #121A2E, Red Panda #B54302, Sugar Milk #FAF7F0 | Gri kartta geçer |
| Warm Purple | English Walnut #2E1F14, Warm Purple #812E7D, Oh Pistachio #BCDBA4 | Gri kartta kalır |
| Mango | Jedi Night #0E2219, Mango #FAA828, Heart of Ice #F2F5FA | Gri kartta geçer |
| Viridian | Midnight Dreams #0E222D, Viridian #007F5B, Digital Lavender #D3CAEE | Gri kartta kalır |
| Purple Estate | Sunwashed Paper #F5EDCE, Blue Horizon #72AFCC, Purple Estate #58287F | Soluk mavi dolgu, yalnızca büyük yazı |
| Blue Horizon | Blue Horizon #2FA4D7, Desert Cream #F5E9D8, Cocoa Noir #3E2C23 | Dolgu Cocoa Noir ile geçer |
| Herb Garden | Red Monarch #A82323, Sun Linen #FEFFD3, Herb Garden #BCD9A2 | Dolgu Red Monarch ile geçer |
| Nordic Sky | Velvet Indigo #4B5694, Nordic Sky #7288AE, Manor Cream #EAE0CF | Dolgu beyazı alır, yalnızca büyük yazı |
Seçimi savunan kişi için sayılar
Her eşleşme, üzerinde durduğu yüzeye karşı WCAG 2 kontrast formülüyle ölçüldü. Bu, makaledeki oranları içeren tek tablo.
| Palet | Test | Oran | Sonuç |
|---|---|---|---|
| Indigo | Beyaz etiket / sayfada buton / sayfada bağlantı | 7.90:1 / 6.96:1 / 6.96:1 | Hepsi geçer |
| Berry | Beyaz etiket / sayfada buton / sayfada bağlantı | 7.21:1 / 6.22:1 / 6.22:1 | Hepsi geçer |
| Sky | Mürekkep etiket / sayfada buton / sayfada bağlantı | 5.01:1 / 3.23:1 / 3.23:1 | Geçer, geçer, kalır |
| Coral | Mürekkep etiket / sayfada buton / sayfada bağlantı | 4.98:1 / 3.21:1 / 3.21:1 | Geçer, geçer, kalır |
| Red Panda | Kartta %65 gri / beyazda | 5.2:1 / 5.4:1 | İkisi de geçer |
| Warm Purple | Kartta %65 gri / beyazda / %70'te | 4.1:1 / 5.0:1 / 4.8:1 | Kalır, geçer, geçer |
| Mango | Kartta %65 gri / beyazda | 5.0:1 / 5.2:1 | İkisi de geçer |
| Viridian | Kartta %65 gri / beyazda / %70'te | 4.2:1 / 5.1:1 / 4.8:1 | Kalır, geçer, geçer |
| Purple Estate | Metin olarak soluk vurgu / üzerindeki en iyi metin / sayfada mürekkep | 2.05:1 / 4.31:1 / 8.83:1 | Kalır, büyük yazı, geçer |
| Blue Horizon | Metin olarak soluk vurgu / üzerindeki en iyi metin / sayfada mürekkep | 2.36:1 / 4.66:1 / 11.03:1 | Kalır, geçer, geçer |
| Herb Garden | Metin olarak soluk vurgu / üzerindeki en iyi metin / sayfada mürekkep | 1.51:1 / 4.64:1 / 6.98:1 | Kalır, geçer, geçer |
| Nordic Sky | Metin olarak soluk vurgu / üzerinde beyaz / sayfada mürekkep | 2.75:1 / 3.59:1 / 5.25:1 | Kalır, büyük yazı, geçer |
Kendi arayüz paletinizi nasıl kurarsınız
- Mürekkep ve yüzeyle başlayın. Koyu bir mürekkep ve bir yüzey seçin, tonlu ya da beyaz, ve mürekkebi yüzeyde kontrol edin. Sky Wash #EAF4FC üzerinde Harbor Ink #021828 kolay durumdur.
- Vurguyu etiket için seçin. Üzerine beyaz mı koyu mu metin gideceğine karar verin ve etiketi vurgunun üzerinde kontrol edin.
- Vurguyu bağlantı olarak test edin. Yüzeyinize metin olarak koyun. Kalırsa butonlara ayırın, bağlantıları mürekkeple yazın.
- İkincil metni her yüzeyde test edin. Mürekkebi her kart renginin üzerine %65 karıştırın. Çöktüğü yerde %70'e çıkarın.
- Soluk renkleri dolgulara saklayın. Üzerlerine gidecek kelimeleri taahhüt etmeden önce seçin. Arayüz renk hataları ve erişilebilir renk kontrastı yazılarımız eşikleri daha derinlemesine anlatıyor.
Her set için dosyaları alın
Her set, Forge üzerinde ücretsiz bir renk setidir; dokun-kopyala kodları, Figma ve Adobe için örnek dosyaları (ASE), CSS değişkenleri ve tasarım token'ları içerir.
Ücretsiz renk seti
Bir vurgunun iki işi vardır: Indigo, Berry, Sky, Coral
Tüm hex kodları, ayrıca ASE örnekleri, CSS değişkenleri ve tasarım token'ları.
Ücretsiz renk seti
Renkli kartlarda gri metin: Red Panda, Warm Purple, Mango, Viridian
Tüm hex kodları, ayrıca ASE örnekleri, CSS değişkenleri ve tasarım token'ları.
Ücretsiz renk seti
Soluk vurgu doldurur, asla yazmaz: Purple Estate, Blue Horizon, Herb Garden, Nordic Sky
Tüm hex kodları, ayrıca ASE örnekleri, CSS değişkenleri ve tasarım token'ları.
SSS
Bir arayüz renk paletinde hangi renkler olmalı?
En az üç rol: metin için bir mürekkep, butonlar ve bağlantılar için bir vurgu ve sayfa için bir yüzey. Ink Navy #141238 ve Indigo Mist #EEF0FB ile Indigo #4338CA eksiksiz bir örnektir.
Arayüzde bağlantılar hangi renk olmalı?
Yalnızca yüzeyinizde metin olarak geçiyorsa vurgu rengi. Indigo geçer. Sky #248AE4 geçmez, bu yüzden bağlantıları altı çizili Harbor Ink #021828 ile yazılır.
İkincil metin hangi renk olmalı?
Mürekkebinizin yaklaşık %65'i, üzerinde durduğu yüzeyde kontrol edilmiş olarak. Oh Pistachio #BCDBA4 gibi güçlü bir tonda kalabilir, %70'e çıkarmak düzeltir.
Gri metin neden renkli kartta okunmaz?
Renkli bir kart beyazdan koyudur, bu yüzden gri ile kart arasındaki fark daralır. Beyaz sorunu gizler, bu yüzden gerçek yüzeyde test edersiniz.
Vurgu rengi olarak pastel kullanabilir miyim?
Dolgu olarak evet. Metin olarak hayır. Herb Garden #BCD9A2, Sun Linen #FEFFD3 üzerinde metin olarak kalır; üzerinde Red Monarch #A82323 olan bir dolgu olarak çalışır.
Buton rengi bağlantı rengi olarak da çalışmak zorunda mı?
İkisi için de kullanıyorsanız evet. Bir buton sayfadan ayrışmalı ve etiketini taşımalıdır. Bağlantı metindir, bu yüzden aynı sayfada daha yüksek bir eşiği vardır.
Kaynaklar
- Renk adları ve hex kodları Forge üzerindeki UX Brainy renk setlerinden, vol 04, 08 ve 12. 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.
- Her karodaki gri, palet mürekkebinin yüzeyle %65 ya da belirtilen yerlerde %70 karıştırılmış halidir; yani o hex paletten türetilmiştir.
- İlk olarak UX Brainy'de üç carousel olarak yayımlandı: Bir vurgu rengin iki işi vardır, Aynı gri beyazda geçip renkli kartında kalabilir ve Soluk vurgun bir şekli doldurabilir.
Want a UI palette built for your product, with every role tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
