Dinamik ve yapılandırılabilir bir renk şemasının nasıl oluşturulacağına dair temel bilgiler
Bu yayında, CSS'de birden fazla renk şemasını yönetmenin yolları hakkındaki düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
Özel özellikler ve calc() ile erişilebilir bir renk sistemi oluşturarak, içerik oluşturma deneyimini en aza indirirken kullanıcı tercihlerine uyum sağlayan bir web sayfası oluşturacağız. Temel bir marka rengiyle başlar ve bu renkten 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge içeren bir varyant sistemi oluştururuz.
Bu kılavuzda, her renk şemasının tüm renkleri önceden tanımlanır. Sayfanın en sonuna kadar sayfayı değiştirmek için kullanılmazlar.
Marka
Marka rengi genellikle önceden belirlenir ve hex veya rgb olarak yayınlanır. Bu GUI Challenge'ın temel marka rengi #0af'tür. Öncelikle, bu renk sistemi için onaltılık değerin hsl olarak dönüştürülmesi gerekir.
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
Marka rengini %20 oranında koyulaştırmak veya açmak için hsl renk değerinin 3 kanalının kendi özel özelliklerine ayıklanması gerekir. Bu işlem şöyle yapılır:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS, bu renk özellikleri üzerinde matematiksel işlemler yapabilir. Örneğin, açıklık değerini %20 azaltmak için calc(var(--brand-lightness) -
20%) kullanılabilir. CSS, hsl doygunluk ve açıklık miktarlarını ayarlayarak tüm renkleri aynı ton ailesinde tutabileceğinden bu, renk şeması oluşturmanın temelini oluşturur.
Açık tema
Her renk varyantı, eşleşen şemasıyla işaretlenir. Bu durumda her birine -light eklenir.
Marka
Marka renginden başlayarak, --brand-hue, --brand-saturation ve --brand-lightness özel özelliklerin herhangi bir hesaplama olmadan hsl () işlev parantezinin içine sarmalanmasıyla yeniden oluşturulur:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Metin renkleri
Ardından, renk şeması için gerekli olan temel öğeler metin renklerine ihtiyaç duyuyor. Açık temalarda metin çok koyu olmalıdır. Aşağıdaki renklerin açıklık oranının %50'nin çok altında olduğunu fark edin.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light, %10 açıklıkta çok koyu olduğundan %100'lük yoğun doygunluğu korur. Böylece marka rengi, koyu lacivertte de görünmeye devam edebilir.
--text2-light, ikinci renk kadar koyu değil. İkinci renk olduğu kadar iyi ve aynı zamanda daha az doygunluğuna sahip.
Yüzey renkleri
Yüzey renkleri, metnin üzerine veya içine yerleştirildiği arka planlar, kenarlıklar ve diğer dekoratif yüzeylerdir. Açık temada, koyu olan metin renklerinin aksine açık renkler kullanılır. hsl ile açık renkler oluşturmak için üçüncü açıklık değeri değerinde daha yüksek yüzde değerleri kullanacağız. Ayrıca, açık grilerin çok renkli görünmemesi için doygunluğu da düşürürüz.
* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}
Dekoratif renklerin :focus veya :hover gibi etkileşimli anlar için ya da kağıt katmanlarının görünümünü oluşturmak için daha fazla varyant gerektirmesi nedeniyle 4 yüzey rengi oluşturuldu. Bu senaryolarda, fareyle üzerine gelindiğinde --surface2-light yerine --surface3-light'ün gösterilmesi iyi bir fikirdir. Böylece, fareyle üzerine gelindiğinde kontrast artar (%99 açıklıktan %92 açıklığa geçerek daha koyu olur).
Gölgeler
Renk şemasında gölgeler çok önemlidir ancak efekte gerçekçi bir görünüm kazandırır ve gerçekçi olmayan siyah gölgelerden öne çıkmasını sağlar. Bunu yapmak için gölgenin rengi, ton özel özelliğini kullanır. Bu renk, tonla biraz doygunlaştırılır ancak yine de çok koyu olur. Aslında çok karanlık ve hafif mavi bir gölge oluşturuyoruz.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light, bir hsl işlevi içinde sarmalanmamış. Bunun nedeni, --shadow-strength değerinin bir miktar opaklık oluşturmak için birleştirilmesi ve CSS'nin hesaplama yapmak için parçalara ihtiyacı olmasıdır. Daha fazla bilgi edinmek için Rad gölgesi bölümüne geçin.
Tüm açık renkler
Açık renklerin nasıl oluşturulduğunu bulmak için etrafta arama yapmanıza gerek yoktur. Hepsi CSS'de tek bir yerdedir.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}
Koyu tema
Çoğu marka koyu temayla başlamaz. Bu tema, genellikle daha açık renkli birincil temanın varyantıdır. Öte yandan kullanıcılar genellikle gece gibi farklı bağlamlar için koyu tema seçer. Bu faktörler, koyu temalar söz konusu olduğunda iki noktayı göz önünde bulundurmama neden oldu:
- Kullanıcılar bu temayı kullanırken genellikle karanlıkta olacaktır. Bu nedenle, karanlıkta test yapın.
- Renkler, aşırı yoğun oldukları için ekranda titreşim oluşturmayacak şekilde dezenfekte edilmelidir.
Marka
Açık tema, 3 marka hsl renk kanalı değerini değişiklik yapmadan kullanırken koyu tema bunu yapmaz. Doygunluk yarı yarıya, açıklık ise göreceli olarak %50 azaltılır.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Metin renkleri
Koyu temada metin renkleri açık olmalıdır. Aşağıdaki renklerin açıklık değerleri yüksek olduğundan bu renkler beyaza daha yakındır.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
Yüzey renkleri
Koyu temada yüzey renkleri koyu olmalıdır. Aşağıdaki renklerin açıklığı ve doygunluğu düşüktür. İlk yüzey %10 ile en koyu olanıdır.
* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}
Gölgeler
Koyu temada gölgelerin görülmesi çok zor olabilir. Oldukça karanlık bir şeyi karartmak
zor olduğundan mantıklı görünüyor. Bir değişkeni değiştirerek gölgeleri karartmamıza olanak tanıyan --shadow-strength-dark özelliği tam da bu noktada çok işe yarar.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Ayrıca, gölgede ne kadar doygunluk olduğuna bakın. Arayüze baktığınızda rengi fark edebiliyor musunuz? Doygunluğu devtools'den kaldırmayı deneyin. Hangisini tercih edersiniz?
Koyu renklerin tümü
* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Tema parlaklığını azaltma
Bu renk şeması, açıklığı ve doygunluğu düzenlemekle ilgilidir. Tonu görünür kılacak kadar doygunluk olmalı ancak yine de loş ve düşük kontrastlı olması gerektiği için kontrast puanlarını zar zor geçmelidir.
Marka
* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}
Metin renkleri
* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}
Yüzey renkleri
* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}
Gölgeler
* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Renkleri bir arada karartma
* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Erişilebilir renkler
Koyu metin renk grubundaki en düşük açıklığın %65, koyu yüzeylerdeki en yüksek açıklığın ise %25 olduğunu unutmayın. Bu, aralarındaki boşluğun %40'ı kadardır. Açık temada, açık temada% 55 oranında nefes alma alanı bulunur. Metin ve yüzey renkleri arasındaki açıklık farklılıklarını yaklaşık %40-50'de tutmak, renk kontrastı oranlarının yüksek tutulmasına yardımcı olur. Ayrıca, puanlar düşük olduğunda ayarlama yapmak için hassas bir kontrol mekanizması olarak kullanılabilir.
Buna "geçene kadar artır" adını veriyorum. Bu, bir araç geçmemi gösterene kadar açıklık değerini artırma işlemidir.
Bu yarışmada oluşturulan temaların her biri kontrast puanlarını geçer. Loş renk şeması, bunların arasında en düşük kontrasta sahiptir ancak minimum koşulları karşılar. Ekipteki diğer kişilerin iyi zıt renkler kullanmasına yardımcı olmak için bir yüzey rengini erişilebilir bir metin rengiyle eşleştiren bir sınıf adı oluşturmak iyi bir fikirdir.
.surface1 {
background-color: var(--surface1);
color: var(--text2);
}
.surface2 {
background-color: var(--surface2);
color: var(--text2);
}
.surface3 {
background-color: var(--surface3);
color: var(--text1);
}
.surface4 {
background-color: var(--surface4);
color: var(--text1);
}
Kırmızı Gölge
Temalar, .rad-shadow adlı bir yardımcı program sınıfı kullanır. Bu gölge, çok faydalı bulduğum Smooth Shadow aracında oluşturuldu. Oluşturulan snippet'i kendi renklerim ve opaklık hesaplamalarıyla özelleştirdim. Bunun nedeni, her renk şemasında ayarlayabileceğim bir gölge oluşturmaktı.
Bunu yapmak için her renk şeması için ayarlanabilecek 2 değişken (gölge rengi ve gölge gücü) oluşturdum. Renk, doygunluk ve koyuluk ayarlamaları içindir. Güç ise koyu renk şeması olduğunda gölge yoğunluğunu kolayca artırmanın bir yoludur. Sonuç şu şekilde oldu.
:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}
Renk şemasında gölgelerle daha da ileri gitmek isteseydim gölge açılarını da sabit bir tasarım jetonu yapardım. Çünkü tasarımın tüm gölgelerinde ışık yönü aynı olmalıdır.
Renk şemalarını kullanma
Renklerin önceden tanımlanması tamamlandığında, bunları şemaya duyarlı olmayan özelliklere dönüştürme zamanı gelir. Yani, bu renk şeması projesindeki bir CSS yazarı olarak, belirli bir renk şemasının değerine nadiren erişmeniz gerekir. Temaya sadık kalmayı kolaylaştırmak istiyorum.
Bunu yapmak için renk şemasının kullanımı, birazdan tanımlayacağımız genel özel mülkler aracılığıyla yapılmalıdır. Bu sayede, tasarım değişkenlerini kullananların şu anda hangi renk şemasının ayarlandığı konusunda endişelenmesi gerekmez. Yalnızca yüzey ve metin renklerini kullanması yeterlidir. color: var(--text1-light) yerine color: var(--text1) kullanın. Renklerin tüm uyarlamaları ve döndürülmesi CSS'de çok daha üst düzeyde yapılır.
Aşağıdaki kod bloğunda açık temanın bağlantı stilleri, genel bir özel mülkü açık temaya özel renkle bağlar. Artık var(--brand)'ün tüm kullanımlarında açık marka rengi kullanılacak.
Açık tema (otomatik)
:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Site artık açık temayı kullanıyor. Bu çok eğlenceli ve başarılı bir an. Önceden tanımlanmış renklerimizi diğer renk şeması bağlamlarında kullanırken bu anlardan birkaçına daha bakalım.
Koyu tema (otomatik)
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}
Açık tema
[color-scheme="light"] {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Koyu tema
[color-scheme="dark"] {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
Tema parlaklığını azaltma
[color-scheme="dim"] {
color-scheme: dark;
--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}
Bu noktada yazarlar, sağlanan renk şeması genellerini gerektiği gibi kullanabilir ve temalarla ilgili endişelenmelerine gerek kalmaz.
Sonuç
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de uygulama geliştirmenin tüm yollarını öğrenelim. Codepen'i oluşturun ya da kendi demonuzu yayınlayın ve tweet'inizi gönderin. Bu demoyu aşağıdaki Topluluk remiksleri bölümüne eklerim.
Kaynak
Topluluk remiksleri: @chris-kruining, no-preference, more ve less için ton kaydırma çubuğu, durum renkleri ve kontrast modları ekledi: demo.