Renk şeması oluşturma

Dinamik ve yapılandırılabilir bir renk şeması oluşturma hakkında temel bilgiler

Adam Argyle

Bu yayında, CSS'de birden fazla renk şemasını yönetme yöntemleriyle ilgili düşüncelerimi paylaşmak istiyorum. Demoyu deneyin.

Demo

Video tercih ediyorsanız bu yayının YouTube versiyonunu aşağıda bulabilirsiniz:

Genel Bakış

Yazma deneyimini en aza indirirken kullanıcı tercihlerine uyum sağlayan bir web sayfası oluşturmak için özel özellikler ve calc() ile erişilebilir bir renk sistemi oluşturacağız. Temel bir marka rengiyle başlayıp bu renkten varyantlar oluştururuz: 2 metin rengi, 4 yüzey rengi ve bunlarla uyumlu bir gölge.

Bu kılavuz, her renk şeması için tüm renkleri önceden tanımlayarak başlar. Sayfayı değiştirmek için en sona kadar kullanılmazlar.

Marka

Genellikle bir marka rengi belirlenmiş ve onaltılık veya rgb olarak sağlanmıştır. Bu GUI Challenge'ın temel marka rengi #0af. Öncelikle 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 rengini %20 gibi bir oranda koyulaştırma veya açıklaştırma kavramını etkinleştirmek 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 özellikleriyle ilgili matematiksel işlemler yapabilir. Örneğin, calc(var(--brand-lightness) - 20%) ile parlaklık değerini %20 azaltabilirsiniz. CSS, hsl doygunluk ve parlaklık miktarlarını ayarlayarak tüm renkleri aynı renk tonu ailesinde tutabildiğinden bu, renk şeması oluşturmanın temelini oluşturur.

Açık tema

Her renk varyantı, eşleşen şemasıyla işaretlenir. Bu örnekte her birinin sonuna -light eklenir.

Açık tema sonuçlarının önizlemesi

Marka

Marka renginden başlayarak, --brand-hue, --brand-saturation ve --brand-lightness özel özellikleri, herhangi bir hesaplama yapmadan hsl () işlev parantezinin içine yerleştirerek yeniden oluşturulur:

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

Metin renkleri

Ardından, renk şemasının temel unsurları için metin renkleri gerekir. Açık temada metin çok koyu olmalıdır. Aşağıdaki renklerin parlaklığı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 parlaklıkta çok koyu olduğundan %100 doygunlukta kalır. Böylece marka rengi, koyu lacivert rengin içinde görünmeye devam edebilir.

--text2-light, 1. renkten biraz daha açık. Bu, ikincil bir renk olduğu için iyi bir özellik. Ayrıca, doygunluğu da çok daha az.

Yüzey renkleri

Yüzey renkleri, metnin üzerinde veya içinde bulunduğu arka planlar, kenarlıklar ve diğer dekoratif yüzeylerdir. Açık temada bunlar, koyu 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 kullanacağız. Açık grilerin çok renkli görünmemesi için doygunluğu da azaltı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 renkler, :focus veya :hover gibi etkileşimli anlar için ya da kağıt katmanları görünümü oluşturmak için daha fazla varyanta ihtiyaç duyduğundan 4 yüzey rengi oluşturuldu. Bu senaryolarda, fareyle üzerine gelindiğinde --surface2-light ile --surface3-light arasında geçiş yapmak iyi bir fikirdir. Böylece fareyle üzerine gelindiğinde kontrast artar (parlaklık% 99'dan% 92'ye düşer ve daha koyu hale gelir).

Gölgeler

Renk şemasındaki gölgeler, efektin ötesine geçerek gerçekçi bir görünüm kazandırır ve gerçekçi olmayan siyah tabanlı gölgelerden ayrılmasına yardımcı olur. Bunu yapmak için gölgenin rengi, ton özel özelliğini kullanır, tonla biraz doygun hale gelir ancak yine de çok koyu olur. Temelde çok koyu, hafif mavi bir gölge oluşturur.

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light, hsl işleviyle sarmalanmamış. Bunun nedeni, --shadow-strength değerinin birleştirilerek opaklık oluşturulması ve CSS'nin hesaplama yapabilmek için parçalara ihtiyaç duymasıdır. Daha fazla bilgi edinmek için radyal gölge bölümüne gidin.

Açık renkler bir arada

Işık renklerinin nasıl oluşturulduğunu bulmak için aramanıza gerek yok. Tüm renkler CSS'de tek bir yerde bulunur.

