Kolor

The CSS Podcast - 006: Color Part One

Kolor jest ważnym elementem każdej witryny, a w CSS jest wiele opcji typów kolorów, funkcji i metod.

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.

Kolory liczbowe

Bardzo możliwe, że po raz pierwszy zetknąłeś się z kolorami w CSS za pomocą kolorów numerycznych. Możemy pracować z liczbowymi wartościami kolorów w kilku różnych formach.

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 szesnastkowym 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ń wartość 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 jeden 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 o przezroczystości 50% w nowoczesnych przeglądarkach, wpisz: rgb(0 0 0 / 50%) lub rgb(0 0 0 / 0.5). Aby uzyskać szerszą obsługę, za pomocą funkcji rgba() napisz: rgba(0, 0, 0, 50%) lub rgba(0, 0, 0, 0.5).

HSL (odcień, nasycenie, jasność)

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

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

Koło kolorów z etykietami wartości stopni w krokach co 60°, które ułatwiają wizualizację poszczególnych wartości kąta

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 odcień 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.

Funkcja kolorów HSL z wizualizacją. Barwa używa koła kolorów. Nasycenie pokazuje, jak szarość przechodzi w turkus. Jasność pokazuje przejście od czerni do bieli.

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 półprzezroczystością 50%, użyj wartości hsl(0 0% 0% / 50%) lub hsl(0 0% 0% / 0.5). Za pomocą funkcji hsla() wpisz: hsla(0, 0%, 0%, 50%) lub hsla(0, 0%, 0%, 0.5).

Słowa kluczowe dotyczące kolorów

W CSS jest 148 nazwanych kolorów. Są to zwykłe nazwy w języku angielskim, takie jak purple, tomato i goldenrod. Według Web Almanac niektóre z najpopularniejszych nazw to czarny, biały, czerwony, niebieski i szary. Nasze ulubione to złoto, błękit i róż.

Oprócz standardowych kolorów dostępne są też słowa kluczowe specjalne:

  • transparent to kolor całkowicie przezroczysty. Jest to też wartość początkowa funkcji background-color.
  • currentColor to kontekstualnie obliczona wartość dynamiczna właściwości color. Jeśli kolor tekstu to red, a później ustawisz kolor border-color na currentColor, będzie on też czerwony. Jeśli element, dla którego zdefiniowano parametr currentColor, nie ma zdefiniowanej wartości parametru color, parametr currentColor zostanie obliczony przez funkcję kaskadową.

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

Jeśli usługa CSS akceptuje typ danych <color> jako wartość, akceptuje dowolną z powyższych metod wyrażania koloru. Do stylizacji tekstu używaj 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 ustawiają kolor obramowania i obrysu pudełek. Właściwość box-shadow akceptuje też kolor jako jedną z wartości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kolorach

Które z tych kolorów są prawidłowe?

rbga(400 0 1)
rbga to błąd w przypadku rgba, a 400 jest większą liczbą niż ta, którą można zaakceptować, więc jest nieprawidłowa.
#0f08
🎉
#OOFZ2
To nie jest wartość szesnastkowa, tylko 5 liczb i litera Z, co powoduje, że jest nieprawidłowa.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Znajdź nieprawidłowy kolor hsl.

hsl(5, 0%, 90%)
To prawidłowa wartość hsl.
hsl(.5turn 40% 60%)
To prawidłowa wartość hsl.
hsl(0, 0, 0)
🎉 Dobrze, 2. i 3. wartość powinny być wartościami procentowymi.
hsl(2rad 50% 50%)
To prawidłowa wartość hsl.
hsl(0 0% 0% / 20%)
To prawidłowa wartość hsl.

Zasoby