Podcast CSS – 006: Color Part One
.
Kolor jest ważnym elementem każdej witryny, a w CSS jest wiele opcji typów kolorów, funkcji i terapii.
Jak wybrać odpowiedni typ koloru? Co zrobić, aby kolory były półprzezroczyste? W tej lekcji dowiesz się, jakie opcje pomogą Ci w podejmowaniu właściwych decyzji dotyczących projektu i zespołu.
CSS ma różne typy danych, takich jak ciągi tekstowe i liczby. Kolor należy do tych rodzajów i wykorzystuje inne, np. liczby do własnych definicji.
Kolory liczbowe
Bardzo prawdopodobne jest, że pierwszy kontakt z kolorami w CSS odbywa się za pomocą kolorów liczbowych. Możemy pracować z numerycznymi wartościami kolorów w kilku różnych postaciach.
Szesnastkowe kolory
h1 {
color: #b71540;
}
Kod szesnastkowy (często skrócony do wartości szesnastkowej) to skrócona składnia RGB, która przypisuje wartość liczbową do czerwonych i niebieskich obszarów, czyli 3 kolory podstawowe.
Zakresy szesnastkowe to 0–9 i A–F. W przypadku użycia w sekwencji 6-cyfrowej są przekładane na zakresy liczbowe RGB od 0 do 255 które odpowiadają kanałom koloru czerwonego, zielonego i niebieskiego.
Możesz też zdefiniować wartość alfa przy użyciu dowolnych kolorów liczbowych.
Wartość alfa to procent przezroczystości.
W przypadku kodu szesnastkowego dodajesz kolejne 2 cyfry do sekwencji 6-cyfrowej,
tworząc ciąg ośmiocyfrowy.
Aby na przykład ustawić czarny kod w kodzie szesnastkowym, wpisz #000000
.
Aby dodać przezroczystość wynoszącą 50%, zmień ją na #00000080
.
Skala szesnastkowa to 0–9 oraz A–F, więc wartości przezroczystości prawdopodobnie nie są takie, jakich oczekujesz.
Oto kilka kluczowych wartości dodanych do czarnego kodu szesnastkowego #000000
:
- 0% alfa – która jest w pełni przezroczysta – wynosi 00:
#00000000
- 50% alfa to 80:
#00000080
- 75% alfa to BF:
#000000BF
Aby przekonwertować dwucyfrowy kod szesnastkowy na dziesiętny, pomnóż pierwszą cyfrę przez 16 (bo szesnastki to podstawa 16), i dodaj drugą cyfrę. Użyj BF jako przykładu dla 75% alfa:
- B równa się 11, co po pomnożeniu przez 16 daje 176
- F jest równe 15
- 176 + 15 = 191
- Wartość alfa wynosi 191–75% z 255.
RGB (czerwony, zielony, niebieski)
h1 {
color: rgb(183, 21, 64);
}
Kolory RGB są zdefiniowane za pomocą atrybutu
funkcja kolorów rgb()
,
używając liczb lub procentów jako parametrów.
Liczby muszą mieścić się w zakresie 0–255, a wartość procentowa 0%–100%.
RGB działa w skali 0–255,
więc 255 odpowiada 100% i 0%.
Aby ustawić czarny w RGB, określ tę wartość jako rgb(0 0 0)
,
czyli zero czerwonego, zielonego i zero niebieskiego.
Czarny może być również określony jako rgb(0%, 0%, 0%)
.
Kolor biały to przeciwieństwo: rgb(255, 255, 255)
lub rgb(100%, 100%, 100%)
.
Wersja alfa jest ustawiona w rgb()
na jeden z dwóch sposobów.
Dodaj /
po parametrach czerwonego, zielonego i niebieskiego,
lub użyj funkcji rgba()
.
Wartość alfa może być określona procentem lub ułamkiem dziesiętnym z zakresu od 0 do 1.
Aby na przykład ustawić 50% czerni alfa w nowoczesnych przeglądarkach, wpisz: rgb(0 0 0 / 50%)
lub rgb(0 0 0 / 0.5)
.
Aby zapewnić lepsze wsparcie, przy pomocy funkcji rgba()
zapis: rgba(0, 0, 0, 50%)
lub rgba(0, 0, 0, 0.5)
.
HSL (odcień, nasycenie, jasność)
h1 {
color: hsl(344, 79%, 40%);
}
HSL oznacza barwę, nasycenie i jasność. Odcień opisuje wartość na kole kolorów, od 0 do 360 stopni, zaczynając od koloru czerwonego (zarówno 0, jak i 360). Odcień wynoszący 180, czyli 50%, będzie w zakresie niebieskim. To pochodzenie koloru, który widzimy.
Nasycenie określa, jak intensywny jest wybrany odcień.
Kolor całkowicie bez nasycenia (z nasyceniem 0%
) wyświetli się w skali szarości.
Jasność jest parametrem, który opisuje skalę dodanego światła od białego do czarnego.
Jasność 100%
zawsze zapewni Ci biel.
Dzięki funkcji kolorów hsl()
definiujesz prawdziwą czerń, stosując zapis hsl(0 0% 0%)
, a nawet hsl(0deg 0% 0%)
.
Wynika to z tego, że parametr hue określa stopień na koło kolorów,
(w przypadku użycia typu liczby) wartość to 0–360.
Możesz też użyć typu kąta, np. (0deg
) lub (0turn)
.
Zarówno nasycenie, jak i jasność są określane procentowo.
Wersja alfa jest definiowana w tym języku: hsl()
,
w taki sam sposób jak w rgb()
, dodając /
po parametrach barwy, nasycenia i jasności lub za pomocą
Funkcja hsla()
.
Wartość alfa może być określona procentem lub ułamkiem dziesiętnym z zakresu od 0 do 1.
Aby na przykład ustawić 50% czerni alfa, użyj 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 oznaczone kolorami
W CSS jest 148 nazwanych kolorów. Są to proste angielskie nazwy, takie jak purpurowy, pomidorowy i złoty. Niektóre z najpopularniejszych nazw według raportu Web Almanac są czarne, białe, czerwone, niebieskie i szare. Nasze ulubione to m.in. goldenrod, aliceblue i hotpink.
Oprócz standardowych kolorów dostępne są też specjalne słowa kluczowe:
transparent
to kolor w pełni przezroczysty. Jest to również wartość początkowa parametrubackground-color
currentColor
to obliczona kontekstowo wartość dynamiczna właściwościcolor
. Jeśli kolor tekstu tored
, a następnie ustawisz wartośćborder-color
nacurrentColor
, będzie on też czerwony. Jeśli element, na którym zdefiniowany jestcurrentColor
, nie ma zdefiniowanej wartości dla argumentucolor
, WartośćcurrentColor
będzie obliczana przez kaskadę
Gdzie w regułach CSS używać koloru
Jeśli usługa porównywania cen akceptuje atrybut
typu danych <color>
jako wartości,
akceptowalna będzie każda z powyższych metod wyrażania koloru.
Aby określić styl tekstu, użyj właściwości color
, text-shadow
i text-decoration-color
, dla których kolor jest wartością, a kolorem stanowi część wartości.
W przypadku tła możesz ustawić kolor jako wartość parametru background
lub background-color
.
Kolorów można też używać w gradientach, np. linear-gradient
.
Gradienty to typ obrazu, który można programowo zdefiniować w CSS.
Gradienty akceptują dwa lub więcej kolorów w dowolnej kombinacji formatu koloru, np. szesnastkowy, rgb lub hsl.
border-color
i outline-color
ustawiają kolor obramowania i konturu pól.
Właściwość box-shadow
akceptuje też kolor jako jedną z wartości.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat koloru
Które z tych kolorów są prawidłowe?
rgb(255, 0, 0)
hotpink
#0f08
#OOFZ2
rbga(400 0 1)
hsl(180deg 50% 50%)
Znajdź nieprawidłowy kolor hsl.
hsl(5, 0%, 90%)
hsl(0 0% 0% / 20%)
hsl(.5turn 40% 60%)
hsl(2rad 50% 50%)
hsl(0, 0, 0)