Tworzenie schematu kolorów

Podstawowe omówienie sposobu tworzenia dynamicznego i konfigurowalnego schematu kolorów

Adam Argyle

W tym poście przedstawię sposoby zarządzania wieloma schematami kolorów. w CSS. Wypróbuj wersję demonstracyjną.

Demonstracja
.

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

Omówienie

Zbudujemy łatwo dostępny system kolorów z właściwościami niestandardowymi i calc(), aby utworzyć stronę, która dostosowuje się do preferencji użytkownika przy zachowaniu jej treści na minimalnym poziomie. Zaczynamy od podstawowego koloru marki. dostępne warianty: 2 kolory tekstu, 4 kolory powierzchni i pasujący cień.

Przewodnik rozpoczyna się od zdefiniowania wszystkich kolorów dla każdego schematu kolorów. z przodu. Dopiero gdy to zrobią, zostaną wykorzystane do zmiany strony.

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 przedstawić koncepcję przyciemniania lub rozjaśniania koloru marki, na przykład 20%, 3 kanały wartości koloru hsl trzeba wyodrębnić do własnej wartości niestandardowej. właściwości:

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

CSS może wykonywać obliczenia na tych właściwościach koloru, np. calc(var(--brand-lightness) - 20%), aby zmniejszyć wartość jasności o 20%. To podstawa budowania schemat kolorów, ponieważ CSS pozwala utrzymać wszystkie kolory w tej samej rodzinie barw, nasycenie i jasność obrazu hsl.

Jasny motyw

Każda wersja kolorystyczna będzie oznaczona schematem dopasowania, w tym przypadku każda jest dołączony ciąg -light.

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

Marka

Zaczynamy od koloru marki, a odtwarza się poprzez owinięcie tych elementów: --brand-hue, --brand-saturation i --brand-lightness właściwości niestandardowe w nawiasie 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%);
}

W --text1-light jest bardzo ciemno przy 10% jasności, więc intensywne kolory wynoszą 100% nasycenie, aby kolor marki nadal przebijał się przez ciemny granat.

--text2-light, nie jest tak ciemny jak pierwszy kolor, co jest bardzo dobre jest też znacznie mniej nasycony.

Kolory powierzchni

Kolory powierzchni to tła, ramki i inne powierzchnie dekoracyjne, czy tekst znajduje się w środku. W jasnym motywie są to jasne kolory, w przeciwieństwie do ciemnych kolorów tekstu. Aby utworzyć jasne kolory za pomocą protokołu hsl, Przy trzeciej wartości jasności użyjemy wyższych wartości procentowych. 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. Do zrobienia W tym przypadku kolor cienia użyje właściwości niestandardowej Hue, zostanie lekko nasyconym barwem, ale i tak bardzo ciemnym. Tworząc bardzo mroczny widok, lekko niebieskim cieniem.

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

Pole --surface-shadow-light nie jest uwzględnione w 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ń. Przejście do cienia , aby dowiedzieć się więcej.

Jasne kolory w całości

Nie trzeba szukać różnych kolorów, aby znaleźć w jednym miejscu w usłudze porównywania cen.

* {
  --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, mają zwykle lżejszy motyw. Natomiast użytkownicy często wybierają ciemny motyw w zależności od kontekstu, np. nocy. Te czynniki skłoniły mnie do zachowania dwóch z ciemnymi motywami:

  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 zostanie przecięte na pół, a jasność zmniejszy się (względem 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. Następujące kolory mają słabym oświetleniu i nasyceniu, 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. Tutaj Metoda --shadow-strength-dark jest niezwykle przydatna, ponieważ pozwala przyciemnić światło cienie, zmieniając jedną zmienną.

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

Zwróć też uwagę na stopień nasycenia danego cienia. Czy widzisz kolor? podczas patrzenia na interfejs? Spróbuj usunąć nasycenie narzędzia deweloperskie – które wolisz?!

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

Schemat kolorów polega na koordynowaniu jasności i nasycenia. 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 z ciemnego motywu

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

Przyciemnij 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 przedstawiający wszystkie przyciemnione kolory
Piaskownica w CodePen
.

Kolory z ułatwieniami dostępu

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 do jasnego motywu. 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.

wciśnięcie klawisza Shift + strzałka w dół spowoduje zmniejszenie jasności i zwiększenie kontrastu do chwili 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 parowanie przyciemnionej powierzchni i tekstu
Zrzut ekranu pokazujący parowanie przyciemnionej powierzchni i tekstu za pomocą VisBug
.

Promieniowy cień

Motywy używają klasy narzędzi o nazwie .rad-shadow. Ten cień został wygenerowany Smooth Shadow. Na podstawie wygenerowanego fragmentu kodu dostosowałem go, używając własnych kolorów przezroczystość. 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 oznacza nasycenie i ciemność podczas gdy intensywność pozwala w łatwy sposób wyróżnić cień i intensywności w przypadku ciemnego schematu kolorów. Wynik końcowy wyglądał mniej więcej 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))
  ;
}

Gdybym dodał cienie do schematu kolorów, wybrałbym cień jest też stały tokenem projektowania, ponieważ kierunek światła powinien być taki sam między wszystkimi cieniami projektu.

Wykorzystanie schematów kolorów

Po wstępnym definiowaniu kolorów musisz je zamienić na właściwości niezależne od schematu. Jako usługa porównywania cen w ramach tego projektu ze schematem kolorów, rzadko trzeba mieć dla konkretnego schematu kolorów. Zależy mi na tym, żeby poruszanie się w granicach tego motywu było łatwe.

W tym celu schemat kolorów powinien być stosowany wyłącznie a także ogólne właściwości niestandardowe, które omówimy 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 zmiany kolorów należy wykonać na znacznie wyższym poziomie w CSS.

Przyjrzyjmy się połączonym stylom w jasnym motywie w poniższym bloku kodu. połączyć ogólną właściwość niestandardową z kolorem charakterystycznym dla jasnego motywu. Teraz wszystkie w przypadku użycia atrybutu var(--brand) będzie używany jasny kolor 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);
}

Ciemny motyw

[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ż martwić o motywację.

Podsumowanie

Skoro już wiesz, jak to robię, jak Ty?! 🙂

Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz Codepen lub poprowadź własną prezentację i wyślij do mnie tweeta, a dodam ją do Remiksy przez społeczność znajdują się 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.