Duvar kağıdından tema üreten telefonlar: dinamik renk

Kısa cevap

Dinamik renk sistemleri, kullanıcının duvar kağıdından ya da seçtiği bir renkten tek bir kaynak renk çıkarır ve bütün arayüzün paletini bu rengin tonundan, açıklığı ve doygunluğu önceden belirlenmiş basamaklarla türetir; böylece her kullanıcının telefonu farklı renklere bürünür, ama metin ile zemin arasındaki kontrast her kaynakta aynı kalır. Bunun marka için bedeli açıktır: uygulamanın vurgu rengi artık markanın değil kullanıcının seçimidir ve doygun bir marka rengi, sistemin kendi doygunluk sınırına çekilerek tanınmaz hâle gelebilir. Markalar bu yüzden ya dinamik rengi yalnız bazı yüzeylerde kabul eder, ya kendi renklerini sistemin rengine doğru hafifçe uyumlar, ya da tanınırlığı logo, biçim ve yazı gibi renk dışı işaretlere taşır.

Duvar kağıdından arayüze

UX-01'de bir renk sistemini katmanlara ayırdık: ham palet, anlam taşıyan rol adları ve bileşenler. O dersin varsayımı, ham paleti tasarım ekibinin seçmesiydi. Dinamik renk bu varsayımı bozar: ham palet, kullanıcının cihazındaki bir fotoğraftan çalışma anında üretilir.

Android geliştirici belgeleri bu özelliği şöyle tanımlar: Android 12 ile eklenen dinamik renk, kullanıcıların cihazlarını kişisel duvar kağıtlarının ya da duvar kağıdı seçicide seçtikleri bir rengin renk düzeniyle tonal olarak uyumlu hâle getirmesini sağlar. Belgeler, uygulamaların bu temayı bir arayüz çağrısıyla kendi ekranlarına uygulayabileceğini söyler; yani uygulama için dinamik renk bir seçimdir, zorunluluk değildir. Aynı sayfaya göre ilk sürümde tek bir varyant, tonal spot, vardı; Android 13 ile başka varyantlar eklendi.

Bu sistemi Google'ın açık kaynaklı Material Color Utilities kütüphanesi yürütür. Kütüphane aynı işi birkaç parçaya böler: bir görüntüyü az sayıda renge indiren nicemleme, bu renkleri tema için uygunluklarına göre sıralayan puanlama, seçilen renkten ton paletleri üreten palet bileşeni ve paletleri rollere bağlayan şema bileşeni. Bu dersteki sayıların hepsi kütüphanenin kendi kaynak kodundan okunmuş ya da kütüphane çalıştırılarak hesaplanmıştır.

Kaynak renk nasıl seçilir

Bir duvar kağıdı binlerce renk içerir. Kütüphane önce görüntüyü nicemler: benzer pikselleri kümeleyerek birkaç düzine temsilci renge indirir ve her rengin görüntüde ne kadar yer kapladığını sayar. Ardından bu renkleri puanlar.

Puanlama kodunu okumak, sistemin neyi «iyi kaynak renk» saydığını açıkça gösterir. Kroması 5'in altında kalan, yani neredeyse gri olan renkler baştan elenir. Ton çemberinde çevresiyle birlikte görüntünün yüzde birinden azını kaplayan tonlar da elenir. Kalan renklerin puanı iki bileşenden oluşur: kapladıkları alan, yüzde yetmişlik bir ağırlıkla, ve kromalarının 48 olarak tanımlanan hedef değere uzaklığı. Kütüphane varsayılan olarak dört aday döndürür; koddaki not bunun Android duvar kağıdı seçicisindeki seçenek sayısıyla eşleştiğini söyler. Uygun hiçbir renk yoksa, örneğin duvar kağıdı tamamen griyse, kütüphane sabit bir yedek renge, Google mavisi olarak adlandırdığı #4285F4'e döner.

Bu kuralların bir sonucu şaşırtıcıdır. Kütüphaneyle yapılan bir denemede, yüzde altmışı koyu gri bir arka plandan, yüzde yirmi beşi #8D5524 tonunda bir yüzden, yüzde on beşi #B0302C tonunda kırmızı bir atkıdan oluşan bir portre verildi. Gri arka plan kroması düşük olduğu için elendi. Yüzün kapladığı alan atkınınkinden büyük olduğu hâlde, ilk sırayı atkının kırmızısı aldı, çünkü kroması daha yüksekti. Yani fotoğrafın «konusu» ile arayüzün rengi aynı şey değildir: sistem en çok yer kaplayan rengi değil, alan ile canlılığın dengesini arar.

