Dinamik ve yapılandırılabilir bir renk şeması oluşturmaya dair temel bilgiler
Bu yayında, CSS'de birden çok renk şemasını yönetmenin yollarıyla ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel bakış
Kullanıcı tercihlerine uyum sağlayan ve yazma deneyimini en aza indiren bir web sayfası yapmak için özel özellikler ve calc()
ile erişilebilir bir renk sistemi oluşturacağız. Temel marka rengiyle başlıyor ve bundan varyanlar sistemi oluşturuyoruz: 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge.
Bu kılavuz, her bir renk şeması için tüm renklerin önceden tanımlanmasıyla başlar. Sonuna kadar sayfayı değiştirmek için kullanılmazlar.
Marka
Genellikle, belirli bir marka rengi onaltılık veya rgb olarak yayınlanır. Bu GUI Meydan Okuması'nın temel marka rengi #0af
. İlk olarak, bu renk sistemi için onaltılık değerin hsl'ye dönüştürülmesi gerekir.
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
Marka renginin daha koyu veya daha açık hale getirilmesi gibi bir kavramın gerçekleştirilmesi için, hsl renk değerinin 3 kanalının aşağıdaki gibi kendi özel özelliklerine çıkarılması gerekir:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS, bu renk özelliklerinde matematik işlemleri yapabilir. Örneğin, açıklık değerini %20 azaltmak için calc(var(--brand-lightness) -
20%)
. CSS, SSL doygunluğu ve açıklık miktarlarını ayarlayarak tüm renkleri aynı ton ailesinde tutabildiğinden, bu yöntem bir renk şeması oluşturmanın temelini oluşturur.
Açık tema
Her bir renk varyantı, eşleşme düzeniyle işaretlenir. Bu örnekte, her bir renk varyantının sonuna -light
eklenir.
Marka
Marka renginden başlayarak, herhangi bir hesaplama yapılmadan hsl ()
işlev parantezi içine --brand-hue
, --brand-saturation
ve --brand-lightness
özel özellik sarmalanarak yeniden oluşturulur:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Metin renkleri
Şimdi de bir renk şemasının olmazsa olmazları metin renklerine ihtiyaç duyar. Açık temada metin çok koyu renkte olmalıdır. Aşağıdaki renklerin açıklığının düşük, %50'nin çok altında olduğuna dikkat edin.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light
, %10 ışıkta çok koyu olduğu için yoğun %100 doygunluğu korur. Böylece marka rengi, koyu ve koyu lacivert renk arasında görünmeye devam edebilir.
--text2-light
, birinci renk kadar koyu değil. Bu, ikincil bir renk olduğu kadar iyi ve çok daha az doymuş.
Yüzey renkleri
Yüzey renkleri, metnin üzerinde veya içinde yer aldığı arka planlar, kenarlıklar ve diğer dekoratif yüzeylerdir. Açık temada bu renkler, koyu renk olan metin renklerinin aksine açık renklerdir. Hsl ile açık renkler oluşturmak için üçüncü açıklık değerinde daha yüksek yüzde değerleri kullanırız. Açık grilerin çok tonlu görünmemesi için doygunluğu da azaltacağı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 renkler, :focus
ya da :hover
gibi etkileşimli anlar için veya kağıt katmanları görünümü oluşturmak amacıyla daha fazla varyanta ihtiyaç
duyduğundan, 4 yüzey rengi oluşturuldu. Bu senaryolarda, fareyle --surface2-light
fareyle --surface3-light
öğesinin üzerine gelindiğinde geçiş yapmak güzeldir. Dolayısıyla fareyle üzerine gelindiğinde kontrast artışı (%99 açıklık ile% 92 arasında açıklık; renk daha koyu hale gelir) sonuçlanır.
Gölgeler
Bir renk şemasındaki gölgeler çok daha üst düzeylerdedir ancak efekte gerçekçi bir doğa katar ve gerçekçi olmayan siyahi gölgeler arasından sıyrılmasına yardımcı olur. Bunu yapmak için gölgenin rengi, ton özel özelliğini kullanır. Bu özellik, tonla biraz doygun olup yine de çok koyu olur. Temelde çok koyu ve hafif mavi bir gölge oluşturur.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light
, bir hsl işlevi içine sarmalanmamış. Bunun nedeni, --shadow-strength
değerinin bir miktar opaklık oluşturmak için birleştirilmesi ve CSS'nin hesaplamaları yapmak için parçalara ihtiyacı olmasıdır. Daha fazla bilgi edinmek için rad gölgesi bölümüne geçin.
Açık renkler bir arada
Tüm açık renklerden nasıl yapıldığını öğrenmek için çok uğraşmanıza gerek yok. Hepsi CSS'de tek bir yerde.
* {
--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 bir temayla başlamaz. Bu tema birincil, genellikle daha açık temanın bir varyasyonudur. Öte yandan kullanıcılar, geceleri gibi farklı bağlamlar için genellikle koyu bir tema seçer. Bu faktörler beni koyu temalarla iki hususu göz önünde bulundurmaya yöneltti:
- Kullanıcılar bu temayı kullanırken genellikle karanlıkta kalırlar. Bu nedenle, testi karanlıkta test edin.
- Renkler, aşırı yoğun olduğu için ekranda titremeyecek şekilde soluklaşmalıdır.
Marka
Açık tema, 3 marka HDS renk kanalı değerini değiştirmeden kullandı, ancak koyu tema kullanmıyordu. Doygunluk yarıya iner ve ışık göreceli olarak %50 azalır.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Metin renkleri
Koyu bir temada metin renkleri açık olmalıdır. Aşağıdaki renkler, açıklık için yüksek değerlere sahiptir ve bu değerleri beyaza daha yakın hale getirir.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
Yüzey renkleri
Koyu bir temada yüzey renkleri koyu olmalıdır. Aşağıdaki renkler düşük açıklığa ve doygunluğa sahiptir. 1. yüzey en koyu %10 ile en koyu renktir.
* {
--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 bir temada gölgeleri görmek çok zor olabilir. Zaten oldukça karanlık olan bir şeyi
koyulaştırmak zor olduğu için bu mantıklı. --shadow-strength-dark
, bir değişkeni değiştirerek gölgeleri koyulaştırmamızı sağladığı için bu noktada çok kullanışlıdır.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Ayrıca, söz konusu gölgenin doygunluğuna bakın. Arayüze bakarken rengi fark edebiliyor musunuz? Geliştirici araçlarından doygunluğu kaldırmayı deneyin. Hangisini tercih edersiniz?
Koyu renklerin hepsi
* {
--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;
}
Temayı karart
Bu renk şeması tamamen açıklık ve doygunluğu ayarlamaya yöneliktir. Bir tonun görünür olması için yeterli doygunluk mevcut olmalıdır ancak yine de loş ve düşük kontrasta sahip olması amaçlandığı için kontrast puanlarını neredeyse geçemez.
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 soluklaştır
* {
--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 rengi grubundaki en düşük ışığın% 65 ve en yüksek ışığın %25 olduğuna dikkat edin. Bu, aralarında% 40'lık bir nefes payı bırakır. Açık temada, açık temada% 55 oranında nefes alan olur. Metin ve yüzey renkleri arasındaki ışık farklarını yaklaşık% 40-50 düzeyinde tutmak, renk kontrastı oranlarını yüksek tutmaya ve skorların düşük olduğu durumlarda da ince ayar yapmaya yardımcı olabilir.
Buna "geçene kadar çarpma" adını veriyorum. Bu, bir araç geçtiğimi gösterene kadar açıklık değerini çarpma etkileşimi.
Bu yarışmada oluşturulan temaların her biri, kontrast puanlarını geçer. Soluk renk şeması, en düşük kontrasta sahiptir ancak yine de minimum gereksinimleri karşılar. Ekipteki diğer kişilerin zıt renklerle iyi zıt renkler kullanmaları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);
}
Rad Gölgesi
Temalar, .rad-shadow
adlı bir yardımcı sınıf kullanıyor. Bu gölge, Smooth Shadow aracında oluşturulmuş bu gölge için çok memnunum. Oluşturulan snippet'i alıp kendi renklerim ve opaklık hesaplamalarımla özelleştirdim. Bunun nedeni, her renk şemasında
ayarlayabileceğim bir gölge oluşturmaktı.
Bunu başarabilmek amacıyla, ayarlanacak her bir renk şeması için bir gölge rengi ve bir gölge gücü olmak üzere 2 değişken oluşturdum. Renk, doygunluk ve koyuluk ayarları içindir; güç ise koyu bir renk şemasında gölge yoğunluğunu artırmanın kolay bir yoludur. Sonuç böyle bir şeydi.
: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 şemamda gölgelerle ilerlemek istersem, ışığın yönü tasarımın tüm gölgeleri arasında aynı olması gerektiğinden gölge açılarını da tasarım jetonu sabit yapardım.
Renk şemalarını kullanma
Renklerin önceden tanımlanmasını tamamladıktan sonra sıra bunları şemadan bağımsız özelliklere dönüştürmeye geliyor. Demek istediğim, bu renk şeması projesindeki bir CSS yazarı olarak, belirli bir renk şemasının değerine nadiren erişmeniz gerekir. Temanın dışına çıkmamayı kolaylaştırmak istiyorum.
Bunu başarmak için renk şemasının kullanımı, özel olarak, birazdan tanımlayacağımız genel özel özellikler üzerinden yapılmalıdır. Bu sayede, tasarım değişkenlerini kullanan kişilerin o anda hangi renk şemasının ayarlandığı konusunda endişelenmelerine gerek kalmaz; sadece yüzey ve metin renklerini kullanmaları gerekir. color: var(--text1-light)
yerine color: var(--text1)
kullanın. Renklerin tüm uyarlanması ve özetlenmesi
CSS'de çok daha yüksek bir düzeyde yapılır.
Açık temanın bağlantı stilleri aşağıdaki kod bloğunda anlatılacak. Genel bir özel özelliği, açık temaya özgü renkle ilişkilendirin. Artık tüm var(--brand)
kullanımlarında açık marka rengi kullanılacaktır.
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);
}
Sitede artık açık tema kullanılıyor. Çok eğlenceli ve başarılı bir andı. Önceden tanımlı renklerimizi diğer renk şeması bağlamlarında kullanırken bu anlardan birkaçını daha inceleyelim.
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);
}
Temayı karart
[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ğinde kullanabilir ve bir daha temalar için endişelenmelerine gerek kalmaz.
Sonuç
Nasıl yaptığımı artık bildiğine göre sen ne yaparsın? 🙂
Yaklaşımlarımızı çeşitlendirelim ve web'de geliştirme yapmanın tüm yollarını öğrenelim. Codepen oluşturun veya kendi demonuzu yayınlayın, bana tweet gönderin. Bu kodu aşağıdaki Topluluk remiksleri bölümüne ekleyeceğim.
Kaynak
Topluluk remiksleri
- @chris-kruining; no-preference
, more
ve less
için ton kaydırma çubuğu, durum renkleri ve kontrast modları ekledi:
demo.