Dinamik ve yapılandırılabilir bir renk şemasının nasıl oluşturulacağına ilişkin temel bir genel bakış
Bu gönderide, birden çok renk şemasını yönetmenin yolları üzerine düşündüğüm bir şeyi paylaşmak istiyorum kullanabilirsiniz. Demoyu deneyin.
Videoyu tercih ediyorsanız bu yayının YouTube sürümünü burada bulabilirsiniz:
Genel Bakış
Özel özellikler ve calc() ile erişilebilir bir renk sistemi oluşturacağız.
kullanıcı tercihlerine uygun bir web sayfası oluşturmak ve bunu yaparken
deneyimlemenizi sağlar. 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 sonunda değişiklik yapmak için kullanılmazlar.
Marka
Çoğu zaman, bir marka rengi önceden oluşturulur ve
hex veya
rgb. Bu GUI Yarışması
#0af bir temel marka rengine sahip. Ö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 koyulaştırma veya renklendirme gibi bir kavram oluşturmak için %20 oranında, hsl renk değerinin 3 kanalının kendi özel özelliklerini girin:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS, bu renk özelliklerini matematikle işlem yapabilir. Örneğin, calc(var(--brand-lightness) -
20%) ile açıklık değerini %20 oranında azaltabilir. 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 bir renk varyantı, eşleşme şemasıyla işaretlenir (bu örnekte, her bir renk varyantı)
sonuna -light eklendi.
Marka
Marka renginden başlayarak --brand-hue, --brand-saturation sarmalanarak yeniden oluşturulur
ve hsl () işlev parantezi içinde --brand-lightness özel özellik,
hesaplama yapmadan devam edin:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Metin renkleri
Ardından, renk şeması için gerekli temel öğeler metin renklerine ihtiyaç duyar. Açık temalarda metin çok koyu olmalıdır. Aşağıdaki renklerin açıklığının düşük olduğuna dikkat edin. %50'nin altında.
* {
--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ğundan yoğun %100'ü
renk doygunluğunu vurgulamanızı öneririz.
--text2-light, 1. renk kadar koyu değil. İkincil bir renk olduğu için bu iyi bir şeydir ve doygunluğu da çok daha düşüktür.
Yüzey renkleri
Yüzey renkleri, arka plan, kenarlık ve diğer dekoratif yüzeylerin bir metin girin. Açık temada, koyu olan metin renklerinin aksine açık renkler kullanılır. HDS ile açık renkler oluşturmak için üçüncü hafiflik değerinde daha yüksek yüzde değerleri kullanırı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 hale gelir).
Gölgeler
Renk şemasında tonlar, sınırların ötesindedir ancak bu görsele gerçekçi bir doğa katar. gölgelerin gerçekçi olmayan siyah gölgelerinin arasından ayrılmasına yardımcı olur. Yapılacaklar gölgenin rengi için ton özel özelliği kullanılır, tona doymuş ama yine de çok koyu. 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ğeri, şeffaflık oluşturmak ve CSS gereksinimleri oluşturmak için birleştirilecek
parçalara ayırmak isteyebilirsiniz. Daha fazla bilgi edinmek için radyal gölge bölümüne atlayın.
Açık renkler bir arada
Işık renklerinin nasıl oluşturulduğunu bulmak için etrafta uğraşmanıza gerek yok, tek bir yerden kontrol edebilirsiniz.
* {
--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. Koyu tema, birincil, daha açık renklidir. Öte yandan kullanıcılar ekranlarında genellikle gibi farklı bağlamları vardır. 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ık bir ortamda olur. Bu nedenle, testi karanlık bir ortamda yapın.
- Renkler, ekranın titremesini engelleyebileceğinden arttırır.
Marka
Açık tema, 3 marka hsl renk kanalı değerini değişiklik yapmadan kullanırken koyu tema bunu yapmaz. Doygunluk yarıya düşürüldü, hafiflik azaldı %50 olduğunu varsayalım.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Metin renkleri
Koyu temalarda 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 renklerde düşük ışık ve doygunluk. 1. yüzey en koyu %10 ile.
* {
--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ölgelerin görülmesi çok zor olabilir. Yapması zor olduğu için
zaten karanlık olan bir şeyi koyulaştırır. Bu noktada --shadow-strength-dark, tek bir değişkeni değiştirerek gölgeleri koyulaştırmamıza olanak tanıdığı için çok kullanışlıdır.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Ayrıca, gölgedeki doygunluk miktarına da 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, nefes darlığının% 55'i kadar açık tema. Metin ve yüzey renkleri arasındaki açıklık farklarını koruma yaklaşık% 40-50 kullanmak renk kontrastı oranlarını yüksek tutmaya yardımcı olur. düşük olduğunda düzeltilmesi gereken küçük bir araçtır.
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 gereksinimleri 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);
}
Rad Shadow
Temalarda .rad-shadow adlı bir yardımcı program sınıfı kullanılır. Bu gölge, çok faydalı bulduğum Smooth Shadow aracında oluşturuldu. Oluşturulan snippet'i kendi renklerimle özelleştirdim ve
opaklık hesaplamalarını kullanabilirsiniz. Bunun nedeni, her renk şemasında ayarlayabileceğim bir gölge oluşturmaktı.
Bunu başarabilmek amacıyla, düzenlenecek her bir renk şeması için 2 değişken oluşturdum. gölge rengi ve gölge gücü. 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ığına göre, artık bunları şemadan bağımsız özelliklerdir. Bir CSS olarak, bir yazara ihtiyacınız yoksa belirli bir renk şemasının değerini belirtin. Temanın içinde kalmayı kolaylaştırmak istiyorum.
Bunu başarmak için, renk şeması özel olarak
genel özel özelliklerdir. Bunlar birazdan tanımlanacaktır. Bu şekilde ekip
tasarım değişkenlerini kullanan kişilerin, hangi renk şemasının
yalnızca yüzey ve metin renklerini kullanmaları gerekir. color: var(--text1-light) yerine color: var(--text1) kullanın. Renklerin tüm uyarlanması 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. Şimdi tümü
var(--brand) kullanımı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);
}
Sitede şu anda açık tema kullanılıyor. Bu çok eğlenceli ve başarılı bir an! Başka reklam öğelerinde önceden tanımlanmış renklerimizi kullandığımızda, göz önünde bulundurun.
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ı genel öğelerini ve temalarla bir daha asla ilgilenmemesi gerekir.
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. Bir Codepen oluşturun ya da kendi demonuzu yayınlayın, bana tweet'le gönderin, bunu Topluluk remiksleri bölümünü aşağıda bulabilirsiniz.
Kaynak
Topluluk remiksleri: @chris-kruining, no-preference, more ve less için ton kaydırma çubuğu, durum renkleri ve kontrast modları ekledi: demo.