Tek bir tondan bütün palet

Kaynak renk seçildikten sonra, sistem bu rengin tonunu korur, ama açıklığını ve çoğu zaman doygunluğunu atar. Bunun nedeni, paletin kontrastının kaynak rengin açıklığına bağlı olmamasıdır.

Bir tasarım sisteminde açıklığın algıya göre düzenlenmiş bir eksenle ölçülmesinin önemini UX-01'deki ton skalalarında gördük; OKLab ve OKLCH ailesi BI-24'ün, CIELAB'ın kendisi BI-19'un konusudur. HCT aynı fikrin başka bir uygulamasıdır: bir rengin tonunu değiştirmeden açıklığını istenen basamağa taşımak mümkündür ve o basamaktaki her renk, hangi tondan gelirse gelsin, beyaza karşı aşağı yukarı aynı kontrastı verir.

Kütüphanenin tonal spot şeması bu işi sabit sayılarla yapar. Birincil palet kaynak rengin tonunu alır, ama kromasını 36'ya sabitler. İkincil palet aynı tonda 16 kromayla, üçüncül palet tonu 60 derece kaydırarak 24 kromayla kurulur; nötr paletler aynı tonda 6 ve 8 kromayla, neredeyse gri ama tamamen gri olmayan yüzeyler verir. Açık temada birincil rol bu paletin 40 açıklığındaki basamağına bağlanır.

Sonuç, hesapla kolayca görülür. UX-04'te Material'ın temel teması için beyaz etiketin #6750A4 zeminde 6,4'e bir oranla okunduğunu hesaplamıştık. Tonal spot şeması #8D5524 kaynağından #89511F birincil rengini üretir; beyaz etiketin oranı burada da aynı sayıdır. İkisi de 40 açıklığındadır. Kaynak renk ne olursa olsun, birincil butonun okunurluğu aynı kalır; tasarımcı, hiç görmediği bir duvar kağıdı için bile kontrastı önceden garanti edebilir.

Kütüphanenin bir parçası da bazı renkleri kendiliğinden düzeltir. «Dislike» adlı bileşen, koyu sarı-yeşilleri, yani tonu 90 ile 111 derece arasında, kroması 16'nın üstünde ve açıklığı 65'in altında kalan renkleri «beğenilmeyen» sayar ve açarak düzeltir. Kodun açıklaması, renk tercihi araştırmalarının koyu sarı-yeşillere karşı evrensel bir hoşnutsuzluk gösterdiğini söyler ve Palmer ve Schloss'un 2010 çalışmasını gösterir. Bu bir tasarım kararıdır ve bir araştırmaya dayanır, ama bir kütüphanenin içine yazılmış olması, kullanıcının duvar kağıdındaki bir rengin sessizce değiştirilmesi demektir.

Markanın kontrol kaybı

Kartın sorusu burada: dinamik renk marka tanınırlığını nasıl etkiler?

Birçok marka rengini tanınırlığının bir parçası olarak kullanır. Dinamik renk bu işareti iki yoldan zayıflatır. Doğrudan yol şudur: uygulama dinamik rengi kabul ederse, butonlar ve vurgular kullanıcının duvar kağıdından gelir; aynı uygulama bir telefonda mavi, ötekinde turuncu görünür. Daha ince yol ise şudur: markanın kendi rengi kaynak renk olarak verilse bile, sistem onu kendi kurallarına çeker. Kütüphaneyle yapılan bir denemede, kroması yaklaşık 102 olan canlı bir kırmızı, #E30A17, tonal spot şemasından geçince 36 kromaya indirildi ve birincil renk #904A43 gibi kiremit tonunda, kısık bir kırmızı oldu. Kütüphanenin kaynak rengin kromasını korumaya çalışan «fidelity» şeması aynı kırmızıdan #B6000E'yi üretti; bu, markanın kırmızısına çok daha yakındır.

Markaların bu çatışmaya birkaç cevabı vardır ve hiçbiri tek doğru değildir.

En basit cevap, dinamik rengi hiç kabul etmemektir: uygulama kendi sabit paletini kullanır. Tanınırlık korunur, ama uygulama cihazın geri kalanından ayrı görünür.

