Kolor

The CSS Podcast - 006: Color Part One

Kolor jest ważnym elementem każdej witryny, a w CSS jest wiele opcji określania kolorów i manipulowania nimi.

Jak decydujesz, którego typu koloru użyć? Jak uczynić kolory półprzezroczystymi? W tej lekcji dowiesz się, jakie masz opcje, które pomogą Ci podejmować właściwe decyzje dotyczące projektu i zespołu.

Usługa porównywania cen obsługuje różne typy danych, takie jak ciągi znaków i liczby. Kolor jest jednym z tych typów i używa innych typów, takich jak liczby, do własnych definicji.

Wybieranie kolorów

Kolory z nazwami

Najprostszym sposobem na wybranie koloru jest wybranie jednego z 148 nazwanych kolorów w CSS. Są to zwykłe nazwy w języku angielskim, takie jak purple, tomato i goldenrod. Według Web Almanac do najpopularniejszych nazw należą black, white, red, blue i gray. Do naszych ulubionych należą goldenrod, aliceblue i hotpink.

Kolory liczbowe

Nazwane kolory mogą być wygodne, ale prawdopodobnie będziesz musiał użyć konkretnych kolorów, które nie są dostępne w tym zestawie. Kolory możesz określić za pomocą wartości liczbowych w kilku różnych formatach.

Szesnastkowe kody kolorów

h1 {
  color: #b71540;
}

Notacja szesnastkowa (często skracana do „hex”) to skrócony zapis kodu RGB, który przypisuje wartości liczbowe do kolorów składowych czerwonego, zielonego i niebieskiego, czyli 3 kolorów podstawowych.

Zakresy szesnastkowe to 0–9 i A–F. Gdy są używane w szósnastocyfrowej sekwencji, są tłumaczone na zakresy liczbowe RGB, które są w zakresie 0–255, odpowiadające odpowiednio kanałom kolorów czerwonego, zielonego i niebieskiego.

Wartość alfa możesz też zdefiniować za pomocą dowolnych kolorów liczbowych. Wartość alfa to odsetek przezroczystości. W kodzie sześciokowym do 6-cyfrowej sekwencji dodaje się 2 cyfry, tworząc 8-cyfrową sekwencję. Aby na przykład ustawić czarny kolor w szesnastkowym kodzie koloru, wpisz #000000. Aby dodać przezroczystość na poziomie 50%, zmień ją na #00000080.

Skala szesnastkowa to 0–9 i A–F, więc wartości przezroczystości prawdopodobnie nie są takie, jakich oczekujesz. Oto kilka kluczowych, typowych wartości dodanych do czarnego kodu szesnastkowego #000000:

• Wartość alfa 0%, czyli pełna przezroczystość, to 00: #00000000
• 50% alfa to 80: #00000080
• 75% alfa to BF: #000000BF

Aby przekonwertować 2-cyfrowy zapis szesnastkowy na dziesiętny, weź pierwszą cyfrę i pomnóż ją przez 16 (ponieważ system szesnastkowy ma podstawę 16), a następnie dodaj drugą cyfrę. Na przykład w przypadku BF i 75% alfa:

1. B = 11, a pomnożone przez 16 daje 176.
2. F = 15
3. 176 + 15 = 191
4. Wartość alfa to 191 – 75% z 255

RGB (czerwony, zielony, niebieski)

h1 {
  color: rgb(183 21 64);
}

Kolory RGB są definiowane za pomocą funkcji koloru rgb(), która jako parametry przyjmuje liczby lub wartości procentowe. Liczby muszą mieścić się w zakresie 0–255, a wartości procentowe – w zakresie 0%–100%. RGB działa na skali od 0 do 255, więc 255 jest równoznaczne ze 100%, a 0 – z 0%.

Aby ustawić czarny kolor w RGB, zdefiniuj go jako rgb(0 0 0), co oznacza zero czerwonego, zero zielonego i zero niebieskiego. Czarny można też zdefiniować jako rgb(0% 0% 0%). Biały jest dokładnie odwrotnym kolorem: rgb(255 255 255) lub rgb(100% 100% 100%).

