Tworzenie schematu kolorów

Podstawowy przegląd sposobów tworzenia dynamicznego i konfigurowalnego schematu kolorów

Adam Argyle

W tym poście chcę podzielić się sposobami zarządzania wieloma schematami kolorów w kodzie CSS. Wypróbuj wersję demonstracyjną.

Demonstracja

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Utworzymy system kolorów z uwzględnieniem dostępności za pomocą właściwości niestandardowych i elementu calc(), aby strona internetowa dostosowywała się do preferencji użytkownika, a jednocześnie minimalizowała konieczność tworzenia. Zaczynamy od podstawowego koloru marki i na jego podstawie tworzymy system wariantów: 2 kolory tekstu, 4 kolory powierzchni i pasujący cień.

W tym przewodniku na początku definiujemy wszystkie kolory dla każdego schematu kolorów. Do zmiany strony są używane dopiero na samym końcu.

Marka

Często kolor marki ma już ustaloną wartość i jest dostarczany hex lub rgb To wyzwanie GUI ma podstawowy kolor marki #0af. Po pierwsze dla tego systemu kolorów wartość szesnastkowa wymaga przekonwertowania na hsl.

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

Aby umożliwić przyciemnienie lub rozjaśnienie koloru marki, np. o 20%, 3 kanały wartości koloru hsl muszą zostać wyodrębnione w osobne właściwości niestandardowe, tak jak w tym przykładzie:

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS może wykonywać operacje na tych właściwościach kolorów, np. calc(var(--brand-lightness) - 20%), aby zmniejszyć wartość jasności o 20%. Jest to podstawa tworzenia schematu kolorów, ponieważ CSS może zachować wszystkie kolory w tej samej rodzinie odcieni, dostosowując wartości nasycenia i jasności hsl.

Jasny motyw

Każda wersja koloru będzie oznaczona odpowiednim schematem. W tym przypadku każdy kolor będzie miał dołączony znak -light.

podgląd wyników końcowych dla jasnego motywu

Marka

Zaczynając od koloru marki, został on odtworzony przez owinięcie właściwości niestandardowych --brand-hue, --brand-saturation i --brand-lightness w nawiasach funkcji hsl () bez żadnych obliczeń:

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

Kolory tekstu

Podstawy schematu kolorów to kolory tekstu. Tekst w jasnym motywie: powinna być bardzo ciemna. Zwróć uwagę, że jasność poniższych kolorów jest niska: znacznie poniżej 50%.

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light, ponieważ jest bardzo ciemny przy jasności 10%, zachowuje nasycenie 100%, dzięki czemu kolor marki może przebijać przez ciemny granat.

--text2-light nie jest tak ciemny jak pierwszy kolor, co jest dobre, bo jest to kolor dodatkowy. Jest też mniej nasycony.

Kolory powierzchni

Kolory powierzchni to tła, obramowania i inne powierzchnie ozdobne, na których znajduje się tekst. W jasnym motywie są to jasne kolory, w przeciwieństwie do ciemnych kolorów tekstu. Aby utworzyć jasne kolory za pomocą modelu hsl, użyjemy wyższych wartości procentowych w trzeciej wartości jasności. Obniżymy też oraz nasycenie, aby jasne szarości nie wyglądały na zbyt zabarwione.

* {
  --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%);
}

Utworzono 4 kolory powierzchni, ponieważ kolory dekoracyjne zwykle wymagają więcej w przypadku interaktywnych momentów, takich jak :focus czy :hover, lub tworzenia wygląd warstw papieru. W takich sytuacjach dobrze jest przejść --surface2-light po najechaniu kursorem na element --surface3-light. Po najechaniu na nie kursorem pojawi się zwiększenie kontrastu (jasność 99% do 92%, przez co staje się ciemniejsza).

Cienie

