Wartość atrybutu „color” w dokumencie HTML najczęściej ustalamy za pomocą CSS. Jest to właściwość odpowiedzialna za kolor tekstu wyświetlanego w danym elemencie strony. Możemy ją zapisywać na kilka różnych sposobów, zależnie od potrzeb i kontekstu – zarówno w ramach atrybutu style w znaczniku HTML (styl inline), jak i w osobnych arkuszach CSS.
Sposoby zapisywania wartości atrybutu „color” w HTML
1. Nazwy kolorów
Można używać predefiniowanych angielskich nazw kolorów, np. red, blue, green, black, white, yellow. Ten sposób jest najprostszy i często stosowany w przypadku standardowych, podstawowych barw.
Przykład –
<p style="color: red;">Ten tekst jest czerwony.</p>
2. Wartości heksadecymalne (HEX)
Kolory można definiować za pomocą wartości szesnastkowych, np. #FF0000 dla czerwonego czy #00FF00 dla zielonego. Format HEX składa się z sześciu znaków po znaku # – po dwa znaki odpowiadające kolejno za poziomy kolorów: czerwony, zielony i niebieski (RGB).
Przykład –
<p style="color: #00FF00;">Ten tekst jest zielony.</p>
3. Wartości RGB
Podajemy trzy liczby z zakresu 0–255, określające ilość barwy czerwonej, zielonej i niebieskiej. Zapis wygląda tak: rgb(R, G, B).
Przykład –
<p style="color: rgb(0, 0, 255);">Ten tekst jest niebieski.</p>
4. Wartości RGBA
To rozszerzony wariant RGB z dodatkowym kanałem a (alpha), który odpowiada za przezroczystość. Wartość alpha przyjmuje liczby w zakresie 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty).
Przykład –
<p style="color: rgba(255, 0, 0, 0.5);">Czerwony tekst z 50% przezroczystości.</p>
5. Wartości HSL i HSLA
Kolory można także zapisywać w formacie HSL (hue, saturation, lightness) oraz HSLA (wersja z kanałem przezroczystości).
Przykład HSL –
<p style="color: hsl(120, 100%, 25%);">Ten tekst jest ciemnozielony.</p>
Przykład HSLA –
<p style="color: hsla(240, 100%, 50%, 0.3);">Przezroczysty niebieski tekst.</p>
Gdzie stosować wartość „color” w HTML?
Inline (styl w znaczniku)
Każdy element HTML może określić kolor tekstu bezpośrednio w atrybucie style.
Przykład –
<span style="color: orange;">Pomarańczowy tekst.</span>
Wewnętrzny arkusz styli (sekcja <style> w dokumencie)
Możesz zdefiniować kolor tekstu dla wielu elementów naraz, wykorzystując selektory CSS.
Przykład –
<style> h1 { color: navy; } .highlight { color: #FF6600; } </style>
<h1>Nagłówek granatowy</h1>
<span class="highlight">Tekst pomarańczowy.</span>
Zewnętrzny arkusz CSS
Najbardziej zalecana metoda przy większych projektach – style przechowywane są w osobnym pliku .css.
Przykład (plik .css) –
body { color: gray; }
.important { color: crimson; }
Użycie w HTML –
<body>
<p class="important">Istotny tekst.</p>
</body>
Przykład zmiany koloru tekstu oraz tła na całej stronie
Aby zmodyfikować kolory na całej stronie, ustaw atrybut style w elemencie <body>:
<body style="background-color: black; color: white;">
Cały tekst na stronie będzie biały na czarnym tle.
</body>
Dobre praktyki
- Używaj spójnego sposobu zapisu kolorów – w projektach komercyjnych najlepiej stosować HEX, RGB lub zmienne CSS;
- Nie nadużywaj stylów inline – lepiej korzystać z klas i zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i jego edycję;
- Dostępność – wybieraj kontrastowe kolory tła i tekstu, aby treść była czytelna dla wszystkich użytkowników.
Powyższe sposoby pozwalają na pełną kontrolę nad wyglądem tekstu w dokumentach HTML i umożliwiają tworzenie atrakcyjnych, czytelnych oraz zgodnych ze standardami stron internetowych.