Ara bir çözüm, dinamik rengi yalnız nötr yüzeylerde kabul etmektir: zeminler ve kartlar kullanıcının paletinden gelir, birincil butonlar ve logo markanın rengini korur.

Daha ince bir çözüm, markanın ya da durum renklerinin sisteme doğru hafifçe uyumlanmasıdır.

Material Color Utilities bunu belirli bir sınırla yapar: sabit rengin tonu, kaynak renge olan ton farkının yarısı kadar ve en fazla on beş derece kaydırılır; kroma ve açıklık korunur. Böylece bir hata kırmızısı, turuncu bir duvar kağıdının yanında biraz daha sıcak, mavi bir duvar kağıdının yanında biraz daha soğuk olur, ama hiçbir durumda başka bir renk ailesine geçmez.

Son yol, tanınırlığı renkten başka işaretlere taşımaktır. Logo, ikon biçimi, yazı karakteri ve arayüzün kendine özgü düzeni, renk kullanıcıya bırakıldığında da markayı taşır. Bu, UX-02'de durum renkleri için yapılan uyarının marka ölçeğindeki karşılığıdır: bir bilgiyi yalnız renge yüklemek, o renk değiştiğinde bilgiyi kaybetmektir. Hangi yolun seçileceği ekibin önceliğine bağlıdır; ölçülebilir olan kısım, seçilen yolda markanın kullanıcı testlerinde hâlâ tanınıp tanınmadığıdır.

Örnek — duvar kağıdında aile fotoğrafı

Bir kullanıcı, telefonunun duvar kağıdı olarak bir aile fotoğrafı seçiyor. Fotoğrafta birkaç kişi var ve yüzler görüntünün önemli bir kısmını kaplıyor.

Kütüphaneyle yapılan hesap önce insan tenlerinin HCT tonlarının birbirine çok yakın olduğunu gösteriyor: denemede kullanılan dört ten örneğinin, #F1C7A9, #C68863, #8D5524 ve #4A2C1D, tonları 44 ile 58 derece arasında, yani turuncu bölgede kalıyor; açıklıkları ise 21'den 83'e kadar uzanıyor. Tonal spot şeması bu açıklığı atıyor: en açık ten örneği #F1C7A9 ile açıklığı onun yarısı kadar olan #8D5524, aynı birincil rengi, #89511F'yi üretiyor; #C68863 ve #4A2C1D de ona çok yakın kahverengi tonlar veriyor. Yani yüzler kaynak renk olursa, arayüz fotoğraftaki insanların tenleri açık da olsa koyu da olsa aynı sıcak kahverengiye bürünüyor ve birincil butonun kontrastı her durumda aynı kalıyor.

Bu, adil bir sonuçtur ve tasarımın kendisinden gelir: kontrast kaynak rengin açıklığına bağlı olsaydı, koyu tenli bir ailenin fotoğrafı daha koyu, belki daha az okunur bir arayüz üretebilirdi. Ama aynı hesap bir sınırı da gösteriyor. Fotoğrafta kroması yüksek küçük bir öğe varsa, örneğin çocuklardan birinin kırmızı kazağı, kaynak renk onun olabilir; kullanıcının «ailemin renkleri» diye beklediği şeyle sistemin seçtiği renk ayrışır. Bu yüzden Android, kullanıcıya duvar kağıdından çıkarılmış birkaç aday arasından seçim yapma imkânı verir. Kendi uygulamasına dinamik renk ekleyen bir ekip de, farklı tenlerden insanların yer aldığı ve farklı renkte giysiler ve arka planlar içeren bir fotoğraf setiyle kaynak renk seçimini ve ortaya çıkan temaları sınamalıdır.

Sık yapılan yanlış

Özet

1. Dinamik renk, duvar kağıdından ya da kullanıcının seçtiği bir renkten tek bir kaynak renk çıkarır; puanlama neredeyse gri renkleri ve çok küçük alanları eler, alan ile kromanın dengesine göre sıralar ve uygun renk yoksa sabit bir yedek renge döner.
2. Palet HCT uzayında kaynak rengin tonundan, önceden belirlenmiş kroma ve açıklık basamaklarıyla türetilir; açıklık doğrudan L* olduğu için kontrast kaynak renkten bağımsız olarak öngörülebilir ve aynı ton ailesindeki açık ve koyu tenlerden aynı arayüz rengi çıkar.
3. Markanın bedeli, vurgu renginin kullanıcıya geçmesi ve canlı marka renklerinin kısılmasıdır; ekipler dinamik rengi reddetmek, yalnız nötr yüzeylerde kabul etmek, kendi renklerini en fazla on beş derece uyumlamak ya da tanınırlığı renk dışı işaretlere taşımak arasında seçim yapar.

