Kolory HTML – kody kolorów

  • Reading time:8 mins read

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.

 

 Kolory HTML pozwalają stworzyć nieskończoną ilość różnorodnych kolorystycznie ilustracji.

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.