Odcienie jasne i ciemne
Generator odcieni tworzy jaśniejsze warianty (tinty — zmieszane z bielą) i ciemniejsze warianty (shade'y — zmieszane z czernią) dowolnego koloru bazowego w 5, 10 lub 20 krokach, z wynikiem w postaci zmiennych CSS.
O tym narzędziu
Generator odcieni tworzy jaśniejsze warianty (tinty — zmieszane z bielą) i ciemniejsze warianty (shade'y — zmieszane z czernią) dowolnego koloru bazowego w 5, 10 lub 20 krokach, z wynikiem w postaci zmiennych CSS.
Jak używać
- Wybierz kolor bazowy.
- Wybierz 5, 10 lub 20 kroków.
- Kliknij dowolną próbkę, aby skopiować jej wartość hex.
- Kliknij Copy as CSS Variables, aby wyeksportować całą skalę.
Warto wiedzieć
- Tint to kolor zmieszany z bielą; shade to kolor zmieszany z czernią.
- Generator miesza w równych krokach RGB, więc każdy krok zmienia kolor o tyle samo.
- Design systemy, takie jak Tailwind, używają skali 50–900 zbudowanej z jaśniejszych i ciemniejszych odcieni każdego koloru marki.
- Sprawdzaj kontrast kolorów tekstu wziętych ze skali, bo środkowe kroki na białym tle często nie spełniają WCAG AA.
Działa w całości w przeglądarce — nic, co wpiszesz, nie jest wysyłane ani zapisywane.
Najczęściej zadawane pytania
Czym różni się tint od shade'a?
Tint rozjaśnia kolor przez dodanie bieli; shade przyciemnia go przez dodanie czerni. Tone dodaje szarość.
Ile odcieni powinien mieć kolor w design systemie?
Typowo około 10 kroków, np. 50, 100 … 900 w Tailwind. To wystarczający zakres na tła, obramowania, tekst i stany hover.
Jak użyć skali w CSS?
Skopiuj skalę jako właściwości niestandardowe i odwołuj się do nich przez var(--color-name), np. w tłach, obramowaniach czy stanach hover.
Dlaczego niektóre jasne odcienie wyglądają na wyblakłe?
Mieszanie z bielą obniża nasycenie, a nie tylko zwiększa jasność. Aby uzyskać żywsze jasne warianty, dostosuj nasycenie osobno w HSL.