Kolor

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:

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

Koło kolorów z etykietami stopni (co 60 stopni), które ułatwiają wizualne odzwierciedlenie wartości poszczególnych kątów

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.

Funkcja kolorów HSL jest podzielona wizualnie na elementy. Odcień używa koła kolorów. Nasycenie szarości miesza się z turkusowym kolorem. Jasność zamienia się w czerń na biało.

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 parametru background-color
  • currentColor to obliczona kontekstowo wartość dynamiczna właściwości color. Jeśli kolor tekstu to red, a następnie ustawisz wartość border-color na currentColor, będzie on też czerwony. Jeśli element, na którym zdefiniowany jest currentColor, nie ma zdefiniowanej wartości dla argumentu color, 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?

rbga(400 0 1)
Parametr rbga to literówka w formacie RGBA, a kod 400 jest większy niż normalnie używany, przez co jest nieprawidłowy.
#0f08
🎉
#OOFZ2
Nie jest to wartość szesnastkowa, ponieważ składa się ona tylko z 5 cyfr i zawiera 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ść protokołu hsl.
hsl(.5turn 40% 60%)
To jest prawidłowa wartość protokołu hsl.
hsl(0, 0, 0)
🎉 Udało się. Druga i trzecia wartość powinny być procentami.
hsl(2rad 50% 50%)
To jest prawidłowa wartość protokołu hsl.
hsl(0 0% 0% / 20%)
To jest prawidłowa wartość protokołu hsl.

Zasoby