Składnia kolorów względnej CSS

Utwórz nowe kolory na podstawie kanałów i wartości innego koloru.

Adam Argyle

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
  • Monochromatyczne
  • Analogicznie
  • Triada
  • Tetradyczny
  • Monochromatyczna z rotacją barw

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.

Uwaga: aby dowiedzieć się, jak określić kolory, kliknij kolor w wysokiej rozdzielczości zawiera wszystkie informacje, o kolorach na stronach internetowych. W tym poście zakładamy, że znasz kolor funkcjonalny z notatką, przestrzeniami kolorów, takimi jak OKLCH, i gatunkami kolorów.

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.

Uwaga: więcej informacji o przewidywalnych wynikach w przypadku gradientów znajdziesz w tym artykule: episode podcastu CSS.

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