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.
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
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şlayıp
varyantları: 2 metin rengi, 4 yüzey rengi ve eşleşen bir gölge.
Bu kılavuz, yukarı doğru her bir renk şeması için tüm renkleri tanımlamakla başlar . 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. İlk olarak, bu renk sisteminde onaltılık değer
şuna dönüştürülmesi gerekiyor:
hsl ile değiştirin.
* {
--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. Bu temel bir proje planı oluşturmak
renk şemasını ayarlayarak tüm renkleri aynı ton ailesinde tutabileceğinden
hsl doygunluğu ve hafiflik miktarlarını dikkate alın.
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 temada, metin çok karanlık 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
ilk renk kadar koyu değil. Çok iyi.
hem de çok daha az doygunluğunu artırır.
Yüzey renkleri
Yüzey renkleri, arka plan, kenarlık ve diğer dekoratif yüzeylerin bir metin girin. Açık temada bunlar açık renklerdir koyu renkli metin renklerinin aksine. 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 doygunluğunu artırır, böylece açık griler çok tonlamaz.
* {
--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 renklere daha fazla ihtiyaç duyulduğu için 4 yüzey rengi oluşturuldu
varyantlarını, :focus
veya :hover
gibi etkileşimli anlar için ya da
kağıt katmanlarının görünümü. Böyle durumlarda, ara hedeflerde
--surface3-light
üzerine gelindiğinde --surface2-light
. Böylece, imleçle üzerine gelindiğinde
kontrast artışı (%99 açıklığa, %92 açıklığa; daha koyu hale getirir).
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. Esasen, zaman çizelgesine uygun şekilde biraz mavi gölgeyle kaplıdır.
* {
--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. Rad gölgesine atlayın
bölümünü inceleyebilirsiniz.
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;
}
![ışık renklerinin hepsinin ekran görüntüsü](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-light-col-72f65fca6bd79.png?authuser=9&hl=tr)
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, iki paydaşı şu noktalara dikkat edin:
- Kullanıcılar bu temayı kullanırken genellikle karanlıkta olacaktır. Bu nedenle, koyu.
- Renkler, ekranın titremesini engelleyebileceğinden arttırır.
Marka
Açık tema, değiştirilmeden 3 marka Hsl renk kanalı değerini kullandı. koyu temanın etkisi yoktur. 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 bir temada metin renkleri açık olmalıdır. Aşağıdaki renkler yüksek bunları beyaza biraz daha yaklaştırın.
* {
--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 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. Burası,
--shadow-strength-dark
, çok kullanışlı bir özellik olduğu için
gölgelendirir.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Ayrıca, gölgede ne kadar doygunluk olduğuna bakın. Rengi fark edebiliyor musunuz? nasıl gösterirsiniz? geliştirici araçlarından hangisinde
Koyu renkler bir arada
* {
--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;
}
![koyu renklerin ekran görüntüsü](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dark-colo-2883f3f94a6ae.png?authuser=9&hl=tr)
Temayı karart
Bu renk şeması, açıklığı ve doygunluğu düzenlemekle ilgilidir. Orada için yeterli doygunluk bulunmalıdır. Ancak, kontrast puanlarını neredeyse geçmiyor. her durumda loş ve düşük kontrastlı olması amaçlanıyor.
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 hep loş
* {
--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;
}
![karartılan renklerin ekran görüntüsü](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dim-color-acb7bb759c10b.png?authuser=9&hl=tr)
Erişilebilir renkler
Koyu metin rengi ayarında en düşük ışığın% 65 ve koyu yüzeylerde en yüksek açıklık %25'tir. Bu, ışığın% 40'ıdır rahatlık sağlar. 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.
Ben buna "bump tomp til ya Pass" (Ya geçene kadar dokundurma) adını veriyorum. hafiflik değerine ayarlanır.
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);
}
![Loş yüzey ve metin eşlemelerinin ekran görüntüsü](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dim-surfa-930653f4c9223.png?authuser=9&hl=tr)
Kırmızı Gölge
Temalar, .rad-shadow
adlı bir yardımcı program sınıfı kullanır. Bu gölge oluşturuldu
Smooth Shadow aracımız için teşekkürler.
çok önemsiyor. Oluşturulan snippet'i kendi renklerimle özelleştirdim ve
opaklık hesaplamalarını kullanabilirsiniz. Bunun nedeni, her yerden düzenleyebileceğim bir gölge
her bir renk şeması içinde yer alır.
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 içindir ayarlamanın gücü de gölgeyi artırmanın kolay bir yoludur. renk tonlarını kullanır. Nihai sonuç şuna benzerdi.
: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 daha fazla ilerlemeye devam edecek olsaydım gölgeyi ışık yönünün aynı olması gerektiğinden, tasarım jetonunun sabit açılarını da gölgeleri arasına koyalım.
Renk şemalarının kullanımı
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. Bu konuyu birazdan tanımlayacağız. 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. Şunun yerine:
color: var(--text1-light)
, color: var(--text1)
kullanıyor. Tüm adaptasyon ve özetleme
çok daha yüksek düzeyde yapılır.
Aşağıdaki kod bloğunda açık temanın bağlantı stilleri
açık temaya özgü renk içeren genel bir özel özellik bağlayabilirsiniz. Ş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);
}
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ı genel öğelerini ve temalarla bir daha asla ilgilenmemesi gerekir.
Sonuç
Şimdi bunu nasıl yaptığımı biliyorsun, şimdi nasıl yaparsın? 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim. Bir Codepen oluşturun ya da kendi demonuzu yayınlayın, tweet'le bize gönderin, ben de bunu Topluluk remiksleri bölümünü aşağıda bulabilirsiniz.
Kaynak
Topluluk remiksleri
- @chris-kruining bir ton kaydırma çubuğu ekledi,
no-preference
, more
ve less
için durum renkleri ve kontrast modları:
demo.