Home WEB i technologie Kolory w HTML
WEB i technologie - 27 czerwca 2020

Kolory w HTML

Jak w języku HTML tworzyć kolory?

Znając już podstawowe znaczniki i składnię dokumentu HTML warto dowiedzieć się jak zmieniać kolory poszczególnych elementów (czcionki, pola). W dokumentach HTML kolory można określać na 3 różne sposoby: stosując zapis szesnastkowy (hex), posługując się modelami przestrzeni barw (RGB, RGBA, HSL, HSLA) lub korzystając z predefiniowanych nazw w języku angielskim. Nadanie barw poszczególnym elementom jest zadaniem należącym do kaskadowych arkuszy stylów (CSS). Jeżeli jednak istnieje potrzeba zmiany koloru bezpośrednio w HTMLu można skorzystać z atrybutu color. Aby zadziałał poprawnie należy umieścić go w tagu otwierającym daną zawartość. Prawidłowy zapis wygląda tak:

html kolory

W zastosowanym powyżej przykładzie posłużono się takiem <p> tj. paragrafem, a wartość określającą kolor czerwony przedstawiono w predefiniowanej nazwie w języku angielskim. Równie dobrze, zamiast słowa „red” można użyć zapisu HEX tj. w tym przypadku #ff0000 lub rgb(255, 0, 0) w modelu przestrzeni barw.

ebook html

Hex – zapis heksadecymalny kolorów

Jak zapisywać kolory w HTML? Najpopularniejszym sposobem przedstawienia kolorów w HTML jest zapis szesnastkowy (ang. hex triplet), czyli w skrócie hex. Składa się on z hashtaga (#) oraz sześciu cyfr szesnastkowych, których następujące po sobie pary odpowiadają kolejno za barwy: czerwoną, zieloną i niebieską. Każda taka para cyfr, zwana bajtem, przyjmuje wartości z przedziału od 00 (0) do FF (255). Im wartość jest większa, tym bardziej intensywny komponent otrzymujemy. Przykładowo zapis #FF0000 jest renderowany na czerwono, ponieważ czerwony składnik posiada maksymalną wartość, a pozostałe są ustawione na 0.

Zobacz też: Składnia HTML

Kod koloru składa się z sześciu cyfr, nawet w przypadku, gdy intensywność jednej z barw jest mniejsza niż 16 (w zapisie szesnastkowym składa się z jednej cyfry). Wówczas jej wartość musi poprzedzać 0. Na przykład, odcień zielonego, w którym czerwony posiada wartość 1, zielony 170 (czyli AA), a niebieski 9 będzie wyglądał następująco: #01AA09. Zapis heksadecymalny może zostać skrócony tylko wtedy, kiedy każdy bajt składa się z takich samych cyfr, np. 1122AA można zapisać jako 12A.

Poniżej przedstawiony został wykaz przykładowych kolorów, możliwych do zastosowania podczas Tworzenia własnego dokumentu HTML. W pierwszej kolumnie wskazano nazwę angielską, w drugiej HEX, trzecia zaś prezentuje docelowy kolor, który pojawi się na tworzonej przez Was stronie www.

html kolory

Sprawdź również

Rok ważności konta orange, czyli jak przedłużyć ważność konta?

Nikt z nas nie lubi okresu, kiedy końca dobiega ważność naszego konta i nadchodzi konieczn…