Jak zrobić jaśniejsze i ciemniejsze wersje koloru?
Generator odcieni i tonów (shades & tints) - tinty (mieszanie z białym) po lewej, baza w środku, shades (mieszanie z czarnym) po prawej.
Interpolacja w OKLCH zachowuje odcień podczas mieszania - blue staje się jaśniejszy/ciemniejszy, ale dalej jest blue, nie szarawym.
Świetne do hover/active states, button variants, dark mode pairs. Wszystko lokalnie.
Jak korzystać
- Wybierz kolor bazowy (HEX, color-picker, pipeta z ekranu).
- Wybierz liczbę kroków: 3 (subtelna), 5 (zbalansowana), 7 (szczegółowa), 10 (przejście jak Tailwind).
- Po prawej widzisz pasek: tints (z bielą) → baza ★ → shades (z czernią). Klik kopiuje HEX.
- U dołu CSS variables gotowe do wklejenia do `:root`.
- Tip: dla 10-step generator → bardzo bliski Tailwind 100/200/.../900 z Twoim brand-colorem.
Do czego się przydaje
Gdzie tinty i shades się przydają - typowe zastosowania:
- Hover / active states - button bazowy + tint dla hover (jaśniejszy) + shade dla active (ciemniejszy).
- Ghost / outline buttons - tint-300 jako tło, base jako border, shade-700 jako text.
- Dark mode - shade-700 i shade-800 to kandydaci na dark-mode tła.
- Disabled state - tint-200 jako "ghosted" wersja przycisku.
- Cards z elevation - tint-100 jako tło karty na białym body.
- Brand consistency - gdy brand color #ef4444 jest "za jaskrawy" na header, użyj shade-300 jako bardziej zrównoważoną alternatywę.
- Edukacja - zobacz że "blue 50% pure" w OKLCH wygląda perceptualnie 50%, w HSL nie - dlatego nasze tinty/shades są równe wizualnie.
Pytania i odpowiedzi
Tint = oryginalny kolor + biały (jaśniejsza wersja). Shade = oryginalny kolor + czarny (ciemniejsza wersja). Różne od "tone" (oryginał + szary), którego nie generujemy, bo rzadko używany.