* {
  --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 toplu ekran görüntüsü
CodePen'de Sandbox

Koyu tema

Çoğu marka koyu temayla başlamaz. Bu, genellikle daha açık olan birincil temalarının bir varyantıdır. Kullanıcılar ise genellikle gece gibi farklı bağlamlar için koyu tema seçer. Bu faktörler, koyu temalarla ilgili olarak iki şeyi göz önünde bulundurmamı sağladı:

  1. Kullanıcılar genellikle bu temayı kullanırken karanlıkta kalır. Bu nedenle, karanlıkta test yapın.
  2. Renkler, çok yoğun oldukları için ekranda titreşmemek üzere doygunluklarını kaybetmelidir.

koyu temanın nihai sonucunun önizlemesi

Marka

Açık tema, 3 marka hsl renk kanalı değerini değiştirmeden kullanır. Koyu tema ise bu değerleri değiştirerek kullanır. Doygunluk yarıya düşürülür ve parlaklık 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 parlaklı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 parlaklığı ve doygunluğu düşüktür. Birinci yüzey %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 temada gölgeleri görmek çok zor olabilir. Zaten oldukça koyu olan bir şeyi daha da koyulaştırmak zor olduğundan bu durum mantıklıdır. Bu noktada, bir değişkeni değiştirerek gölgeleri koyulaştırmamıza olanak tanıdığı için --shadow-strength-dark çok işimize yarar.

* {
  --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? Geliştirici araçlarından doygunluğu kaldırmayı deneyin. Hangisini tercih edersiniz?

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 toplu ekran görüntüsü
CodePen'de Sandbox

Soluk tema

Bu renk şemasında açıklık ve doygunluk düzenlenir. Renk tonunun görünür olması için yeterli doygunluk olmalı ancak yine de soluk ve düşük kontrastlı olması amaçlandığından kontrast puanlarını zar zor geçmelidir.

Soluk temadaki 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;
}

Tüm renkleri birlikte 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;
}
Karartılmış renklerin hepsinin ekran görüntüsü
CodePen'de Sandbox

Erişilebilir renkler

Koyu metin rengi grubundaki en düşük parlaklığın% 65, koyu yüzeylerdeki en yüksek parlaklığın ise %25 olduğuna dikkat edin. Bu, aralarında% 40'lık bir parlaklık boşluğu olduğu anlamına gelir. Açık temada% 55 boşluk vardır. Metin ve yüzey renkleri arasındaki parlaklık farklarını% 40-50 civarında tutmak, renk kontrastı oranlarının yüksek kalmasına yardımcı olurken puanların düşük olması durumunda ince ayar yapabileceğiniz bir yöntemdir.

Buna "geçene kadar çarp çarp" diyorum. Bu, bir araç geçiyor olduğumu gösterene kadar parlaklık değerini artırma etkileşimidir.

Parlaklığı azaltmak ve kontrastı artırmak için geçene kadar üst karakter + aşağı ok tuşlarına basın.

Bu yarışmada oluşturulan temaların her biri kontrast puanlarını geçiyor. Loş renk şeması, bunlar arasında en düşük kontrasta sahip olsa da minimum koşulları karşılar. Ekipteki diğer kullanıcıların iyi kontrastlı renkler kullanmasına yardımcı olmak için yüzey rengini erişilebilir bir metin rengiyle eşleştiren bir sınıf adı oluşturmanız önerilir.

.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);
}
Soluk yüzey ve metin eşlemelerinin ekran görüntüsü
VisBug ile soluk yüzey ve metin eşleştirmelerinin ekran görüntüsü

Rad Shadow

Temalarda .rad-shadow adlı bir yardımcı sınıf kullanılır. Bu gölge, Smooth Shadow aracında oluşturuldu. Bu aracı çok beğeniyorum. 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ı.

her gölge yan yana

Bunu yapmak için, ayarlanacak her renk şeması için 2 değişken oluşturdum: gölge rengi ve gölge gücü. Renk, doygunluk ve koyuluk ayarlamaları için kullanılır. Güç ise koyu renk şemalarında gölge yoğunluğunu artırmanın kolay bir yoludur. Sonuç şu şekildeydi.

: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 ilgili daha fazla işlem yapacak olsam, ışık yönü tasarımın tüm gölgelerinde aynı olacağından gölge açılarını da bir tasarım jetonu sabiti yapardım.

Renk şemalarını kullanma

Renklerin önceden tanımlanması tamamlandığında, bunları şemadan bağımsız özelliklere dönüştürme zamanı gelir. Yani, bu renk şeması projesinde bir CSS yazarı olarak belirli bir renk şemasının değerine nadiren erişmeniz gerekir. Temaya bağlı kalmayı kolaylaştırmak istiyorum.

Bunu yapmak için renk şemasının kullanımı yalnızca birazdan tanımlayacağımız genel özel özellikler aracılığıyla yapılmalıdır. Bu sayede, tasarım değişkenlerini kullananlar hangi renk şemasının ayarlandığı konusunda endişelenmek zorunda kalmaz. Yalnızca yüzey ve metin renklerini kullanmaları yeterlidir. color: var(--text1-light) yerine color: var(--text1) kullanın. Renklerin tüm uyarlama ve değiştirme işlemleri CSS'de çok daha yüksek bir düzeyde yapılır.

Aşağıdaki kod bloğunda açık temanın bağlayıcı stilleri, genel bir özel özelliği açık temaya özgü renge bağlar. Artık var(--brand) öğesinin 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);
}

Sitede artık açık tema kullanılı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çını daha yaşayalı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);
}

Loş tema

[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 gerektiği gibi kullanabilir ve temalarla ilgili endişelenmelerine gerek kalmaz.

Sonuç

Benim nasıl yaptığımı öğrendiğinize göre siz nasıl yapardınız? 🙂

Yaklaşımlarımızı çeşitlendirelim ve web'de içerik oluşturmanın tüm yollarını öğrenelim. Codepen oluşturun veya kendi demoyu barındırın, bunu içeren bir tweet ile bana ulaşın. Ben de demoyu aşağıdaki Topluluk remiksleri bölümüne ekleyeyim.

Kaynak

Topluluk remiksleri - @chris-kruining, no-preference, more ve less için renk tonu kaydırıcısı, durum renkleri ve kontrast modları ekledi: demo.