Wartość alfa jest ustawiana w rgb() na 1 z 2 sposobów. Dodaj / po parametrach czerwony, zielony i niebieski albo użyj funkcji rgba(). Wartość alfa może być zdefiniowana jako wartość procentowa lub dziesiętna z zakresu od 0 do 1. Na przykład, aby ustawić czarny kolor z alfa kanałem 50% w nowoczesnych przeglądarkach, wpisz: rgb(0 0 0 / 50%) lub rgb(0 0 0 / 0.5).

HSL (barwa, nasycenie, jasność)

h1 {
  color: hsl(344 79% 40%);
}

HSL to skrót od angielskich słów hue (barwa), saturation (nasycenie) i lightness (jasność). Barwa określa wartość na kole kolorów, od 0 do 360 stopni, zaczynając od czerwieni (czyli 0 i 360). Barwa o 180 stopniach, czyli 50%, mieści się w zakresie niebieskiego. Jest to źródło koloru, który widzimy.

Nasycenie określa intensywność wybranego odcienia. Barwa całkowicie pozbawiona nasycenia (z nasycenie 0%) będzie miała odcień szarości. I wreszcie jasność to parametr, który opisuje skalę od bieli do czerni dodanego światła. Jasność 100% zawsze daje biały kolor.

Za pomocą funkcji koloru hsl() możesz zdefiniować prawdziwą czerń, wpisując hsl(0 0% 0%) lub nawet hsl(0deg 0% 0%). Dzieje się tak, ponieważ parametr odcienia określa stopień na kole kolorów, który w przypadku typu liczbowego wynosi 0–360. Możesz też użyć typu kąta (0deg) lub (0turn). Zarówno nasycenie, jak i jasność są definiowane za pomocą wartości procentowych.

Wartość alfa jest definiowana w funkcji hsl() w taki sam sposób jak w funkcji rgb(), czyli przez dodanie parametru / po parametrach odcień, nasycenie i jasność lub przez użycie funkcji hsla(). Wartość alfa może być zdefiniowana jako wartość procentowa lub dziesiętna z zakresu od 0 do 1. Aby na przykład ustawić czarny kolor z przeźroczystością 50%, użyj wartości hsl(0 0% 0% / 50%) lub hsl(0 0% 0% / 0.5). Za pomocą funkcji hsla() napisz: hsla(0, 0%, 0%, 50%) lub hsla(0, 0%, 0%, 0.5).

Kolory o wysokiej rozdzielczości

RGB i HSL definiują kolory w gamucie sRGB. Nowsze monitory obsługują znacznie więcej kolorów niż te, które można opisać za pomocą tych formatów, a także poza zakresem sRGB. Te kolory możesz wybrać za pomocą różnych funkcji CSS.

Funkcja color()

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

Funkcja CSS color() pozwala wybrać kolor w określonej przestrzeni barw. Pierwszym argumentem jest przestrzeń barw, która określa opcje dla tych kanałów. Podobnie jak w przypadku rgb(), możesz ustawić kanał alfa, podając liczbę między 0 i 1 lub procent po /.

Na przykład ciemnoczerwony kolor RGB w poprzednim fragmencie kodu, który jest zdefiniowany jako rgb(183 21 64), można zdefiniować za pomocą procentów jako rgb(72% 8% 25%). Aby określić ten sam kolor za pomocą funkcji color(srgb .72 .08 .25), możesz użyć funkcji color() z kluczowym słowem srgb.

Funkcja srgb ustawia przestrzeń barw i informuje, że następne 3 argumenty to czerwony, zielony i niebieski. Wartości są w zakresie od 0 do 1, a nie od 0 do 255.

Podobnie jak w przypadku rgb(), alfa może być ustawiona za pomocą / i wartości procentowej lub dziesiętnej w zakresie od 0 do 1.

Funkcja color() obsługuje wiele przestrzeni barwowych, z różnymi zaletami i zastosowaniami.

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

Gama kolorów Display P3 zawiera o 50% więcej kolorów niż sRGB. Za pomocą funkcji color() możesz określić wszystkie kolory w gamucie Display P3 za pomocą przestrzeni barw Display P3.

Aby ustawić czerń w profilu Display P3, zdefiniuj ją jako color(display-p3 0 0 0). Po określeniu przestrzeni kolorów display-p3 dla funkcji color() masz trzy kanały: czerwony, zielony i niebieski, podobne do color(srgb). Ponieważ jednak wartości kanałów reprezentują współrzędne w szerszej przestrzeni kolorów, te same wartości kanałów będą oznaczać różne rzeczy.

