Renk şeması oluşturma

Dinamik ve yapılandırılabilir bir renk şemasının nasıl oluşturulacağına ilişkin temel bir genel bakış

Adam Argyle

Bu gönderide, birden çok renk şemasını yönetmenin yolları üzerine düşündüğüm bir şeyi paylaşmak istiyorum kullanabilirsiniz. Demoyu deneyin.

Demo

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.

açık tema son sonuçlarının önizlemesi

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ü
CodePen'de Korumalı Alan

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:

  1. Kullanıcılar bu temayı kullanırken genellikle karanlıkta olacaktır. Bu nedenle, koyu.
  2. Renkler, ekranın titremesini engelleyebileceğinden arttırır.

koyu temanın nihai sonucunun önizlemesi

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ü
CodePen'de Korumalı Alan

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.

loş temadan nihai sonuçların önizlemesi

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ü
CodePen'de Korumalı Alan

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.

Geçilene kadar ışığı azaltmak ve kontrastı artırmak için üst karakter + aşağı ok tuşlarına basın

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ü
VisBug ile loş yüzey ve metin eşlemelerinin ekran görüntüsü

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.

yan yana her gölge

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.