Podstawowe omówienie sposobu tworzenia dynamicznego i konfigurowalnego schematu kolorów
W tym poście przedstawię sposoby zarządzania wieloma schematami kolorów. w CSS. Wypróbuj wersję demonstracyjną.
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
.
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;
}
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:
- Użytkownicy korzystający z tego motywu są zazwyczaj w ciemności, więc przetestuj ciemność.
- Kolory powinny być mniej nasycone, aby ekran nie wibrował, ponieważ zbyt intensywne.
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;
}
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.
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;
}
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.
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);
}
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.
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.