color
Ustawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- Wartość domyślna
canvastext (zależny od przeglądarki)- Dziedziczona
- Tak
- Animowalna
- tak, jako kolor
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.color = "#a78bfa"
Przykład
#:root {
--text: #e5e5e5;
--muted: #a3a3a3;
--accent: #a78bfa;
}
body { color: var(--text); }
.muted { color: var(--muted); }
a { color: var(--accent); }<p style="margin: 0 0 6px; color: #e5e5e5;">Główny tekst strony.</p>
<p style="margin: 0 0 6px; color: #a3a3a3;">Tekst pomocniczy w stonowanym kolorze.</p>
<a href="#" style="color: #a78bfa;">Link w kolorze akcentu</a>Definicja i zastosowanie
#Właściwość color określa kolor tekstu elementu. Jest dziedziczona, więc ustawiona na body koloruje cały dokument, dopóki któryś element jej nie zmieni.
Kolor można zapisać na wiele sposobów: nazwą (tomato), szesnastkowo (#a78bfa), funkcjami rgb() i hsl(), a w nowych przeglądarkach także w przestrzeniach oklch() i lab(), które dają bardziej przewidywalne jasności.
Wartość color jest też dostępna pod słowem currentcolor. Domyślnie korzystają z niej obramowania, podkreślenia i cienie, a ikony SVG z fill="currentColor" przejmują kolor otaczającego tekstu.
Składnia
#color: <kolor>;Wartości
#nazwa
Jedna ze 140 nazw kolorów rozpoznawanych przez CSS.szesnastkowo
Zapis szesnastkowy: po dwie cyfry na czerwony, zielony i niebieski.rgb()
Składowe czerwona, zielona i niebieska w zakresie 0–255.hsl()
Odcień, nasycenie i jasność. Łatwo przyciemnić lub rozjaśnić kolor.oklch()
Nowoczesna przestrzeń barw, w której ta sama jasność wygląda równo jasno dla każdego odcienia.
Wartości w praktyce
#tomato
.demo { color: tomato; }#38bdf8
.demo { color: #38bdf8; }rgb(52 211 153)
.demo { color: rgb(52 211 153); }hsl(280 90% 70%)
.demo { color: hsl(280 90% 70%); }oklch(80% 0.15 80)
.demo { color: oklch(80% 0.15 80); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Sprawdzaj kontrast tekstu z tłem. Dla zwykłego tekstu wytyczne WCAG zalecają współczynnik co najmniej 4.5:1.
- Trzymaj kolory w zmiennych CSS. Zmiana motywu to wtedy podmiana kilku wartości, a nie szukanie po całym arkuszu.
Powiązane hasła
#- background-colorUstawia kolor tła elementu.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- border-colorUstawia kolor obramowania.
- accent-colorZmienia kolor akcentu kontrolek formularza: pól wyboru, przycisków opcji, suwaków i pasków postępu.
- rgb()Zapisuje kolor jako mieszankę światła czerwonego, zielonego i niebieskiego, z opcjonalną przezroczystością. Obejmuje też zapis hex.
Widzisz błąd albo brakuje przykładu? Napisz do nas.