Kolor w zapisie HTML oznacza sposób, w jaki określamy barwy elementów na stronach internetowych, korzystając głównie z trzech metod: nazw kolorów, kodów HEX i wartości RGB/rgba. Każdy z tych zapisów pozwala nadać dowolnemu elementowi strony określony kolor — tekstowi, tłu, obramowaniom czy ikonom.
Podstawowe sposoby zapisu kolorów w HTML
1. Nazwy kolorów (color names)
HTML obsługuje listę ponad 140 nazwanych kolorów, takich jak:
red– czerwony,blue– niebieski,green– zielony,black– czarny,silver– srebrny,yellow– żółty,purple– purpurowy,navy– granatowy.
Przykład użycia:
<p style="color: blue;">Niebieski tekst</p>Zalety – łatwe i szybkie w użyciu.
Wady – ograniczona paleta barw, brak dokładnej kontroli nad kolorem.
2. Kod koloru HEX (szesnastkowy)
Najpopularniejszy zapis w HTML i CSS. Kod HEX to sześciocyfrowy ciąg określający intensywność czerwieni, zieleni i niebieskiego w modelu RGB. Składnia: #RRGGBB, gdzie każda para cyfr (00-FF) odpowiada składowym koloru.
#FFFFFF– biały,#000000– czarny,#FF0000– czerwony,#00FF00– zielony,#0000FF– niebieski.
Przykład użycia:
<div style="background-color: #00FF00;">Zielone tło</div>Zalety –
- pełna kontrola nad barwą,
- kompatybilność ze wszystkimi przeglądarkami.
Wady –
- trzeba znać wartości HEX lub korzystać z generatora kolorów.
3. RGB i RGBA
RGB to model bazujący na połączeniu czerwonego, zielonego i niebieskiego światła. Składnia: rgb(R, G, B) – wartości 0–255 dla każdej składowej.
rgb(255, 0, 0)– czerwony,rgb(0, 255, 0)– zielony,rgb(0, 0, 255)– niebieski.
RGBA umożliwia dodatkowo ustawienie przezroczystości: rgba(R, G, B, A), gdzie A to alfa (np. 0.5 dla połowicznej przezroczystości).
Przykład:
<span style="background-color: rgba(255, 0, 0, 0.5);">Półprzezroczysty czerwony</span>Zalety –
- wygodny dla projektów wymagających przezroczystości,
- jasny, intuicyjny zapis liczbowy.
Przykłady zastosowania kolorów w HTML i CSS
1. Kolor tekstu
<p style="color: #333333;">Przykładowy tekst</p>2. Kolor tła
<div style="background-color: rgb(240,240,240);">Szare tło</div>3. Kolor obramowania
<button style="border: 2px solid green;">Zielony przycisk</button>4. Gradient (przezroczystość z RGBA)
background: linear-gradient(to right, rgba(255,0,0,0.8), rgba(0,0,255,0.2));Najlepsze praktyki
- Używaj HEX lub RGB dla precyzji i spójności designu strony – pozwala utrzymać branding i zachować jednitość barw;
- Nazwy kolorów są dobre dla prototypowania lub bardzo podstawowych projektów;
- W przypadku przezroczystości korzystaj z RGBA.
Możesz skorzystać z internetowych konwerterów lub selektorów kolorów (np. wbudowanych w edytory kodu), by łatwo pobierać wartości HEX lub RGB. Mechanizmy wyboru koloru są przydatne zarówno przy projektowaniu UI, jak i stylowaniu prostych stron.
Podsumowanie
Kolor w zapisie HTML to zestaw ustalonych formatów (nazwy, HEX, RGB), które pozwalają w sposób precyzyjny i jednoznaczny określać barwy na stronach WWW, zapewniając kontrolę zarówno nad estetyką, jak i funkcjonalnością całego projektu. Wybór formatu zależy od wymagań projektu, ale najbardziej uniwersalny i precyzyjny jest zapis HEX oraz RGB.
