W HTML możemy stworzyć strukturę strony internetowej i jej nagłówki, akapity oraz linki. Tworząc urozmaiconą i dobrze zorganizowaną stronę internetową, należy wziąć pod uwagę jednak także inne aspekty poza transparentnością, na przykład kolory HTML.
Jeśli interesują Cię podstawy HTML, koniecznie przeczytaj również inny artykuł, który napisaliśmy – Tworzenie stron internetowych – przewodnik dla początkujących.
W tym poście przyjrzymy się jak można zdefiniować kolory i odcienie w kodzie HTML, z dużą ilością przykładowych ilustracji.
Kolory HTML – nazwy
Istnieją miliony odcieni kolorów, które mogą być wyświetlane przez nowoczesne przeglądarki. Nie da się ich wszystkich wymienić i wyliczyć, dlatego w świecie IT używamy kodów do definiowania kolorów i odcieni.
HTML wspiera 140 standardowych nazw kolorów, ale można też zdefiniować dowolny inny odcień na swojej stronie internetowej, używając kodów kolorystycznych. Wstępnie zakodowane kolory mogą być zdefiniowane przez ich konkretne nazwy (jak aqua, black, green, hotpink, itp.), więc nie musimy szukać żadnych konkretnych kodów, aby zdefiniować dokładnie te kolory.
Istnieje wiele systemów kodowania kolorów, a kody te zawierają proporcje różnych składników (kolory podstawowe) i wartości parametrów (np. przezroczystość lub nasycenie). W tym artykule zajmiemy się szczegółowo systemem szesnastkowym i wymienimy tylko pozostałe opcje.
Wybieranie i mieszanie kolorów
Kody kolorów możemy znaleźć za pomocą narzędzi do wybierania kolorów.
Oto kilka przykładów:
Każdy kolor, który nasze oczy mogą wykryć, jest mieszaniną różnych proporcji kolorów bazowych. W IT, różne odcienie są wyświetlane poprzez mieszanie kolorów bazowych czerwonego, zielonego i niebieskiego (RGB).
(W teorii kolorów, kolory bazowe to czerwony, żółty i niebieski, ale ze względu na pewne cechy ekranów komputerowych, musimy używać innych kolorów w IT).
Kod kolorystyczny w systemie szesnastkowym
Spośród wszystkich opcji kodów kolorystycznych, najbardziej zwięzła, a co za tym idzie, najczęściej używana podczas edycji kodu HTML jest forma szesnastkowa.
Kod kolorystyczny zaczyna się od znaku #, po którym następuje seria sześciu znaków. Możemy określić dokładny kolor, który chcemy użyć za pomocą cyfr (0-9) i liter (a-f). Pierwsze dwa znaki definiują wartość koloru czerwonego (RR), drugi zestaw dwóch definiuje kolor zielony (GG), a trzeci zestaw dwóch definiuje kolor niebieski (BB).
Przykład: #eb4034
Różne odcienie szarości zawierają tę samą ilość wszystkich składników.
np.,
#404040
#bebebe
Kod koloru czarnego:
#000000
Kolor biały zawiera maksymalną wartość wszystkich składników.
#ffffff
Krótsze wartości szesnastkowe
Czasami możemy użyć jeszcze krótszych kodów; dla kolorów, które mają te same znaki dla każdego komponentu, możemy użyć tylko trzech znaków i uzyskać ten sam kolor.
Kod #000 definiuje kolor czarny, podobnie jak #000000, natomiast #0ff tworzy ten sam turkusowy kolor co #00ffff.
Krótsza wersja #cc2244 to #c24
Gdzie powinien znajdować się kod koloru HTML?
Możemy zdefiniować kolory w postaci atrybutów w tagu, do którego dany kolor się odnosi. Możemy zdefiniować kolor tła strony internetowej w ramach tagu <body>, a kolor nagłówka głównego powinien znajdować się w tagu <h1>, itp.
Atrybuty:
W ramach tagu <body> możemy zdefiniować kolor tekstu za pomocą atrybutu ‘text’, a kolor tła za pomocą atrybutu ‘bgcolor’. Możemy użyć atrybutu ‘color’ w obrębie tagu <font> do zmiany koloru.
W HTML możemy użyć tagu <style> we wszystkich innych elementach, aby nadpisać dowolną globalnie zdefiniowaną informację (np. format, styl, kolor), aby wyświetlić coś innego w określonej lokalizacji.
Inne opcje kodowania kolorystycznego
RGB, RGBA
Możemy zdefiniować stosunek czerwonego, zielonego i niebieskiego w skali od 0 do 255, a nie tylko w postaci szesnastkowej. Aby to zrobić, musimy umieścić kod za text, bgcolor, itp. w tej formie: rgb(192,192,192).
Używając kodów RGBA, oprócz wartości kolorów bazowych, masz także inny komponent, który odnosi się do przezroczystości, zwany Kanałem Alfa. Parametr alfa jest liczbą z zakresu od 0.0 (całkowicie przezroczysty) do 1.0 (wcale nie przezroczysty). Tak wygląda kolor w kodzie RGBA: rgba(255, 99, 71, 0.5)
HSL, HSLA
W HTML możemy zdefiniować kolory za pomocą odcienia, nasycenia i jasności (HSL). Wartość odcienia wyrażana jest w stopniach w oparciu o jego położenie na kole kolorów.
Nasycenie jest wartością procentową, 0% określa odcień szarości, a 100% określa pełny kolor. Jasność jest również wartością procentową, przy czym 0% to kolor czarny, a 100% to biały. Kody kolorów HSL wyglądają tak:
hsl(36, 100%, 50%)
Można również dodać wartość alfa, która odnosi się do przezroczystości koloru.
Wypróbuj różne kolory HTML i formy kodowania kolorów, aby znaleźć ten, który jest najlepszy dla danego projektu i z którym możesz pracować najbardziej efektywnie. Przy odrobinie praktyki możesz z łatwością zdefiniować najładniejsze kolory HTML dla Twojej strony.
W naszej serii samouczków programowania znajdziesz przydatne materiały, które pomogą Ci poprawić umiejętności programowania i przyspieszyć proces uczenia się.
Chcesz nauczyć się kodować online? Przyjdź i wypróbuj nasze pierwsze 25 lekcji za darmo w Szkole Programowania CodeBerry.