Cienie w schemacie kolorów są nieograniczone, ale dodają realistycznej natury efektu i umożliwia odróżnianie go od nierealistycznych czarnych cieni. Aby to zrobić, kolor cienia będzie używać właściwości niestandardowej odcień, będzie nieco nasycony odcieniem, ale nadal bardzo ciemny. Zasadniczo tworzymy bardzo ciemny cień o lekko niebieskim zabarwieniu.

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

Funkcja --surface-shadow-light nie jest ujęta w ramach funkcji hsl. To dlatego, że Wartość --shadow-strength zostanie połączona w celu utworzenia przezroczystości i potrzeb związanych z CSS do wykonywania obliczeń. Aby dowiedzieć się więcej, przejdź do sekcji dotyczącej osi czasu.

Jasne kolory w całości

Nie musisz szukać, jak powstały jasne kolory, ponieważ wszystkie są w jednym miejscu w pliku CSS.

* {
  --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;
}
zrzut ekranu przedstawiający wszystkie kolory świateł
Piaskownica w CodePen

Ciemny motyw

Większość marek nie zaczyna od ciemnego motywu. Jest to wariant podstawowego, jest zwykle lżejszy, motyw. Z kolei użytkownicy często wybierają ciemny motyw w różnych kontekstach, np. w nocy. Z tych powodów w przypadku ciemnych motywów należy pamiętać o 2 rzeczach:

  1. Użytkownicy korzystający z tego motywu są zazwyczaj w ciemności, więc przetestuj ciemność.
  2. Kolory powinny być mniej nasycone, aby ekran nie wibrował, ponieważ zbyt intensywne.

podgląd końcowego wyniku ciemnego motywu

Marka

W jasnym motywie wykorzystano 3 wartości kanałów kolorów marki hsl bez żadnych zmian: ciemny motyw już nie. Nasycenie jest zmniejszone o połowę, a jasność o 50%.

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

Kolory tekstu

W ciemnym motywie kolory tekstu powinny być jasne. Następujące kolory mają wysoką wartość wartości jasności, przybliżając je do bieli.

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

Kolory powierzchni

W przypadku ciemnego motywu kolory powierzchni powinny być ciemne. Te kolory mają niską jasność i nasycenie, przy czym pierwsza powierzchnia jest najciemniejsza (10%).

* {
  --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%);
}

Cienie

W przypadku ciemnego motywu cienie mogą być bardzo słabo widoczne. Ma sens, ponieważ trudno jest przyciemnić coś, co już jest dość ciemne. W tym miejscu --shadow-strength-dark okazuje się bardzo przydatne, ponieważ pozwala przyciemnić cienie przez zmianę jednej zmiennej.

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

Zwróć też uwagę na nasycenie cienia. Czy widzisz kolor? podczas patrzenia na interfejs? Spróbuj usunąć nasycenie w devtools.

Całe ciemne kolory

* {
  --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;
}
zrzut ekranu przedstawiający wszystkie ciemne kolory
Piaskownica w CodePen

Ciemny motyw

Ten schemat kolorów opiera się na jasności i nasycenie. OK powinno być wystarczająco nasycone, aby odcień był widoczny, ale prawie poziomem wyniku kontrastu, który miał być przyciemniony i niski kontrast.

podgląd końcowych wyników motywu przyciemnionego;

Marka

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

Kolory tekstu

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

Kolory powierzchni

* {
  --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%);
}

Cienie

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

przyciemniać wszystkie kolory,

* {
  --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;
}
Zrzut ekranu pokazujący przyciemnione kolory
Sandbox na CodePen

Dostępne kolory

Zwróć uwagę, że najniższa jasność w zestawie ciemnego tekstu wynosi 65%, a Największa jasność na ciemnych powierzchniach wynosi 25%. To 40% jasności, między nimi. W jasnym motywie jest 55% wolnego miejsca. zachowanie różnic w jasności między kolorami tekstu i powierzchni; około 40-50% może pomóc w utrzymaniu wysokiego współczynnika kontrastu kolorów, za pomocą subtelnej korekty, jeśli wyniki będą słabe.