color(srgb 1 .5 0) to pomarańczowy kolor, który jest odpowiednikiem funkcji color(display-p3 0.93596 0.52724 0.1983). Możemy sprawić, że pomarańczowy kolor będzie jeszcze bardziej żywy, wychodząc poza przestrzeń sRGB do color(display-p3 1 .5 0).

Oklab

Oklab jest zdefiniowany za pomocą funkcji oklab(), z kanałami jasności a i b. Jest przydatna do tworzenia płynnych gradientów i regulowania nasycenia koloru przy zachowaniu jego barwy i jasności.

h1 {
  color: oklab(75% 0.1 0.1)
}

Kanał jasności ma zakres od 0 do 1 lub od 0% do 100%. Kolory o jasności 0 będą zawsze czarne.

Kanał a prowadzi z -0.4 do 0.4 lub z 0% do 100%. Niższe wartości są bardziej zielone, a wyższe bardziej czerwone.

Kanał b prowadzi z -0.4 do 0.4 lub z 0% do 100%. Niższe wartości są bardziej niebieskie, a wyższe bardziej żółte.

OkLCh

OkLCh to biegunowa lub cylindryczna forma OKLab, która jest definiowana za pomocą kanałów jasności, chromatyczności i barwy. Jest ono przydatne do dostosowywania kolorów w sposób spójny z punktu widzenia percepcji. Oznacza to, że zmiany odcienia nie wpłyną na to, jak jasny lub nasycony jest kolor.

h1 {
  color: oklch(80% 0.1 200)
}

W modelu HSL pracowałeś/pracowałaś już z jasnością i odcieniem, a chroma jest podobna do nasycenia. Możesz ustawić czarny kolor za pomocą oklch(0 0 0), a biały – za pomocą oklch(1 0 0).

Kanał jasności ma zakres od 0 do 1 lub od 0% do 100%. Kolory o jasności 0 będą zawsze czarne.

Kanał chroma określa nasycanie koloru – wartość 0 lub 0% oznacza brak nasycenia, a im wyższa wartość, tym większa nasycenie. Wartość 100% jest taka sama jak .4, ale można szybko wyjść poza gamę przy wartościach zbliżonych do .4.

Barwa jest określana w stopniach, podobnie jak hsl().

OkLCh nie jest ograniczona zakresem barw jak Display P3, dlatego musisz się upewnić, że tworzone przez Ciebie kolory mogą być wyświetlane. oklch(80% 50% 200) to jasny niebieski, który pod względem liczbowym wygląda na odpowiedni, ale wykracza poza zakres Display P3.

Inne pokoje

Istnieje wiele sposobów na określenie kolorów w CSS i nie musisz ich wszystkich znać. Formaty rgb() i Hex są powszechnie używane w narzędziach do projektowania i w dotychczasowym kodzie. Warto je poznać. Warto też zapoznać się z formatem, który umożliwia przewidywalne manipulowanie obrazem. Możesz zmienić wartości hsl lub oklch bezpośrednio i zobaczyć, jaki będzie wynikowy kolor.

Więcej informacji znajdziesz w artykule Dostęp do większej liczby kolorów i nowych pokoi.

Kolory systemowe

Oprócz nazw kolorów, takich jak fiolet czy turkus, dostępne są też specjalne słowa kluczowe:

• transparent to kolor całkowicie przezroczysty. Jest to też wartość początkowa funkcji background-color
• currentColor to obliczona wartość dynamiczna właściwości color. Jeśli kolor tekstu to red, a następnie ustawisz border-color na currentColor, będzie on też red. Jeśli element, dla którego zdefiniowano atrybuty currentColor, nie ma zdefiniowanej wartości koloru, currentColor zostanie obliczona przez kaskadę.

Manipulowanie kolorami

Chociaż możesz mieć paletę kolorów do wykorzystania w witrynie, możesz potrzebować ich wariantów do stanów najechania kursorem, obwódek i innych elementów interfejsu. Możesz podać każdy kolor osobno, ale CSS oferuje też sposoby na przekształcanie kolorów w celu tworzenia tych wersji.

color-mix()

