Utwórz nowe kolory na podstawie kanałów i wartości innego koloru.
W Chrome 119 jest to bardzo zaawansowana funkcja kolorów dostępna w CSS Color Level 5. Składnia kolorów względnych tworzy płynną ścieżkę do manipulacji kolorami w CSS, oferując sposoby autorów i projektantów, aby:
- Lighten
- Przyciemnij
- Nasycenie
- Nienasycone
- Wzmocnienie chromatu
- Dostosowywanie przezroczystości
- Odwróć
- Uzupełnienie
- Konwertuj
- Kontrast
- Palety kolorów
Przed względną składnią koloru, by zmienić przezroczystość koloru, musisz wpisać Tworzyć niestandardowe właściwości dla kanałów koloru, zwykle HSL, i łączyć nadając im ostateczny kolor i ostateczną wersję koloru. Oznacza to zarządzanie wieloma części kolorów, które mogą szybko stać się uciążliwe.
:root {
--brand-hue: 300deg;
--brand-saturation: 75%;
--brand-lightness: 50%;
--brand-hsl:
var(--brand-hue)
var(--brand-saturation)
var(--brand-lightness);
--brand-color: hsl(var(--brand-hsl));
/* all this work just so I can set the opacity to 50% in a variant */
--brand-color-variant: hsl(var(--brand-hsl) / 50%);
}
Po względnej składni kolorów możesz utworzyć kolor marki z dowolną przestrzenią kolorów lub składnię, a następnie utworzyć wariant o połowie półprzezroczystości z znacznie mniejszą ilością kodu. Jest a także odczytać intencje poszczególnych stylów i systemów.
:root {
--brand-color: hsl(300deg 75% 50%);
--brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}
Z tego posta dowiesz się, jak nauczyć się składni i zademonstrować typowe zmiany kolorów.
Jeśli wolisz filmy, zapoznaj się z tym wyzwaniem GUI (dotyczy to niemal wszystkich materiałów wymienionych poniżej).
Omówienie składni
Celem względnej składni kolorów jest umożliwienie wyodrębniania koloru na podstawie innego
koloru. Kolor podstawowy to kolor źródłowy. Jest to kolor,
pojawia się po nowym słowie kluczowym from. Przeglądarka będzie
przekonwertować i podzielić ten kolor wyjściowy,
i używać ich w nowej definicji koloru.
Poprzedni diagram pokazuje kolor źródłowy green przekształcany na
przestrzeń kolorów nowego koloru,
zamienione na pojedyncze liczby reprezentowane jako r, g, b i alpha.
które są następnie używane bezpośrednio jako wartości nowego koloru rgb().
Ilustracja przedstawia podział, proces i zmienne, ale nie Zmieniam kolor. Zmienne są przywracane do koloru bez zmian, dzięki czemu w którym pojawia się zielony kolor.
Słowo kluczowe from
Pierwszym elementem składni, który należy opanować, jest dodanie części from <color> do
określając kolor. idzie bezpośrednio przed określeniem wartości. Oto kod
przykład, w którym wszystko, co dodano, to from green, tuż przed wartościami
dla funkcji rgb().
.syntax-introduction_same-colors {
color: green;
color: rgb(0 128 0);
color: rgb(from green r g b); /* result = rgb(0 128 0) */
}
Słowo kluczowe from, które jest postrzegane jako pierwszy parametr w notacji funkcyjnej,
zmienia definicję koloru w kolor względny! Po słowie kluczowym from nazwa usługi porównywania cen
oczekuje koloru, koloru, który zainspiruje kolejny kolor.
Konwersja kolorów
Mówiąc prościej, przekształca on kanały zielone na r g i b w nowym koloru.
rgb(from green r g b) /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b); /* r=0 g=128 b=0 */
Kolory z właściwości niestandardowych
Tekst „rgb from green” jest bardzo zrozumiały i zrozumiały. To dlatego
właściwości niestandardowe i względną składnię kolorów stanowią świetne dopasowanie, ponieważ
może rozwiać tajemnicę koloru from. Nie trzeba też
musisz znać format koloru właściwości niestandardowej, bo tworzysz nowy,
w wybranym przez Ciebie formacie.
rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b) /* clear */
Praca w preferowanej przestrzeni kolorów
Możesz wybrać przestrzeń kolorów, korzystając z wybranego funkcjonalnego zapisu kolorów.
rgb(from hsl(120 100% 25%) r g b) /* r=0 g=128 b=0 */
hsl(from hsl(120 100% 25%) h s l) /* h=120 s=100% l=25% */
hwb(from hsl(120 100% 25%) h w b) /* h=120 w=0% b=50% */
lch(from hsl(120 100% 25%) l c h) /* l=46 c=68 h=134 */
Względna składnia kolorów zawiera ten krok konwersji; kolor po kolumnie from to
są konwertowane na przestrzeń kolorów określoną na początku wartości względnej
koloru. Dane wejściowe i wyjściowe nie muszą być ze sobą zgodne, co jest bardzo uwolnione.
Możliwość wyboru przestrzeni kolorów, tak jak wybór koloru, zwiększa też możliwości są bardziej skupione na naprzemiennej kolorystyce ustawienia. Wybór jest mierzony w wynikach, a nie w formacie koloru czy kanale . Stanie się to wyraźniejsze w sekcjach ilustrujących przypadki użycia, w różnych przestrzeniach kolorów sprawdzają się w różnych zadaniach.
Mieszaj, dopasowuj, pomijaj i powtarzaj zmienne
Ta składnia zawiera coś dziwnego, ale ekscytującego – zmienne nie muszą ułożyć je z powrotem w odpowiedniej kolejności i można je powtarzać.
rgb(from green g g g) /* rgb(128 128 128) */
rgb(from green b r g) /* rgb(0 0 128) */
rgb(from green 0 0 g) /* rgb(0 0 128) */
Przezroczystość jako zmienna
Składnia podaje też przezroczystość w postaci zmiennej o nazwie alpha. To opcjonalne,
i przechodzi za / w funkcjonalnym notacji kolorów.
rgb(from #00800080 r g b / alpha) /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha) /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha) /* alpha=50% */
Użyj w zmiennych funkcji calc() lub innych funkcji CSS
Do tej pory cały czas tworzyliśmy kolor zielony. Nauka i zapoznanie się z krokami konwersji i niszczenia. Teraz jest na zmodyfikowanie zmiennych, należy zmienić dane wyjściowe tak, aby różniły się od dane wejściowe.
green /* h=120 s=100% l=25% */
hsl(from green calc(h * 2) s l) /* h=240 s=100% l=25% */
To jest granat! Odcień został podwojony. Przybrano odcień 120 i zmienił się w odcień.
240, całkowicie zmieniający kolor. Spowoduje to zmianę barwy wzdłuż koloru.
koła, czyli prosty trik z cylindryczną przestrzenią kolorów
takich jak HSL,
HWB
LCH oraz
OKLCH.
Aby wizualnie zobaczyć wartości kanałów i obliczyć obliczenia bez zgadywania czy zapamiętywania specyfikacji, wypróbuj to narzędzie do względnych wartości kanałów składni kolorów. Ujawnia on wartość każdego kanału na podstawie określonej składni, dzięki czemu możesz dokładnie wiedzieć, jakich wartości możesz użyć.
Sprawdź obsługę przeglądarek
@supports (color: rgb(from white r g b)) {
/* safe to use relative color syntax */
}
Przypadki użycia i prezentacje
Poniższe przykłady i przypadki użycia mają wiele alternatywnych składni, które pozwalają uzyskać podobne lub identyczne wyniki. Różnice pochodzą z przestrzeni kolorów, w ich ofercie.
W wielu przykładach można też dostosować kolorystykę: by i
to Zmiana koloru by jest względną zmianą koloru. zmiany, która korzysta z
tej zmiennej i wprowadzi korektę na podstawie jej bieżącej wartości. O
zmiana koloru to jest bezwzględną zmianą koloru; zmiany, która nie uwzględnia
i zamiast tego określa zupełnie nową wartość.
Wszystkie wersje demonstracyjne można znaleźć w tej kolekcji Codepen.
Rozjaśnianie koloru
OKLCH, OKLAB, XYZ lub Przestrzenie kolorów sRGB zapewniają przewidywalne rezultaty przy jaśniejszych kolorach.
Rozjaśnij o ilość
W przykładzie poniżej atrybut .lighten-by-25 pobiera kolor blue i przekształca go na
OKLCH, a następnie rozjaśnia kolor niebieski, zwiększając kanał l (jasności) przez pomnożenie
bieżącą wartość o 1.25. Spowoduje to przesunięcie niebieskiego światła na biały o 25%.
.lighten-by-25 {
background: oklch(from blue calc(l * 1.25) c h);
}
Rozjaśnij do określonej wartości
Poniższy przykład .lighten-to-75 nie wykorzystuje kanału l do
rozjaśnia blue, zamiast tego całkowicie zastępuje wartość wartością 75%.
.lighten-to-75 {
background: oklch(from blue 75% c h);
}
Przyciemnianie koloru
Ta sama przestrzeń barw skutecznie rozjaśnia kolory, ale także sprawdza się ciemniejszy kolor.
Ustaw przyciemnienie o określoną część
W przykładzie .darken-by-25 kolor niebieski został przekształcony na
OKLCH, następnie przyciemnia niebieski, zmniejszając kanał l (jasności) o 25%
mnożąc wartość przez .75. Spowoduje to przesunięcie koloru niebieskiego w stronę czarnego o 25%.
.darken-by-25 {
background: oklch(from blue calc(l * .75) c h);
}
Przyciemnij do określonej wartości
Poniższy przykład .darken-to-25 nie wykorzystuje kanału l do przyciemnienia
blue, zamiast wartości zostaje całkowicie zastąpiona 25%.
.darken-to-25 {
background: oklch(from blue 25% c h);
}
Nasycenie koloru
Nasycenie według ilości
Poniższy przykładowy element .saturate-by-50 używa parametru s z hsl() do zwiększenia
Wibracja orchid na podstawie względnego 50%.
.saturate-by-50 {
background: hsl(from orchid h calc(s * 1.5) l);
}
Nasycenie do określonej ilości
Poniższy przykład .saturate-to-100 nie wykorzystuje kanału s z
hsl(), zamiast tego określa pożądaną wartość nasycenia. W tym przykładzie
nasycenie jest podnoszone do 100%.
.saturate-to-100 {
background: hsl(from orchid h 100% l);
}
Zmniejszenie nasycenia koloru
Zmniejsz nasycenie o określoną ilość
Poniższy przykład .desaturate-by-half wykorzystuje wartość s z hsl(), aby zmniejszyć
nasycenie indigo o połowę.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Zmniejsz nasycenie do określonej wartości
Zamiast obniżać nasycenie o określoną ilość, możesz zmniejszyć nasycenie do określonej wartości
. Poniższy przykład .desaturate-to-25 tworzy nowy kolor na podstawie
indigo, ale ustawia nasycenie na 25%.
.desaturate-to-25 {
background: hsl(from indigo h 25% l);
}
Wzmocnienie kolorów
Efekt ten jest podobny do nasycenia koloru, ale różni się
kilka sposobów. Po pierwsze jest to zmiana chroma, a nie saturation. To jest zmiana.
ponieważ przestrzenie barw, które mogą
zapewnić wysoki zakres dynamiki, nie używają
i nasycenie. Przestrzenie kolorów, w których występuje element chroma, mają szeroki zakres dynamiczny
pozwala autorom zwiększyć intensywność kolorów
niż nasycenie
a nawet takie możliwości.
.increase-chroma {
background: oklch(from orange l calc(c + .1) h);
}
Dostosowywanie przezroczystości koloru
Jednym z najczęściej używanych kolorów jest półprzezroczysta wersja koloru. i zmian wprowadzanych w systemach projektowania. Zobacz przykład we wprowadzeniu jest w nim dobrze omówiony.
Dostosowywanie przezroczystości według wartości
.decrease-opacity-by-25 {
background: rgb(from lime r g b / calc(alpha / 2));
}
Dostosowanie przezroczystości do określonej wartości
.decrease-opacity-to-25 {
background: rgb(from lime r g b / 25%);
}
Odwrócenie koloru
Odwrócenie kolorów to typowa funkcja korekty kolorów, którą można znaleźć w bibliotekach kolorów. Można to osiągnąć, przekonwertując kolor na RGB, a następnie odejmując każdy z kolorów jako wartość kanału z 1.
.invert-each-rgb-channel {
background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}
Uzupełnianie koloru
Jeśli Twoim celem nie było odwrócenie koloru, ale jego uzupełnienie, użyj odcienia
rotacja reklam będzie
odpowiednia dla Ciebie. Wybierz przestrzeń kolorów, w której
obróć barwę jako kąt, a następnie za pomocą calc() obróć barwę o odpowiednią wartość.
Znajdowanie dopełnienia koloru polega na obróceniu o połowę obrotu, w tym przypadku
możesz dodać kanał h lub z niego odjąć go do 180, aby osiągnąć wynik.
.complementary-color {
background: hsl(from blue calc(h + 180) s l);
}
Skontrastowanie koloru
Jako metodę osiągania dostępnych współczynników kontrastu kolorów należy wziąć pod uwagę L* (Lstar).
Wykorzystuje (w przybliżeniu) kanał równomiernej jasności (L) od
LCH i OKLCH, w: calc(). W zależności od tego, czy kierujesz reklamy na niski, średni czy wysoki poziom kierowania
dla kontrastu, czyli l* delta wynosi około 40, ~50 lub ok. 60.
Ta technika sprawdza się w przypadku każdego odcienia w obrazach LCH i OKLCH.
skontrastowanie ciemniejszego koloru
Klasa .well-contrasting-darker-color przedstawia L* z delta 60.
Kolor źródłowy to ciemny kolor (jasność o niskiej wartości), więc zostaje dodane 60% (0,6).
do kanału jasności. Technikę tę stosuje się, aby znaleźć dobrze kontrastujące,
ten sam odcień, ciemny kolor tekstu na jasnym tle.
.well-contrasting-darker-color {
background: darkred;
color: oklch(from darkred calc(l + .60) c h);
}
skontrastowanie jaśniejszego koloru.
Klasa .well-contrasting-lighter-color pokazuje L* z delta 60%
. Ponieważ kolor początkowy jest kolorem jasnym (o wysokiej intensywności jasności),
odejmowany od kanału jasności.
.well-contrasting-lighter-color {
background: lightpink;
color: oklch(from lightpink calc(l - .60) c h);
}
Palety kolorów
Względna składnia kolorów bardzo dobrze sprawdza się w tworzeniu palet kolorów. Szczególnie ważne jest, przydatny i wydajny ze względu na dużą liczbę dostępnych przestrzeni kolorów. Poniżej we wszystkich przykładach zastosowano OKLCH, ponieważ kanał jasności jest niezawodny, można obracać, nie powodując skutków ubocznych. Ostatni przykład pokazuje połączenie ustawień jasności i rotacji barw w celu uzyskania wynik!
Otwórz przykładowy kod źródłowy tych plików i spróbuj zmienić --base-color na
jak dynamiczne są poszczególne palety. To świetna zabawa!
Jeśli podobają Ci się filmy, podam szczegółowe informacje o tworzeniu palet kolorów w CSS za pomocą OKLCH w YouTube.
Palety monochromatyczne
Aby uzyskać paletę monochromatyczną, należy utworzyć paletę o tym samym odcieniu, ale z różnymi wahaniami jasności i ciemności. Kolor środkowy to kolor źródłowy. dla palety, gdzie dwie odmiany jaśniejsze i dwie ciemniejsze z boku strony.
:root {
--base-color: deeppink;
--color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
--color-1: oklch(from var(--base-color) calc(l + .10) c h);
--color-2: var(--base-color);
--color-3: oklch(from var(--base-color) calc(l - .10) c h);
--color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}
Wypróbuj zestaw palet opartych na względnej składni kolorów i OKLCH
Open Props – biblioteka bezpłatnych zmiennych CSS, ofert palety kolorów stworzonych w ramach tej strategii i ułatwiające korzystanie z nich importowanie. Wszystkie są dostępne w różnych kolorach, i jego kolor wypluwa paletę.
Palety analogiczne
W przypadku OKLCH i HSL rotacja barw jest prosta, więc utworzenie analogicznej palety kolorów. Obróć barwę o wybraną wartość i zmień kolor podstawowy. i patrz, jak przeglądarka tworzy nowe palety.
:root {
--base-color: blue;
--primary: var(--base-color);
--secondary: oklch(from var(--base-color) l c calc(h - 45));
--tertiary: oklch(from var(--base-color) l c calc(h + 45));
}
Palety triadyczne
Podobnie jak kolory uzupełniające, triadyczne palety kolorów
to przeciwstawne, ale harmoniczne rotacje odcieni dane na podstawie koloru podstawowego. Gdzie
kolor dopełniający jest po przeciwnej stronie koloru, na przykład liniami prostymi
ale rysowane przez środek koła kolorów, palety triadyczne są jak
trójkąta linii, aby znaleźć 2 kolory równomiernie obrócone w stosunku do koloru podstawowego.
Aby to zrobić, obróć barwę 120deg.
To tylko niewielkie uproszczenie tej teorii kolorów, ale wystarczy, by rozbudzić kreatywność. pozwala wejść w bardziej złożone palety triadyczne.
:root {
--base-color: yellow;
--triad-1: oklch(from var(--base-color) l c calc(h - 120));
--triad-2: oklch(from var(--base-color) l c calc(h + 120));
}
Palety tetradycyjne
Palety tetradyczne składają się z czterech kolorów równomiernie podzielonych na koło kolorów, dzięki czemu dla palety bez wyraźnej wartości dominującej. To też możesz sobie wyobrazić, że dwa razy pary kolorów uzupełniających. Rozważnie i wystarczy, że informacje te mogą mieć duże znaczenie.
To tylko niewielkie uproszczenie tej teorii kolorów, ale wystarczy, by rozbudzić kreatywność. jeśli zainteresujesz się bardziej złożonymi paletami czworokątnymi.
:root {
--base-color: lime;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) l c calc(h + 90));
--color-3: oklch(from var(--base-color) l c calc(h + 180));
--color-4: oklch(from var(--base-color) l c calc(h + 270));
}
Monochromatyczne z lekkim obrotem odcienia
Wielu ekspertów ds. kolorów trzyma tę sztuczkę za rękaw. Problem polega na tym, monochromatyczna skala kolorów może być nudna. Rozwiązaniem jest dodanie lekkie lub duże odcienie do każdego nowego koloru wraz ze zmianą jasności.
Ten przykład zmniejsza jasność o 10% na każdą próbkę, a także obraca się barwę o 10 stopni. W efekcie paleta odcienia od różu do indygo płynnie się zlewają jak gradient.
:root {
--base-color: deeppink;
--color-1: var(--base-color);
--color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
--color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
--color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
--color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}
Wypróbuj ten długi baner utworzony z użyciem OKLCH i rotacji barw
Następujący interfejs tabeli wyników korzysta z tej strategii rotacji odcieni. Każda lista
element śledzi swój indeks w dokumencie jako zmienną o nazwie --i. Ten indeks jest
a potem do dostosowania barwy, jasności i baru. Korekta wynosi jedynie o 5% lub
5 stopni, czyli znacznie subtelniej niż w przykładzie powyżej z użyciem deeppink, dlatego wymaga
by zwrócić uwagę, dlaczego tablica wyników może mieć dowolny odcień
elegancji.
Zmień odcień suwaka pod tabelą wyników i zobacz względna składnia kolorów tworzy piękne momenty kolorów.
li {
--_bg: oklch(
/* decrease lightness as list grows */
calc(75% - (var(--i) * 5%))
/* decrease chroma as list grows */
calc(.2 - (var(--i) * .01))
/* lightly rotate the hue as the list grows */
calc(var(--hue) - (var(--i) + 5))
);
}