Jak zmienić kolor tekstu w HTML?

Aby zmienić kolor tekstu w HTML, należy użyć właściwości CSS color, którą można zastosować na kilka sposobów w zależności od potrzeb projektu. Poniżej znajdziesz szczegółowy poradnik wraz z praktycznymi przykładami zastosowań zarówno inline, jak i w osobnych arkuszach stylów.

Zmiana koloru tekstu przy użyciu stylu inline

Najprostszą metodą zmiany koloru fragmentu tekstu jest użycie atrybutu style bezpośrednio w znaczniku HTML, np. <p>, <span> lub innym:

<p style="color: red;">To jest czerwony tekst.</p>

W tym przykładzie wyraz „To jest czerwony tekst.” zostanie wyświetlony na czerwono. Zamiast nazwy koloru możesz wstawić kod w formacie HEX, RGB lub RGBA.

Przykłady:

<p style="color: #00FF00;">Zielony tekst w HEX.</p>
<p style="color: rgb(0, 0, 255);">Niebieski tekst w formacie RGB.</p>
<p style="color: rgba(255, 0, 0, 0.5);">Półprzezroczysty czerwony tekst.</p>

Użycie znacznika `<span>` do wyróżnienia fragmentu tekstu

Aby zmienić kolor tylko wybranego fragmentu tekstu w obrębie większego akapitu, najwygodniej użyć znacznika <span>:

<p>
  To jest zwykły tekst, <span style="color: orange;">a ten fragment jest pomarańczowy</span>.
</p>

Dzięki temu możesz łatwo wyróżnić dowolne słowo lub zdanie innym kolorem.

Zmiana koloru tekstu za pomocą osobnego arkusza CSS (style blokowe)

W większych projektach zaleca się rozdzielenie warstwy prezentacji (CSS) od struktury (HTML). Możesz zdefiniować styl w sekcji <style> w <head> lub w zewnętrznym pliku CSS:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład zmiany koloru</title>
  <style>
    h1 { color: #1a73e8; }
    .ważne { color: #e53935; }
  </style>
</head>
<body>
  <h1>Niebieski nagłówek</h1>
  <p>Normalny tekst. <span class="ważne">Ważny tekst czerwony!</span></p>
</body>
</html>

Przypisanie klasy .ważne pozwala na wielokrotne wykorzystanie tego samego stylu w wielu miejscach dokumentu.

Formatowanie kolorów – najczęściej używane zapisy

CSS pozwala opisać kolor na różne sposoby:

nazwy kolorów CSS, np: red, green, blue,
hex: #FF0000 (czerwony),
rgb: rgb(0, 128, 0) (zielony),
rgba: rgba(255, 0, 0, 0.5) (czerwony z przezroczystością).

Przykłady praktyczne zastosowań

Wyróżnienie słowa w tekście –
<span style="color: gold;">Złote słowo</span>;
Nagłówek strony w określonej palecie barw –
<h1 style="color: #003366;">Nagłówek w kolorze granatowym</h1>;
Lista punktowana z kolorowanymi elementami –


<ul>
  <li style="color: #d32f2f;">Błąd krytyczny</li>
  <li style="color: #388e3c;">Zadanie wykonane</li>
  <li style="color: #fbc02d;">Oczekuje na sprawdzenie</li>
</ul>

Dobre praktyki

Stosuj klasy CSS, gdy zmieniasz kolor wielu elementów – pozwala to łatwiej zarządzać stylami w projekcie,
używaj kolorów zapewniających odpowiedni kontrast (ważne dla dostępności – WCAG),
jeśli to możliwe, korzystaj z plików CSS, aby oddzielić styl od treści,
unikaj przestarzałych atrybutów HTML, takich jak <font color="...">, które nie są już wspierane w nowoczesnych standardach.

Dzięki powyższym technikom możesz w elastyczny i efektywny sposób zmieniać kolor tekstu w HTML, niezależnie czy tworzysz prostą wizytówkę, bloga czy rozbudowaną stronę internetową.

Jak zmienić kolor tekstu w HTML?