The CSS Podcast – 006: Color Part 1
Kolor jest ważną częścią każdej witryny, a w CSS dostępnych jest wiele opcji typów kolorów, funkcji i zastosowań.
Jak wybrać typ koloru? Jak sprawić, żeby kolory stały się półprzezroczyste? Podczas tej lekcji dowiesz się, jakie masz możliwości, które pomogą Ci podejmować właściwe decyzje dotyczące projektu i zespołu.
CSS zawiera różne typy danych, takie jak ciągi tekstowe i liczby. Jednym z tych typów jest kolor, który wykorzystuje inne rodzaje, np. liczby w odniesieniu do własnych definicji.
Kolory liczbowe
Jest bardzo prawdopodobne, że pierwsza ekspozycja na kolory w CSS dotyczy kolorów liczbowych. Z liczbowymi wartościami kolorów możesz pracować na kilka różnych postaci.
Kolory szesnastkowe
h1 {
color: #b71540;
}
Notacja szesnastkowa (często skracana do wartości szesnastkowej) to skrótowa składnia RGB, która przypisuje wartość liczbową zielonemu i niebieskiemu, które są 3 kolorami podstawowymi.
Zakresy szesnastkowe to 0-9 i A-F. W 6-cyfrowej sekwencji są one przekształcane w zakresy liczbowe RGB (0–255), które odpowiadają kanałowi koloru czerwonego, zielonego i niebieskiego.
Możesz też zdefiniować wartość alfa za pomocą dowolnych kolorów liczbowych.
Wartość alfa to procent przezroczystości.
W kodzie szesnastkowym dodajesz kolejne 2 cyfry do sekwencji 6-cyfrowej, tworząc sekwencję ośmiocyfrową.
Aby na przykład ustawić czarny kod w kodzie szesnastkowym, wpisz #000000
.
Aby dodać przezroczystość równą 50%, zmień ją na #00000080
.
Ponieważ skala szesnastkowa to 0–9 i A–F, wartości przezroczystości prawdopodobnie nie są zgodne z oczekiwaniami.
Oto kilka typowych wartości dodanych do czarnego kodu szesnastkowego (#000000
):
- 0% alfa, czyli w pełni przezroczyste, to 00:
#00000000
- 50% alfa to 80:
#00000080
- 75% alfa to BF:
#000000BF
Aby przekonwertować dwie cyfry szesnastkowe na dziesiętne, pomnóż pierwszą cyfrę przez 16 (ponieważ szesnastkowy kod to podstawa 16), a potem dodaj drugą cyfrę. Używając funkcji 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 definiuje się za pomocą funkcji kolorów rgb()
, używając jako parametrów liczb lub wartości procentowych.
Wartości muszą mieścić się w przedziale 0-255, a wartości procentowe to 0-255.
RGB działa w skali 0–255, więc wartość 255 odpowiada 100% i od 0 do 0%.
Aby ustawić czarny w RGB, określ go jako rgb(0 0 0)
, czyli zero czerwonego, zielonego i niebieskiego.
Kolor czarny jest też określany jako rgb(0%, 0%, 0%)
.
Kolor biały jest przeciwieństwem: rgb(255, 255, 255)
lub rgb(100%, 100%, 100%)
.
Wartość alfa jest ustawiana w polu 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-procentowy poziom alfa w nowoczesnych przeglądarkach, wpisz: rgb(0 0 0 / 50%)
lub rgb(0 0 0 / 0.5)
.
Aby uzyskać szerszą obsługę, użyj funkcji rgba()
, wpisz: 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, rozpoczynając od czerwonego (tzn. od 0 do 360). W niebieskim zakresie znajduje się odcień 180 lub 50%. To pochodzenie koloru, który widzimy.
Nasycenie określa intensywność wybranego odcienia.
Pełne wysycenie (z nasyceniem 0%
) będzie wyświetlane w skali szarości.
Jasność jest parametrem określającym skalę od bieli do czerni dodanego światła.
Jasność 100%
zawsze oznacza biel.
Za pomocą funkcji koloru hsl()
możesz zdefiniować prawdziwą czerń, wpisując hsl(0 0% 0%)
, a nawet hsl(0deg 0% 0%)
.
Wynika to z faktu, że parametr hue określa stopień na kole kolorów, który w przypadku liczby to 0–360.
Możesz też użyć typu kąta, czyli (0deg
) lub (0turn)
.
Nasycenie i jasność są określane w procentach.
Wartość alfa jest definiowana w zasadzie hsl()
w taki sam sposób jak rgb()
, dodając /
po parametrach barwy, nasycenia i jasności lub za pomocą funkcji 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ć kolor czarny na poziomie 50%, 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 nazwy angielskie, takie jak „fioletowy”, pomidorowy i złoty. Zgodnie z Web Almanac najpopularniejsze nazwy to: czarny, biały, czerwony, niebieski i szary. Nasze ulubione utwory to goldenrod, aliceblue i hotpink.
Oprócz standardowych kolorów dostępne są również specjalne słowa kluczowe:
transparent
to kolor w pełni przezroczysty. Jest to również wartość początkowabackground-color
.currentColor
to kontekstowo obliczona wartość dynamiczna właściwościcolor
. Jeśli Twój kolor tekstu tored
, a w poluborder-color
ustawisz wartośćcurrentColor
, stanie się on też czerwony. Jeśli element, dla którego zdefiniujeszcurrentColor
, nie ma zdefiniowanej wartości dla parametrucolor
, zamiast tego wartośćcurrentColor
zostanie obliczona przez kaskadę
Gdzie używać koloru w regułach CSS
Jeśli właściwość CSS akceptuje jako wartość typ danych <color>
, akceptuje dowolną z powyższych metod wyrażania koloru.
Do określenia stylu tekstu używaj właściwości color
, text-shadow
i text-decoration-color
, ponieważ wszystkie one akceptują kolor jako wartość lub element wartości.
W przypadku tła możesz ustawić kolor jako wartość atrybutu background
lub background-color
.
Kolory mogą być też używane w gradientach, takich jak linear-gradient
.
Gradienty to typ obrazów, które można automatycznie definiować w CSS.
Gradienty akceptują co najmniej 2 kolory w dowolnej kombinacji formatu kolorów, np. szesnastkowym, rgb lub hsl.
Na koniec border-color
i outline-color
ustawiają kolor obramowania i obramowania pól.
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łowymi kolorami?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
Znajdź nieprawidłowy kolor hsl.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)