Kolor

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:

  1. B równa się 11, co po pomnożeniu przez 16 daje 176
  2. F jest równe 15
  3. 176 + 15 = 191
  4. 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.

Koło kolorów z etykietami wartości stopni w krokach co 60 stopni, aby ułatwić wizualne przedstawienie wartości poszczególnych wartości kąta

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.

Funkcja kolorów HSL z podziałem wizualnie. Barwa korzysta z koła kolorów. Nasycenie oznacza, że szarość stapia się z morskim. Jasność zmienia kolor na czarny.

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ątkowa background-color.
  • currentColor to kontekstowo obliczona wartość dynamiczna właściwości color. Jeśli Twój kolor tekstu to red, a w polu border-color ustawisz wartość currentColor, stanie się on też czerwony. Jeśli element, dla którego zdefiniujesz currentColor, nie ma zdefiniowanej wartości dla parametru color, 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)
Parametr rbga to literówka w wierszu rgba, a wartość 400 jest większa, niż by mogła zostać zaakceptowana, przez co jest nieprawidłowa.
#0f08
🎉
#OOFZ2
Nie jest to wartość szesnastkowa, lecz 5 cyfr z literą Z, przez co jest nieprawidłowa.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

Znajdź nieprawidłowy kolor hsl.

hsl(5, 0%, 90%)
To jest prawidłowa wartość hsl.
hsl(.5turn 40% 60%)
To jest prawidłowa wartość hsl.
hsl(0, 0, 0)
🎉 Okazuje się, że druga i trzecia wartość powinny być wyrażone w procentach.
hsl(2rad 50% 50%)
To jest prawidłowa wartość hsl.
hsl(0 0% 0% / 20%)
To jest prawidłowa wartość hsl.

Zasoby