Aby użyć wyniku zmieszania 2 kolorów, możesz użyć metody color-mix(). Ta funkcja przydaje się do mieszania koloru z białym lub czarnym, aby uzyskać jaśniejszy lub ciemniejszy wariant.

Aby użyć funkcji color-mix(), musisz zdefiniować 2 kolory, sposób ich mieszania (metodę interpolacji) oraz proporcje poszczególnych kolorów.

W przypadku przestrzeni barwowych z odcieniem możesz też zdecydować, w którą stronę chcesz się poruszać na kole kolorów. Domyślnie używana jest ścieżka shorter, ale możesz też wybrać longer lub increasing i decreasing.

Przestrzeń barw i kierunek to razem metoda interpolacji.

Możesz też podać ilość każdego koloru, który chcesz wymieszać.

Składnia kolorów względnych

Możesz też pracować bezpośrednio z kolorem, używając składni koloru względnego, która umożliwia wybranie dowolnego koloru i wykonanie na nim obliczeń w celu utworzenia nowego koloru.

h1 {
  color: oklch(from red l c h);
}

Korzystanie z funkcji oklch() oznacza, że będziesz pracować z kanałami jasności, nasycenia i barwy. Po słowie kluczowym from możesz określić dowolny kolor w dowolnej składni. Następnie możesz użyć wartości kanału jako litery. Spowoduje to wyświetlenie czerwonego koloru bez żadnych korekt.

Aby wprowadzić korekty, możesz użyć funkcji calc(), aby zmienić wartości kanału, lub po prostu całkowicie go zastąpić. Tutaj używamy tego samego koloru red, ale definiujemy go za pomocą atrybutu oklch(62% 0.25 29).

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

Kanał jasności to 62% / 2 lub 31%. Kanał nasycenia nie uległ zmianie, więc jest to 0.25. Kanał barwy to 180. Spowoduje to utworzenie nowego koloru oklch(31% 0.25 180), czyli nowego ciemnozielonego koloru.

Jako kolor wejściowy często używasz właściwości niestandardowej. Dzięki temu możesz dynamicznie tworzyć warianty kolorów.

Możesz to zrobić za pomocą dowolnej funkcji koloru. Dobrze jest to robić za pomocą funkcji koloru, które mają kanały opisujące zmiany, które chcesz wprowadzić. Jeśli na przykład chcesz dostosować jasność koloru, wybierz oklch lub hsl, ponieważ możesz bezpośrednio zmienić kanał jasności.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

Za pomocą składni kolorów względnych (RCS) możesz utworzyć paletę kolorów do wykorzystania w witrynie.

Kolory poza gamą

Treści będą wyświetlane na różnych ekranach, które mogą, ale nie muszą obsługiwać szerokiej palety kolorów. Jeśli określisz kolor, którego ekran nie obsługuje, przejdzie proces zwany mapowaniem gamutu, aby znaleźć podobny kolor, który można wyświetlić na ekranie. Jeśli chcesz zdefiniować w takich przypadkach konkretne kolory, możesz użyć zapytania o multimedia color-gamut.

Gdzie używać kolorów w regułach CSS

Jeśli właściwość CSS akceptuje jako wartość typ danych <color>, akceptuje dowolną z opisanych wcześniej metod wyrażania koloru. Do stylizacji tekstu użyj właściwości color, text-shadow i text-decoration-color, które akceptują kolor jako wartość lub jako część wartości.

W przypadku tła możesz ustawić kolor jako wartość atrybutu background lub background-color. Kolory można też stosować w przypadku gradientów, np. linear-gradient. Gradienty to typ obrazu, który można zdefiniować programowo w kodzie CSS. Gradienty mogą zawierać co najmniej 2 kolory w dowolnej kombinacji formatu kolorów, np. szesnastkowego, RGB lub hsl.

Na koniec border-color i outline-color ustaw kolor obramowania i obrysowania pudełek. Właściwość box-shadow akceptuje też kolor jako jedną z wartości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kolorach

Zasoby

• Przydatne demo pokazujące, jak używać kątów w HSL
• Kompleksowy przewodnik po kolorach
• Kompleksowy przewodnik po kolorach o szerokiej gamie barw
• [film] Jak odczytywać kody szesnastkowe
• Jak działają kody szesnastkowe