Spis treści:
- Używanie nazw kolorów: CSS udostępnia 145 nazw kolorów, co pozwala na łatwy i przyjazny dla początkujących wybór kolorów, ale opcje są ograniczone i mogą nie spełniać precyzyjnych potrzeb projektowych.
- Szesnastkowe kody kolorów: Kody szesnastkowe oferują szeroką gamę opcji kolorów i precyzyjną personalizację, chociaż mogą być mniej intuicyjne w użyciu i zapamiętaniu.
- Wartości kolorów RGB i RGBA: RGB umożliwia dokładną kontrolę kolorów za pomocą wartości numerycznych, podczas gdy RGBA zwiększa przezroczystość. Ważne jest zapewnienie dostępnych kombinacji kolorów.
Kolory należą do najczęściej używanych atrybutów CSS i odgrywają kluczową rolę w kształtowaniu tożsamości wizualnej witryny, nastroju i doświadczenia użytkownika. CSS oferuje szeroką gamę opcji użycia kolorów, każdy dostosowany do konkretnych potrzeb i preferencji projektowych.
Chociaż łatwo przeoczyć znaczenie definicji kolorów, Twoje wybory mogą znacząco wpłynąć na wygląd i styl Twojej witryny. Odkrywanie różnic między różnymi metodami oraz praktycznego ich stosowania i łączenia zwiększy Twoje możliwości tworzenia atrakcyjnych wizualnie stron internetowych.
1. Używanie nazw kolorów
CSS zapewnia wygodny sposób definiowania kolorów za pomocą nazw i dostępnych jest 145 opcji. Nazwy kolorów obejmują zarówno proste „czerwony”, „zielony” i „niebieski”, jak i bardziej szczegółowe odcienie, takie jak „koralowy” lub „lawendowy”.
Używanie nazwanych kolorów jest proste: wybierasz nazwę koloru, na przykład „czerwony”, i używasz jej we właściwości CSS obsługującej wartości kolorów. Takie właściwości obejmują między innymi oczywisty kolor i kolor tła, ale także kolor obramowania, kolor konturu i cień tekstu.
Nazwy kolorów są przydatne, gdy potrzebujesz koloru tymczasowego do prototypowania lub chcesz, aby kod był łatwy do odczytania. Oto składnia:
color_property: color_name;
W takim przypadku po prostu zastąp nazwę_koloru konkretnym kolorem, którego chcesz użyć. Na przykład, jeśli chcesz ustawić kolor tekstu akapitu na czerwony, napisz:
p {
color: red;
}
Dzięki temu Twoje akapity będą miały czerwony kolor tekstu:
Plusy: Są łatwe do odczytania i zrozumienia w kodzie CSS. Są przyjazne dla początkujących, dobrze działają w różnych przeglądarkach i przydają się do szybkiego tworzenia pomysłów projektowych.
Wady: mają ograniczone możliwości i mogą nie zapewniać dokładnie takich odcieni, jakich potrzebujesz, co ogranicza kreatywność projektantów. Ponadto mogą nie zawsze spełniać rygorystyczne wymagania dotyczące dostępności, a obsługa w starszych systemach może się różnić.
2. Szesnastkowe kody kolorów
Szesnastkowe kody kolorów, często nazywane „kodami szesnastkowymi”, to najczęstsze metody określania kolorów w projektowaniu stron internetowych. Kody te składają się z sześcioznakowych kombinacji cyfr i liter (0–9, AF), reprezentujących mieszankę składników czerwonego, zielonego i niebieskiego (RGB) w kolorze.
Chociaż są łatwe w użyciu, zrozumienie ich działania może być wyzwaniem. Możesz głęboko zagłębić się w kody szesnastkowe, aby lepiej zrozumieć. Oto podstawowy przykład użycia kodów szesnastkowych w CSS:
color: #RRGGBB;
W tym formacie RR, GG i BB reprezentują odpowiednio składowe czerwoną, zieloną i niebieską. Każdy składnik może mieć wartość od 00 (brak intensywności) do FF (maksymalna intensywność). Na przykład, jeśli chcesz ustawić kolor tła nagłówka witryny na określony odcień niebieskiego, możesz użyć kodu szesnastkowego takiego jak ten:
header {
background-color: #336699;
}
Spowoduje to uzyskanie ciemnoniebieskiego koloru:
Możesz także użyć skrótu, jeśli każdy z trzech elementów powtarza ten sam znak dwukrotnie. Powyższy przykład możesz zapisać jako:
header {
background-color: #369;
}
Zalety: Szesnastkowe kody kolorów zapewniają szeroką gamę opcji kolorów, umożliwiając generowanie szczegółowych i niestandardowych odcieni. Oferują płynną kontrolę nad wyborem kolorów, co czyni je idealnymi do spełnienia złożonych wymagań projektowych.
Wady: Chociaż kody szesnastkowe są potężne, mogą być mniej intuicyjne niż nazwane kolory. Możesz także napotkać wyzwanie polegające na zapamiętaniu określonych wartości kolorów. Na szczęście dostępne są narzędzia do wyszukiwania kodów szesnastkowych kolorów, które można napotkać, dzięki czemu proces jest łatwiejszy w zarządzaniu.
3. Wartości kolorów RGB i RGBA
Podobnie jak kody szesnastkowe, ten format umożliwia określenie kolorów na podstawie ich składowych czerwonej, zielonej i niebieskiej. Tym razem jednak możesz użyć bardziej przyjaznych liczb całkowitych.
Wartości kolorów RGB
Wartości kolorów RGB są drugą najczęściej stosowaną metodą definiowania kolorów w CSS. „RGB” reprezentuje kolor czerwony, zielony i niebieski, wyrażone jako funkcja CSS z nawiasami po niej. Wewnątrz nawiasów do każdego kanału koloru przypisuje się wartości z zakresu od 0 do 255. Pozwala to kontrolować intensywność koloru czerwonego, zielonego i niebieskiego w kolorze, którego chcesz użyć.
Oto składnia:
rgb(red_value, green_value, blue_value);
Zastąp wartość czerwona, wartość_zielona i wartość_niebieska odpowiednimi wartościami liczbowymi. Można na przykład uzyskać kolory biały, czarny i czerwony, takie jak pokazane na tym obrazku:
Jeśli dla wszystkich trzech kanałów kolorów (czerwony, zielony i niebieski) ustawisz maksymalną wartość 255, spowoduje to najwyższą intensywność dla każdego kanału, tworząc kolor biały:
.white-box {
color: rgb(255, 255, 255);
}
Jeśli ustawisz dla wszystkich trzech kanałów kolorów minimalną wartość 0, oznacza to brak koloru w każdym kanale, co skutkuje czernią.
.black-box {
color: rgb(0, 0, 0);
}
Ustawienie kanału czerwonego na maksymalną wartość 255, podczas gdy pozostałe kanały mają minimalną wartość 0, daje kolor czerwony:
.red-box {
color: rgb(255, 0, 0);
}
Wartości kolorów RGBA
RGBA działa w taki sam sposób jak RGB, jedyną różnicą jest włączenie wartości alfa. Litera „A” w RGBA oznacza alfa, która określa poziom przezroczystości lub nieprzezroczystości wybranego koloru. Wartość 0 oznacza całkowitą przezroczystość, dzięki czemu kolor jest całkowicie niewidoczny, natomiast wartość 1 oznacza pełne krycie, dzięki czemu kolor jest w pełni widoczny.
RGBA jest szczególnie przydatne, gdy chcesz tworzyć elementy o różnym poziomie przezroczystości, takie jak półprzezroczyste tła lub wyblakły tekst. Pełna składnia to:
color: rgba(red_value, green_value, blue_value, alpha_value);
Tutaj wartość_czerwona, wartość_zielona i wartość_niebieska reprezentują kanały kolorów jak w RGB, a wartość_alfa określa poziom przezroczystości.
div {
background-color: rgba(0, 128, 0, 0.5);
}
W tym przykładzie wartość alfa wynosząca 0,5 przypisuje 50% przezroczystości kolorowi zielonemu, umożliwiając prześwitywanie zawartości znajdującej się pod nim:
Zalety: RGB i RGBA umożliwiają dokładną kontrolę kolorów, ułatwiając dobór precyzyjnych odcieni i tworzenie atrakcyjnych wizualnie projektów. Są kompatybilne z różnymi przeglądarkami internetowymi, zapewniając spójność wybranych kolorów.
Wady: Wyzwanie polega na zapewnieniu dostępnych kombinacji kolorów. Bardzo ważne jest zwrócenie uwagi na współczynniki kontrastu, zwłaszcza podczas pracy z przezroczystością w RGBA. Wytyczne WCAG mogą pomóc w zapewnieniu dostępności projektu.
4. Wartości kolorów HSL i HSLA
HSL — skrót od Hue, Saturation i Lightness — to kolejna funkcja CSS, która definiuje kolory. Podobnie jak RGB, HSL wykorzystuje wartości numeryczne do reprezentowania kolorów, ale robi to inaczej. Być może znasz wartości HSL z komponentów interfejsu użytkownika w aplikacjach do projektowania i gdzie indziej.
Odcień: reprezentuje sam kolor za pomocą stopni na kole kolorów w zakresie od 0 do 360. Wyobraź sobie, że wybierasz punkt na okręgu, gdzie każdy stopień odpowiada innemu kolorowi. Na przykład 0 i 360 stopni dla koloru czerwonego, 120 stopni dla koloru zielonego i 240 stopni dla koloru niebieskiego.
Nasycenie: Nasycenie określa żywość i intensywność koloru. Określa związek koloru z szarością, gdzie 0% oznacza całkowitą skalę szarości (desaturowanie), a 100% oznacza pełne nasycenie (żywe i czyste).
Jasność: Jasność określa, jak jasny lub ciemny jest kolor. Jest to związane z pozycją koloru w widmie pomiędzy czarnym (0%) a białym (100%). Wartość 50% reprezentuje normalny kolor, wartości poniżej 50% przyciemniają kolor, a wartości powyżej 50% go rozjaśniają.
Oprócz HSL istnieje również HSLA, gdzie „A” oznacza „alfa”. Jest to podobne do „A” w RGBA i oznacza przezroczystość.
Oto składnia:
color: hsl(hue_value, saturation_percentage, lightness_percentage);
Używając tej składni, zamień wartość_barwy, procent_nasycenia i procent_jasności konkretnymi wartościami, które chcesz dla każdego składnika. Na przykład:
div {
background-color: hsl(120, 100%, 50%);
}
W tym przykładzie kolor tła elementu div jest ustawiony na żywą zieleń przy użyciu wartości HSL. Liczba 120 reprezentuje odcień (zielony), 100% oznacza pełne nasycenie, a 50% ustawia jasność na zrównoważonym poziomie.
Plusy: HSL i HSLA oferują wszechstronne obliczenia kolorów przy użyciu niestandardowych właściwości CSS. Są wysoce kompatybilne z nowoczesnymi przeglądarkami i umożliwiają łatwą regulację jasności kolorów.
Wady: Nauka HSL wymaga zrozumienia wiedzy o kolorach, takich jak odcienie i nasycenie, co może stanowić większe wyzwanie niż znane kolory RGB.
Wykorzystanie mocy kolorów CSS
Istnieje więcej metod, które możesz sprawdzić, a eksplorując różne formaty definiowania kolorów w CSS, pamiętaj, że masz wpływ na kształtowanie wyglądu, nastroju i komfortu użytkowania swojej witryny.
Twój wybór formatu kolorów — czy to proste nazwy kolorów, kody szesnastkowe, RGB czy HSL — może mieć wpływ na to, jak odbiorcy postrzegają Twoją witrynę. Eksperymentuj, ucz się i znajdź definicje kolorów, które najlepiej odpowiadają Twoim celom projektowym.