Dokumentacja CSS z przykładami: Kolor tekstu

Q: Jak zmienić kolor czcionki w HTML?

Użyj właściwości CSS color, w arkuszu stylów albo w atrybucie style: Blue text . Stary znacznik jest przestarzały.

Q: Jak zmienić kolor jednego słowa?

Otocz słowo znacznikiem i nadaj mu kolor: This is red . Użyj albo zamiast , jeśli słowo jest też ważne lub zaakcentowane.

Q: W CSS pisze się font-color czy color?

Pisze się color. Nie istnieje właściwość font-color ani text-color; przeglądarka je ignoruje.

Jak zmienić kolor tekstu w HTML

Użyj właściwości CSS color. Ustala kolor tekstu elementu, a każdy element w jego wnętrzu dziedziczy ten sam kolor, chyba że ustawi własny.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

Właściwość nazywa się color, a nie font-color ani text-color. Tych nazw nie ma w CSS i są po cichu ignorowane.

Dlaczego nie znacznik font

Stare poradniki pokazują . Ten znacznik usunięto z HTML lata temu: walidatory oznaczają go jako błąd, a do tego miesza stylizację ze strukturą, więc zmiana koloru oznacza ręczną edycję każdego znacznika. Przeglądarki nadal go rysują dla zgodności i tylko dlatego wydaje się, że działa.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Sposoby zapisu koloru

color przyjmuje każdy format koloru w CSS. Cztery najczęstsze:

Format	Przykład	Uwagi
Nazwa	`color: tomato;`	148 nazwanych kolorów, wygodnych do szybkich testów
Hex	`color: #2563eb;`	Najczęstszy w plikach projektowych
rgb()	`color: rgb(37 99 235);`	Czerwony, zielony i niebieski od 0 do 255
hsl()	`color: hsl(221 83% 53%);`	Odcień, nasycenie, jasność: łatwo rozjaśnić lub przyciemnić

Hex, rgb() i hsl() mogą mieć kanał alfa dla półprzezroczystego tekstu, na przykład #2563eb80 albo rgb(37 99 235 / 50%). Strona o kolorach CSS wyjaśnia każdy format.

Kolorowanie całej strony, nagłówka lub sekcji

Ustaw kolor raz na body i pozwól dziedziczeniu zrobić resztę, a potem nadpisuj tam, gdzie trzeba:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Łagodna, prawie czarna barwa, taka jak #111827 albo #374151, na białym tle jest przyjemniejsza dla oczu niż czysty #000000, a nadal odbiera się ją jako czerń.

Kolory linków

Linki są wyjątkiem od dziedziczenia: przeglądarka nadaje im własny niebieski (i fioletowy po odwiedzeniu), więc kolor na rodzicu do nich nie dociera. Ustaw go na linku albo każ linkowi dziedziczyć:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited i :focus-visible pozwalają zmieniać kolor w zależności od stanu; omawia je strona o hover. Gdy link ma ten sam kolor co otaczający tekst, zachowaj jego podkreślenie, żeby nadal było widać, że to link.

Zadbaj o czytelność: kontrast

Kolor tekstu to tylko połowa pary; drugą połową jest tło. WCAG wymaga współczynnika kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (około 24px albo 19px pogrubione).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

Jasnoszary tekst w stylu placeholdera to najczęstszy problem. Narzędzia deweloperskie Chrome i Firefoksa pokazują współczynnik kontrastu, gdy sprawdzasz kolor tekstu.

currentColor: ponowne użycie koloru tekstu

currentColor to słowo kluczowe równe wartości color elementu. Mogą go używać obramowania, obwódki i ikony SVG wstawione w kod, więc jedna zmiana color zmienia kolor tekstu i jego ozdób naraz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Częste błędy

Pisanie font-color albo text-color. Właściwość to color.
Używanie znacznika . Jest przestarzały; użyj CSS.
Oczekiwanie, że linki odziedziczą kolor. Ustaw a { color: ... } albo color: inherit.
Kolor jako jedyny sygnał. "Pola na czerwono są wymagane" nie działa dla czytelników, którzy nie rozróżniają czerwieni. Dodaj tekst albo ikonę.
Szary tekst o niskim kontraście. Sprawdź współczynnik: 4.5:1 lub więcej dla tekstu głównego.
Rozjaśnianie tekstu przez opacity. Wygasza cały element, łącznie z tłem i dziećmi. Zamiast tego użyj jaśniejszego koloru albo koloru z kanałem alfa.

Najczęściej zadawane pytania

Jak zmienić kolor czcionki w HTML?

Użyj właściwości CSS color, w arkuszu stylów albo w atrybucie style: Blue text. Stary znacznik  jest przestarzały.

Czy znacznik jest nadal obsługiwany?

Przeglądarki nadal go rysują, żeby bardzo stare strony dalej działały, ale w HTML jest przestarzały, a walidatory zgłaszają go jako błąd. Zamiast niego używaj CSS color.

Jak zmienić kolor jednego słowa?

Otocz słowo znacznikiem  i nadaj mu kolor: This is red. Użyj  albo  zamiast , jeśli słowo jest też ważne lub zaakcentowane.

Dlaczego link nie zmienia koloru, gdy ustawiam color na rodzicu?

Linki mają własny kolor z arkusza stylów przeglądarki, więc nie dziedziczą koloru rodzica. Ustaw go na samym linku (a { color: #2563eb; }) albo użyj a { color: inherit; }, żeby podążał za rodzicem.

W CSS pisze się font-color czy color?

Pisze się color. Nie istnieje właściwość font-color ani text-color; przeglądarka je ignoruje.

Powiązane zagadnienia