Generator odcieni koloru
Zamień jeden bazowy kolor HEX w skalę odcieni 50-950 w stylu Tailwind, mieszając go w stronę bieli i czerni; każdy stopień z próbką i kopiowalnym HEX-em.
Generator odcieni koloru — Wprowadź jeden kolor bazowy w HEX i natychmiast uzyskaj 11-stopniową skalę odcieni (50, 100, 200 … 900, 950), tworzoną przez mieszanie koloru w stronę bieli dla stopni jasnych i w stronę czerni dla ciemnych — z tą samą numeracją, jakiej używa Tailwind CSS. Każdy stopień pokazuje swoją próbkę i wartość HEX z przyciskiem kopiowania jednym kliknięciem. Wszystko działa w całości w Twojej przeglądarce; żaden kolor nigdy nie jest wysyłany na serwer.
Czym jest Generator odcieni koloru?
Generator odcieni koloru to darmowe narzędzie online, które zamienia jeden bazowy kolor HEX w pełną skalę rozjaśnień i przyciemnień, ponumerowaną od 50, 100, 200 aż do 900 i 950, tak jak tokeny kolorów w Tailwind CSS. Buduje przejście, liniowo mieszając Twój kolor bazowy w stronę bieli dla jaśniejszych stopni (50-400) i w stronę czerni dla ciemniejszych (600-950), zachowując 500 jako sam kolor bazowy. Projektanci i programiści front-end używają go do generowania spójnej skali kolorów dla systemu projektowego, ustawiania właściwości niestandardowych CSS lub kolorów motywu Tailwind oraz wybierania dostępnych jasnych/ciemnych wariantów koloru marki. Każdy stopień jest pokazywany jako próbka obok swojej wartości HEX z przyciskiem kopiowania jednym kliknięciem.
Jak używać Generator odcieni koloru
- Wpisz kolor bazowy w polu Kolor bazowy (HEX) w formacie #rrggbb lub #rgb albo kliknij dużą próbkę próbnika kolorów, aby wybrać go wizualnie.
- Skala 50-950 aktualizuje się natychmiast: jasne odcienie (50-400) są mieszane w stronę bieli, 500 to Twój kolor bazowy, a ciemne odcienie (600-950) są mieszane w stronę czerni.
- Odczytaj każdy wiersz, aby obok siebie zobaczyć numer stopnia (50 … 950), jego próbkę koloru i wartość HEX.
- Kliknij przycisk kopiowania na końcu dowolnego wiersza, aby skopiować wartość HEX tego stopnia do schowka.
- Skopiuj HEX koloru bazowego przyciskiem kopiowania obok pola wprowadzania, gdy potrzebujesz tylko stopnia 500.
Przykłady
Najjaśniejszy stopień (50) z niebieskiej bazy
Wejście
#4f86f7
Wyjście
#f6f9ff
Najciemniejszy stopień (950) z tej samej bazy
Wejście
#4f86f7
Wyjście
#0b1323
Tworzenie kolorów motywu Tailwind
Wprowadź kolor swojej marki, a następnie kopiuj stopnie od 50 do 950 jeden po drugim do koloru motywu Tailwind (np. colors.brand) lub do właściwości niestandardowych CSS, otrzymując gotową do użycia skalę od jasnej do ciemnej, zgodną z domyślną numeracją odcieni Tailwind.
Najczęściej zadawane pytania
- Jakie formaty koloru mogę wprowadzić?
- Kolor bazowy wprowadza się jako wartość HEX w formacie #rrggbb (sześć cyfr) lub w skróconej formie #rgb (trzy cyfry). Jeśli wartość nie jest prawidłowym kolorem HEX, pojawia się komunikat 'Invalid HEX color' i żadna skala nie jest generowana. Każdy stopień na wyjściu jest pokazywany jako wartość HEX #rrggbb.
- Jak obliczane są odcienie?
- Każdy stopień to liniowe zmieszanie Twojego koloru bazowego z czystą bielą lub czystą czernią. Stopnie 50-400 są mieszane w stronę bieli w malejących proporcjach, stopień 500 to niezmieniony kolor bazowy, a stopnie 600-950 są mieszane w stronę czerni w rosnących proporcjach. Numeracja odpowiada skalom kolorów Tailwind CSS.
- Dlaczego stopień 500 czasami nie odpowiada dokładnie numerowi mojego koloru bazowego?
- Stopień 500 to zawsze dokładnie Twój kolor bazowy. Narzędzie nie centruje ponownie koloru na percepcyjnej krzywej jasności, więc jeśli Twoje dane wejściowe są bardzo jasne lub bardzo ciemne, jaśniejsza lub ciemniejsza połowa skali będzie miała mniejszy zakres — wybierz bazę w średnim tonie, aby uzyskać najbardziej równomierne przejście.
- Czy mogę wybrać kolor wizualnie zamiast wpisywać HEX?
- Tak. Kliknij dużą próbkę z wbudowanym próbnikiem kolorów, aby wybrać kolor; pole HEX aktualizuje się automatycznie, a cała skala 50-950 jest natychmiast przeliczana w miarę jej zmiany.
- Czy moje dane kolorów są gdzieś przesyłane?
- Nie. Wszystko działa w całości w Twojej przeglądarce przy użyciu lokalnych obliczeń kolorów — żadna wartość koloru nigdy nie jest wysyłana na serwer, więc narzędzie działa offline i zachowuje prywatność Twojej palety.
Powiązane narzędzia
Kod na obraz
Zamień fragment kodu na dopracowaną kartę PNG z podświetlaniem składni w przeglądarce, z motywem, tłem gradientowym lub przezroczystym oraz wypełnieniem — bez przesyłania.
Sprawdzanie kontrastu kolorów
Sprawdź współczynnik kontrastu WCAG między kolorem HEX pierwszego planu a tłem i zobacz, czy spełnia AA i AAA dla tekstu normalnego i dużego.
Mikser kolorów
Zmieszaj dwa kolory HEX w wybranej proporcji w przestrzeni RGB lub Lab i odczytaj powstały kolor pośredni jako próbkę oraz kopiowalną wartość HEX.
Symulator daltonizmu
Prześlij obraz i zobacz podgląd tego, jak wygląda przy protanopii, deuteranopii, tritanopii lub całkowitej ślepocie barw, a następnie pobierz symulowany wynik.