Kendini sına

1. (Kolay) Android geliştirici belgelerine göre dinamik renk hangi Android sürümüyle eklendi?
2. (Kolay) Material Color Utilities'in puanlama bileşeni uygun renk bulamazsa hangi rengi döndürür?
3. (Orta) Dinamik renk marka tanınırlığını nasıl etkiler?
4. (Orta) HCT uzayında «tone» neden doğrudan L* olarak tanımlanmıştır ve bunun arayüz için sonucu nedir?
5. (Zor) Bir portrede yüzün kapladığı alan kırmızı bir atkınınkinden büyükken, kaynak renk neden atkının kırmızısı olabilir?
6. (Zor) Açık tenli bir ailenin ve koyu tenli bir ailenin fotoğrafları duvar kağıdı olduğunda, tonal spot şeması neden aynı ya da çok yakın bir birincil renk üretir ve bu neden önemlidir?

Cevaplar

1. Android 12 («Duvar kağıdından arayüze»).
2. #4285F4; kütüphanenin Google mavisi olarak adlandırdığı yedek renk («Kaynak renk nasıl seçilir»).
3. Uygulama dinamik rengi kabul ederse vurgu renkleri kullanıcının duvar kağıdından gelir ve aynı uygulama farklı telefonlarda farklı renkte görünür; marka rengi kaynak olarak verilse bile tonal spot şeması kromasını 36'ya indirir ve canlı bir kırmızıyı #904A43 gibi kısık bir tona çeker. Markalar dinamik rengi reddedebilir, yalnız nötr yüzeylerde kabul edebilir, kendi renklerini en fazla on beş derece uyumlayabilir ya da tanınırlığı logo, biçim ve yazıya taşıyabilir («Markanın kontrol kaybı»).
4. L* algıya göre düzenlenmiş bir açıklık ölçüsüdür ve kontrastla doğrudan ilişkilidir; aynı açıklık basamağındaki renkler, tonları ne olursa olsun beyaza karşı aşağı yukarı aynı kontrastı verir. Bu yüzden tasarımcı hiç görmediği bir kaynak renk için bile birincil butonun okunurluğunu önceden garanti edebilir («Tek bir tondan bütün palet»).
5. Puanlama yalnız alana değil, kromanın hedef değere uzaklığına da bakar; kroması daha yüksek olan atkı, daha büyük ama daha az doygun yüzün önüne geçebilir. Koyu gri arka plan ise kroması 5'in altında kaldığı için baştan elenir («Kaynak renk nasıl seçilir»).
6. İnsan tenlerinin HCT tonları dar bir turuncu aralıkta toplanır ve tonal spot şeması kaynağın açıklığını atıp kromayı sabitler; #F1C7A9 ve #8D5524 aynı birincil rengi, #89511F'yi verir. Böylece arayüzün okunurluğu fotoğraftaki insanların teninin açıklığına bağlı olmaz («Örnek — duvar kağıdında aile fotoğrafı»).

Kaynaklar

• Android Developers, «Use the device colors (Dynamic Color)».
• material-foundation/material-color-utilities, proje belgesi (README).
• material-foundation/material-color-utilities, «score/score.ts», «scheme/scheme_tonal_spot», «blend/blend» ve «dislike/dislike_analyzer» kaynak dosyaları.
• @material/material-color-utilities 0.3.0 npm paketi; bu dersteki şema ve puanlama hesapları bu sürümle yapılmıştır.

Sonraki adım

UX-07, dinamik rengin tasarımcıya bıraktığı belirsizliği bir tasarım ilkesine çeviriyor: kullanıcının hangi renkleri göreceğini bilmediğimiz, üstelik bazı kullanıcıların kırmızı ile yeşili ayıramadığı bir dünyada, hatalı bir form alanını renk dışında nasıl işaretleyeceğimizi soruyor. UX-08 ise bu tür kararların nasıl sınanacağına geçiyor: otomatik kontrast denetleyicilerinin ve görme simülatörlerinin neyi yakaladığını, neyi kaçırdığını ve yaşlı ve az gören kullanıcılarla yapılan testlerin neden yerine konamayacağını ele alıyor.