Generator odcieni koloru
Odcień (shade) to wynik zmieszania koloru z czernią; każdy krok robi się ciemniejszy. Generator bierze kolor bazowy w formacie HEX i tworzy 3–20 kroków (domyślnie 10) coraz ciemniejszych odcieni, a także jaśniejsze rozjaśnienia tej samej bazy. Przydatne do drabin palet systemu projektowego (500 → 900), stanów wciśnięty/aktywny przycisków, kolorów tekstu pozostających czytelnymi i nakładek cieni. Każdy krok jest pokazywany jako próbka z wartością hex gotową do skopiowania.
Jak działa generowanie odcieni
-
1
Wybierz kolor bazowy
Użyj próbnika kolorów albo w trybie krokowym przekaż wartość hex w adresie URL strony. Baza leży między zakresem rozjaśnień a zakresem odcieni.
-
2
Wybierz liczbę kroków
3–20 kroków, domyślnie 10. Więcej kroków daje łagodniejszą drabinę; mniej kroków daje mocniejsze skoki.
-
3
Mieszaj z czernią w równych krokach
Każdy krok mnoży kanały czerwony, zielony i niebieski przez ten sam współczynnik, co odpowiada mieszaniu z czernią (albo bielą dla rozjaśnień) w równych krokach. Przy 10 krokach każdy z nich jest o około 9 % ciemniejszy lub jaśniejszy. Barwa pozostaje identyczna z bazą.
-
4
Odczytać skalę
Każda próbka wyświetla swoją wartość hex. Zaznacz tekst, aby skopiować go do CSS, motywu Tailwind albo pliku design tokens.
Odcień, rozjaśnienie i tonowanie
- Odcień (shade): kolor + czerń → ciemniejszy.
- Rozjaśnienie (tint): kolor + biel → jaśniejszy.
- Tonowanie (tone): kolor + szarość → mniej nasycony.
Ten generator tworzy zarówno odcienie, jak i rozjaśnienia z tej samej bazy. Para rozjaśnienie + odcień zwykle tworzy paletę systemu projektowego (np. brand-100 do brand-900, gdzie 500 to baza).
Przykładowa skala: #3B82F6 (Tailwind blue-500)
| Krok | Hex | Domieszka | Rola w systemie projektowym |
|---|---|---|---|
| 0 | #3B82F6 | Baza | Główny kolor marki (np. blue-500) |
| 1 | #316CCD | 17% czerni | Stan hover |
| 2 | #2756A4 | 33% czerni | Stan wciśnięty/aktywny (blue-600) |
| 3 | #1D417B | 50% czerni | blue-700 |
| 4 | #132B52 | 67% czerni | blue-800 |
| 5 | #091528 | 83% czerni | blue-900 |
Tabela pokazuje skalę 5-krokową: każdy krok to jedna szósta drogi do czerni.
Jak obliczane są kroki
Narzędzie mnoży kanały czerwony, zielony i niebieski bazy przez ten sam współczynnik w każdym kroku. Odpowiada to mieszaniu z czernią w zakresie odcieni i z bielą w zakresie rozjaśnień, w równych krokach. Przy 10 krokach każdy z nich jest o około 9 % ciemniejszy lub jaśniejszy od poprzedniego.
Ponieważ wszystkie kanały są mnożone równo, barwa bazy zostaje zachowana dokładnie: niebieska baza pozostaje niebieska, a zielona zielona. Mieszanie z czernią obniża też nasycenie razem z jasnością, więc ciemne kroki wyglądają naturalnie zamiast świecić. Obniżanie samej jasności, bez ruszania nasycenia, zostawia ciemne kolory przesycone.
Używanie odcieni w UI
- Przycisk: baza dla stanu spoczynku, 1-2 kroki ciemniej dla hover, 2-3 kroki ciemniej dla aktywnego/wciśniętego.
- Tekst zasadniczy: 2-3 kroki ciemniej niż baza zapewnia czytelność na bieli; jaśniej dla tekstu drugorzędnego.
- Obramowanie / linia podziału: 1-2 kroki ciemniej niż tło, na tyle, by wydzielić, nie przytłaczając.
- Cienie: najciemniejszy krok (albo ciemniejszy) ze zmniejszonym kanałem alfa, zamiast nowej szarości.
- Wizualizacja danych: użyj odcieni jednej barwy dla skali sekwencyjnej (wielkości wartości) albo zestaw odcienie dwóch barw dla skal rozbieżnych (wartości dodatnie i ujemne).
Częste pułapki
- Za dużo kroków zlewa się w nierozróżnialne pasma. Skale 10-krokowe działają dobrze, bo każdy krok jest o około 9 % ciemniejszy; przy 20 krokach różnice stają się subtelne. Dla mocnych kontrastów wybierz 3-5 kroków.
- Przesunięcie barwy jest tu niemożliwe: każdy krok mnoży wszystkie kanały równo, więc czerwień pozostaje czerwienią, a zieleń zielenią. Przesunięcie barwy pojawia się przy interpolacji między dwoma różnymi kolorami, czego to narzędzie nie robi.
- Ignorowanie dostępności: odcienie, które wyglądają harmonijnie, mogą nie spełniać kontrastu WCAG względem tła. Zawsze sprawdzaj kontrast na każdym kroku.
- Skale tylko z odcieni wydają się przytłaczające na ciemnym tle. Zestaw je ze skalą rozjaśnień dla użytecznego trybu ciemnego.
Najczęściej zadawane pytania
Dla systemu projektowego 5 kroków odcieni + 5 kroków rozjaśnień (10 łącznie wokół bazy) to częsta konwencja. Do szybkich kolorów stanów UI (hover, aktywny) wystarczą 3 kroki.
Równe mieszanie stosowane tutaj trzyma każdy krok na prostej linii między bazą a czernią, więc środkowe kroki pozostają czyste. Błotnisty środek zwykle pochodzi z narzędzia, które interpoluje między dwoma różnymi kolorami albo obniża jasność bez obniżania nasycenia.
Ciemne kolory mają już mało miejsca, by pociemnieć, zanim staną się czarne; ciemnofioletowa baza daje tylko 2-3 wyraziste kroki, zanim skala się zapadnie. Wybierz bazę o średniej jasności dla bogatszych skal.
Podobne w zamyśle, ale mieszanie z czernią obniża nasycenie wraz z jasnością, co zwykle wygląda naturalniej. Czyste zmniejszanie jasności utrzymuje wysokie nasycenie i może dać przesycone ciemne kolory.
Powiązane narzędzia
Tabela ASCII
Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.
Referencja znaków HTML
Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.
Generator losowych liter
Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.
Konwerter ASCII na binarny
Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.
Konwerter binarnego na ósemkowy
Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.
Próbnik kolorów HEX
Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.