W tym artykule
Czym są odcienie, tony i półtony koloru?
Odcień ciemny powstaje przez mieszanie koloru z czernią. Odcień jasny powstaje przez mieszanie z bielą. Półton powstaje przez mieszanie z szarością. Te trzy operacje tworzą pełną paletę z jednego koloru bazowego.
Zrozumienie różnicy między odcieniami, tonami i półtonami jest fundamentalne dla teorii koloru.
Jak działa generowanie odcieni
Generator odcieni przyjmuje kolor bazowy (np. #3b82f6) i tworzy zakres jaśniejszych i ciemniejszych wariantów przez manipulację jasnością w HSL.
- Manipulacja HSL — generator reguluje wartość L przy stałych H i S
- Obliczanie kroków — zakres dzielony na równe interwały
- Mieszanie kolorów — niektóre generatory mieszają z bielą/czernią/szarością
Wypróbuj za darmo — bez rejestracji
Generuj odcienie koloru →Kiedy generować odcienie
Palety odcieni są niezbędne do tworzenia spójnych projektów.
- Systemy projektowe — generuj pełną skalę kolorów (50-950) z głównego koloru marki
- Tematyzacja UI — twórz stany hover, aktywny, fokus i wyłączony
- Kontrast dostępności — testuj kombinacje względem wymagań WCAG
Często zadawane pytania
Jaka jest różnica między odcieniem ciemnym a jasnym?
Odcień ciemny to kolor zmieszany z czernią, jasny z bielą.
Ile odcieni potrzebuje system projektowy?
Większość używa 10 kroków (50-950) według konwencji Tailwind CSS.
Czy mogę generować dostępne kombinacje?
Tak. Generując pełną paletę można testować pary względem wymagań WCAG.
Powiązane narzędzia
Konwerter kolorów: HEX, RGB, HSL — Konwertuj dowolny format kolorówFormaty kolorów różnią się w zależności od narzędzia. Poznaj różnice między HEX, RGB, HSL.Czytaj artykuł → Generator palety kolorów: Buduj harmonijne schematyGeneruj piękne palety kolorów używając zasad harmonii kolorów.Czytaj artykuł → Sprawdzanie kontrastu: przewodnik zgodnosci WCAG AA i AAADowiedz sie, jak dzialaja wspolczynniki kontrastu WCAG, roznice miedzy poziomami AA i AAA, oraz wskazowki dotyczace dostepnego designu.Czytaj artykuł →