Nazywamy to „bump bump til ya pass” („bump bump til ya Pass”), czyli interakcja i poziom jasności do momentu, aż narzędzie pokaże, że już mija.

Naciśnij Shift + strzałka w dół, aby zmniejszyć jasność i zwiększyć kontrast, aż do przejścia.

Każdy motyw utworzony w tym wyzwaniu uzyskuje punkty kontrastu. Ciemny schemat kolorów ma najniższy kontrast, ale nadal spełnia minimalne wymagania. Aby pomóc innym członkom zespołu używać odpowiednich kontrastujących kolorów, warto utworzyć nazwę klasy, która łączy kolor powierzchni i tekst łatwo dostępny.

.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);
}
Zrzut ekranu pokazujący łączenie ciemnej powierzchni z tekstem
Zrzut ekranu pokazujący parowanie przyciemnionej powierzchni i tekstu za pomocą VisBug

Promieniowy cień

Motywy korzystają z klasy pomocniczej o nazwie .rad-shadow. Ten cień został wygenerowany Smooth Shadow. Użyłem wygenerowanego fragmentu kodu i dostosowałem go do własnych kolorów oraz obliczeń dotyczących krycia. Powodem było utworzenie cienia, który mogłem dostosować w ramach każdego schematu kolorów.

każdy cień obok siebie

W tym celu utworzyłem 2 zmienne dla każdego schematu kolorów dla dostosowania: barwę cienia i siłę cienia. Kolor służy do regulacji nasycenia i ciemności, a siła do łatwego zwiększenia intensywności cieni w przypadku ciemnego schematu kolorów. Otrzymany wynik wyglądał tak.

: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))
  ;
}

Jeśli chciałbym pójść dalej z cieni w swojej palecie kolorów, uczynię kąty cieni również stałymi w tokenie projektu, ponieważ kierunek światła powinien być taki sam dla wszystkich cieni w projekcie.

Wykorzystanie schematów kolorów

Po zdefiniowaniu kolorów należy je przekształcić w właściwości niezależne od schematu. Chodzi o to, że autorowi projektu kolorów CSS rzadko będzie potrzebny dostęp do wartości konkretnego projektu kolorów. Chcę ułatwić Ci pozostawanie w ramach motywu.

Aby to osiągnąć, schemat kolorów powinien być używany wyłącznie za pomocą ogólnych właściwości niestandardowych, które zdefiniujemy za chwilę. W ten sposób Użytkownicy korzystający ze zmiennych projektu nie muszą się martwić, który schemat kolorów ustawiony, wystarczy użyć kolorów powierzchni i tekstu. Zamiast color: var(--text1-light) używają color: var(--text1). Wszystkie adaptacje i obracanie kolorów są wykonywane na dużo wyższym poziomie w CSS.

W tym bloku kodu style łączące jasny motyw łączą ogólną właściwość niestandardową z kolorami określonymi w jasnym motywie. Teraz wszystkie użycia var(--brand) będą używać jasnego koloru marki.

Jasny motyw (automatyczny)

: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);
}

Strona korzysta teraz z jasnego motywu. To bardzo radosny sukces. Jeszcze kilka takich chwil, gdy używamy wstępnie zdefiniowanych kolorów w innych kontekstach schematu kolorów.

Ciemny motyw (automatyczny)

@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);
  }
}

Jasny motyw

[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);
}

Ciemny motyw

[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);
}

Motyw przyciemniony

[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);
}

Na tym etapie autorzy mogą wykorzystać dane ogólne schematu kolorów jako i nie musisz się już przejmować motywami.

Podsumowanie

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz Codepen lub opublikuj własne demo, tweetuj je, a ja dodam je do sekcji Remixe społeczności poniżej.

Źródło

Remiksy utworzone przez społeczność – @chris-kruining dodał(a) suwak barwy. kolory stanu i tryby kontrastu dla no-preference, more i less: demonstracja.