Vurgu Renk Paletleri: 16 Vurgu ve Her Birinin İhtiyaç Duyduğu Etiket Rengi
Tam hex kodlarıyla on altı vurgu renk paleti, her biri bir vurgunun yapması gereken tek iş için test edildi: bir butonda okunabilir bir etiket taşımak. Hangi vurguların beyaz, hangilerinin koyu etiket aldığını, hangilerinin ikisini de almadığını görün.
Vurgu rengi, arayüzünüzde "buraya dokun" anlamına gelen tek renktir. Ancak üstündeki kelimeler okunabiliyorsa işe yarar; yani iyi vurguyu etiket belirler. İşte dört testte on altı vurgu, her hex kodu ve her birinin aldığı etiketle.
Bir vurgunun hayatta kalması gerekenler
Bir vurgu, üzerine bir kelime koyduğunuzda ne olduğuyla yargılanır. Etiket okunabilir olmalı ve buton arkasındaki sayfadan ayrışmalı.
Bu bize dört test verir. Beyaz mı koyu mu etiket alıyor, yoksa ikisinin de çalışmadığı ortada mı kalıyor? Küçük etiket metni taşıyabiliyor mu? Butterscotch Gold #F7C873 gibi buton olamayacak kadar soluk mu?
Aşağıdaki her palet bir mürekkep, bir vurgu ve bir yüzeyden oluşur; son karo testi gösterir.
Vurgu hangi etiketi alır
Teal, Cobalt ve Rose, beyaz etiketin odanın öbür ucundan okunacağı kadar koyudur. Amber #C88A16 değildir.
Teal
Derin Deniz
Teal
Tebeşir
Teal üzerinde beyaz
Beyaz etiketi bolca pay bırakarak taşıyan derin bir teal.
Cobalt
Lacivert Mürekkep
Cobalt
Sis
Cobalt üzerinde beyaz
Dördünün en güçlüsü. Cobalt üzerindeki beyaz odanın öbür ucundan okunur.
Rose
Erik Mürekkebi
Rose
Deniz Kabuğu
Rose üzerinde beyaz
Rose, beyaz etiketli üç vurgunun en açığıdır, yani en az payı vardır. Daha fazla açmayın.
Amber
Bark
Amber
Yulaf
Amber üzerinde Bark
Amber dürüst olanı. Üzerinde beyaz kalıyor ve çözüm daha koyu bir amber değil: etiketi Bark ile yazın, rengi olduğu gibi bırakın.
Bir vurgunun bütün işi bu: üstüne koyduğunuz kelimelere dayanmak. Amber, çözümün nadiren başka bir renk olduğunu gösteriyor. Etiketi değiştirin, markayı koruyun.
Orta ton ölü bölgesi
Bazı vurgular açıklık ölçeğinin ortasında durur: beyaz metin için fazla açık, koyu metin için fazla koyu. Bu dördünden ikisi zıt yönlere kaçıyor, ikisi sıkışıp kalıyor.
French Winery
French Winery
French Winery üzerinde beyaz: geçer
French Winery üzerinde Midnight Express #1D2433: kalır
Manolya Yaprağı
Beyaz metnin çalışacağı kadar koyu. French Winery ölü bölgeden koyulaşarak çıkıyor.
Wild Forest
Wild Forest
Wild Forest üzerinde beyaz: kalır
Wild Forest üzerinde Nightwalker #2B1A35: kalır
Vintage Porselen
Tam ortada duran ferah bir yeşil. Beyaz kalıyor, koyu da kalıyor. Bir ton koyulaşırsa beyaz geçer; tek bir buton tasarlamadan önce yeşili biraz itin.
Glowing Lantern
Glowing Lantern
Glowing Lantern üzerinde beyaz: kalır
Glowing Lantern üzerinde Aztec #153023: geçer
Sessiz Kar Yağışı
Koyu metnin çalışacağı kadar açık. Glowing Lantern ölü bölgeden diğer yöne, açılarak çıkıyor; etiketi Aztec, asla beyaz.
Pink Orchid
Pink Orchid
Pink Orchid üzerinde beyaz: kalır
Pink Orchid üzerinde Royal Neptune #0F2E30: kalır
Kar Tanesi
Wild Forest ile aynı sorunu yaşayan orta tonda bir pembe. Bir ton koyulaşırsa beyaz geçer.
Büyük yazının eşiği küçük yazıdan düşüktür; bu yüzden iri bir başlık bu renklerde iyi görünürken buton etiketi kalabilir. Vurgunun üstüne koyacağınız en küçük metni kontrol edin. Marka vurgunuz ortaya denk geliyorsa, buton setini kurmadan önce onu itin.
Buton rozet değildir
Rozet genellikle arka plan için yaklaşık %15 vurgu, metin için tam vurgudur. Bu ton arka planı açar, dolayısıyla üzerindeki metin kontrast kaybeder. Bir vurgu beyaz buton etiketi taşıyıp kendi rozetinin içinde yine de kalabilir. Üçüncü karo, yüzeyin üzerindeki %15 vurgudur.
Peacock Pride
Peacock Pride
Beyaz buton etiketi: geçer
Peacock Pride, #D5E1D2 tonu üzerinde: geçer
Wood Bark #2A2320, ton üzerinde: geçer
Cosmic Latte #FBF7E6 üzerinde iki işi de atlatan derin bir teal-yeşil.
Furnace
Furnace
Beyaz buton etiketi: geçer
Furnace, #EAD9D1 tonu üzerinde: kalır
Elite Teal #13302A, ton üzerinde: geçer
Etiket olarak zayıflayan güçlü bir kırmızı-turuncu buton. White Glove #EEF4F0 üzerinde etiket metnini mürekkeple yazın, rozet gayet iyi okunur.
Purple Heart
Purple Heart
Beyaz buton etiketi: geçer
Purple Heart, #E6D3DF tonu üzerinde: geçer
Black Velvet #1B2838, ton üzerinde: geçer
Vanilla Blush #FDF1EC üzerinde arkasındaki tonun hiçbir fark yaratmadığı kadar koyu.
French Blue
French Blue
Beyaz buton etiketi: geçer
French Blue, #D9E3E3 tonu üzerinde: kalır
Nightly Voyager #2A1630, ton üzerinde: geçer
Furnace ile aynı hikaye: çalışan bir buton ve çalışmayan bir rozet. Powdered #FFF6E8 üzerinde mürekkep rozet metnini kurtarır.
Vurgunuz bir orta tonsa rozet ve etiket metnini mürekkeple yazın. Furnace'in etiketleri ve French Blue'nun rozetleri, metin mürekkebe geçtiği anda kolayca okunur olur.
Parlak olan buton değildir
Bir buton, üzerinde durduğu sayfadan net biçimde ayrışmalı. Krem bir sayfadaki soluk, parlak bir vurgu, paletin en güzel rengi olsa bile bunu yapamaz.
O halde işleri değiştirin. Koyu renk buton olur; parlak olan etiket, rozet ve seçili durum olur. Bu paletlerin ikisi bunu yapıyor, diğer ikisinin vurgusu dokunulacak kadar koyu.
Butterscotch
Storm Graphite #434343 buton, Butter Canvas #FAEBCD etiket: geçer
Butterscotch Gold #F7C873 etiket: geçer
Butterscotch Gold sayfada: neredeyse yok
Butterscotch Gold harika görünür ve Butter Canvas üzerinde buton olarak kaybolur. İşleri değiştirin: Storm Graphite dokunulur, altın etiket olur.
Ocean Breeze
Midnight Navy #0C2C55 buton, Vanilla Linen #EDEDCE etiket: geçer
Ocean Breeze #629FAD etiket: geçer
Ocean Breeze sayfada: neredeyse yok
Soluk bir keten üzerinde yumuşak bir teal-mavi. Aynı çözüm: Midnight Navy buton, Ocean Breeze etiket ve seçili durum.
Silent Grove
Silent Grove #215E61 buton: geçer
Morning Paper #F5FBE6 üzerinde bağlantı: geçer
Blue Monolith #233D4D
Bu her şeyi yapabilir. Koyu bir teal, Morning Paper üzerinde hem buton hem bağlantı; beyaz etiketi de kolayca okunuyor.
Wild Berry
Wild Berry #CF4173 buton: geçer
Peach Cashmere #F6D8BD üzerinde Wild Berry bağlantı: kalır
Deep Berry Plum #5D3140 bağlantı: geçer
Wild Berry beyaz etiketli buton olarak ancak ucu ucuna geçiyor. Peach Cashmere üzerinde metin olarak yetersiz kalıyor, bu yüzden bağlantıları Deep Berry Plum ile yazılıyor.
Bağlantı kelimelerdir, yani yalnızca buton eşiğini değil metin eşiğini de geçmelidir. Vurgu buton olarak ancak ucu ucuna geçiyorsa bağlantıları mürekkeple yazın.
On altı vurgunun tamamı tek tabloda
| Palet | Vurgu | Çalışan etiket | Dikkat edilecek nokta |
|---|---|---|---|
| Teal | Teal #0E7C6B | Beyaz | Dört işten hiçbiri |
| Cobalt | Cobalt #2F4BD6 | Beyaz | Dört işten hiçbiri |
| Rose | Rose #C2445F | Beyaz | Üçünün en az payı, açmayın |
| Amber | Amber #C88A16 | Bark #2C2415 | Beyaz kalır |
| French Winery | French Winery #9A0A2C | Beyaz | Koyu metin kalır |
| Wild Forest | Wild Forest #009041 | Hiçbiri, bir ton koyulaşana kadar | İki etiket de kalır |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | Beyaz kalır |
| Pink Orchid | Pink Orchid #C157AD | Hiçbiri, bir ton koyulaşana kadar | İki etiket de kalır |
| Peacock Pride | Peacock Pride #006262 | Beyaz | Dört işten hiçbiri |
| Furnace | Furnace #D23D20 | Beyaz | Rozet metni, Elite Teal #13302A kullanın |
| Purple Heart | Purple Heart #652A97 | Beyaz | Dört işten hiçbiri |
| French Blue | French Blue #0075C9 | Beyaz | Rozet metni, Nightly Voyager #2A1630 kullanın |
| Butterscotch | Butterscotch Gold #F7C873 | Koyu metin, etiket olarak | Buton olamayacak kadar soluk |
| Ocean Breeze | Ocean Breeze #629FAD | Koyu metin, etiket olarak | Buton olamayacak kadar soluk |
| Silent Grove | Silent Grove #215E61 | Beyaz | Dört işten hiçbiri |
| Wild Berry | Wild Berry #CF4173 | Beyaz | Bağlantılar, Deep Berry Plum #5D3140 kullanın |
Seçimi savunan kişi için rakamlar
Yukarıdaki her eşleşme WCAG 2 kontrast formülüyle ölçüldü. Bu, makalede oranların yer aldığı tek tablo.
| Palet | Test | Oran | Sonuç |
|---|---|---|---|
| Teal | Vurgu üzerinde beyaz etiket | 5.10:1 | Geçer |
| Cobalt | Vurgu üzerinde beyaz etiket | 6.78:1 | Geçer |
| Rose | Vurgu üzerinde beyaz etiket | 4.90:1 | Geçer |
| Amber | Vurgu üzerinde beyaz etiket | 2.96:1 | Kalır |
| French Winery | Beyaz etiket | 8.5:1 | Geçer |
| French Winery | Koyu etiket | 1.8:1 | Kalır |
| Wild Forest | Beyaz etiket | 4.1:1 | Kalır |
| Wild Forest | Koyu etiket | 3.8:1 | Kalır |
| Wild Forest | Beyaz etiket, bir ton koyu | 4.6:1 | Geçer |
| Glowing Lantern | Koyu etiket | 8.4:1 | Geçer |
| Glowing Lantern | Beyaz etiket | 1.6:1 | Kalır |
| Pink Orchid | Beyaz etiket | 4.0:1 | Kalır |
| Pink Orchid | Koyu etiket | 3.6:1 | Kalır |
| Pink Orchid | Beyaz etiket, bir ton koyu | 4.6:1 | Geçer |
| Peacock Pride | Buton etiketi / rozet metni | 7.1:1 / 5.3:1 | İkisi de geçer |
| Furnace | Buton etiketi / rozet metni / mürekkeple rozet metni | 4.7:1 / 3.4:1 / 10.3:1 | Geçer, kalır, geçer |
| Purple Heart | Buton etiketi / rozet metni | 9.0:1 / 6.3:1 | İkisi de geçer |
| French Blue | Buton etiketi / rozet metni / mürekkeple rozet metni | 4.7:1 / 3.6:1 / 12.7:1 | Geçer, kalır, geçer |
| Butterscotch | Sayfada altın / altın etiket üzerinde koyu metin | 1.32:1 / 6.34:1 | Kalır, geçer |
| Ocean Breeze | Sayfada vurgu / vurgu etiketi üzerinde koyu metin | 2.49:1 / 4.7:1 | Kalır, geçer |
| Silent Grove | Vurgu üzerinde beyaz etiket | 7.4:1 | Geçer |
| Wild Berry | Vurgu üzerinde beyaz etiket | 4.51:1 | Ucu ucuna geçer |
Kendi vurgunuzu nasıl test edersiniz
- Önce beyazı deneyin. Beyaz vurguda geçiyorsa, Cobalt #2F4BD6'da olduğu gibi etiketiniz belli olmuştur.
- Sonra en koyu mürekkebinizi deneyin. Beyaz kalıyor ve mürekkep geçiyorsa, Amber ve Glowing Lantern gibi her etiketi mürekkeple yazın.
- İkisi de kalırsa vurguyu kaydırın. Bir ton koyu ya da açık sizi ortadan çıkarır.
- Etiketi ayrıca test edin. %15'lik tonu oluşturun ve vurguyu onun üzerinde metin olarak kontrol edin. Kalırsa etiketleri mürekkeple yazın.
- Butonu sayfaya karşı kontrol edin. Soluk bir vurgu etikettir, buton değil. Erişilebilir renk kontrastı ve UI renk hataları makalelerimiz eşikleri ele alıyor.
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 tasarım token'ları içerir.
Ücretsiz renk seti
Mürekkep, yüzey, dokunulacak tek şey: Teal, Cobalt, Rose, Amber
Tüm hex kodları, ayrıca ASE swatch'ları, CSS değişkenleri ve tasarım token'ları.
Ücretsiz renk seti
Ölü bölge: French Winery, Wild Forest, Glowing Lantern, Pink Orchid
Tüm hex kodları, ayrıca ASE swatch'ları, CSS değişkenleri ve tasarım token'ları.
Ücretsiz renk seti
Buton rozet değildir: Peacock Pride, Furnace, Purple Heart, French Blue
Tüm hex kodları, ayrıca ASE swatch'ları, CSS değişkenleri ve tasarım token'ları.
Ücretsiz renk seti
Parlak olan buton değildir: Butterscotch, Ocean Breeze, Silent Grove, Wild Berry
Tüm hex kodları, ayrıca ASE swatch'ları, CSS değişkenleri ve tasarım token'ları.
SSS
Vurgu rengi bir butonda hangi renk metin kullanılır?
Vurgu yeterince koyuysa beyaz, açıksa koyu mürekkep. Teal #0E7C6B beyaz alır. Amber #C88A16 Bark #2C2415 alır. İkisi de çalışmıyorsa vurgu ortadadır ve bir ton kaydırılmalıdır.
Beyaz metin neden bazı renkli butonlarda kalıyor?
Çünkü buton fazla açık. Amber, Glowing Lantern #FFBB40 ve Butterscotch Gold #F7C873 parlak olduğu için üzerlerindeki beyaz metin silik kalır. Wild Forest #009041 gibi orta tonlar hem beyaz hem koyu metinde kalır.
Bir UI paleti için vurgu rengini nasıl seçerim?
Önce etiketi seçin. Vurgunun beyaz mı koyu metin mi taşıyacağına karar verin, sonra ortanın net biçimde bir tarafında kalan bir renk seçin. Onu buton olarak, rozet metni olarak ve sayfaya karşı kontrol edin.
Vurgu rengim buton olarak iyi görünüyor ama rozet olarak kötü, neden?
Rozet, vurguyu kendisinin açık bir tonu üzerinde metin olarak koyar ve bu kontrastı düşürür. Furnace #D23D20 ve French Blue #0075C9 beyaz buton etiketini kolayca taşır ve rozet metni olarak kalır. Rozet metnini mürekkeple yazın.
Açık bir vurgu rengi buton olabilir mi?
Nadiren. Arkasındaki sayfadan ayrışması gerekir ve krem bir sayfadaki soluk vurgu bunu güçlükle yapar. Koyu bir rengi buton yapın, soluk vurguyu etiket veya seçili durum olarak kullanın.
Kaynaklar
- Renk adları ve hex kodları, Forge'daki UX Brainy renk setlerinden, vol 02, 06, 07 ve 11. Kontrast, her rengin üzerinde durduğu yüzeye karşı WCAG 2 formülüyle hesaplandı.
- Metin ve şekiller için kontrast eşikleri W3C WCAG 2.2'yi izler: Contrast (Minimum) ve Non-text Contrast.
- Her rozet karosundaki ton hex'i, paletten türetilen, yüzey üzerinde %15 vurgudur.
- İlk olarak UX Brainy'de dört carousel olarak yayımlandı: Vurgunuz, üzerindeki etiketin hangi renk olması gerektiğini belirler, Ölü bölge, Buton rozet değildir ve Parlak olan buton değildir.
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
