Generator odcieni kolorów

Wszystkie narzędzia

Generuj pełen zakres tintów i cieni z jednego koloru — wybierz krok ciemnienia/rozjaśniania i liczbę odcieni, a następnie kopiuj dowolną wartość natychmiast.

Kolor bazowy
Krok
%
O ile jaśniejszy/ciemniejszy staje się każdy odcień na krok (1–25%).
Liczba odcieni
Ile tintów i cieni wygenerować po każdej stronie koloru bazowego.
Gradient
Wygenerowane odcienie

Wybierz kolor bazowy, procent kroku i liczbę — każdy tint i cień jest obliczany natychmiast w Twojej przeglądarce.

O Generator odcieni kolorów

Generator odcieni kolorów rozszerza pojedynczy kolor w pełną gamę jaśniejszych i ciemniejszych wariantów. Podaj kolor bazowy, a narzędzie wygeneruje stopniowo jaśniejsze tinty z jednej strony i stopniowo ciemniejsze cienie z drugiej — klasyczną rampę w stylu 50–900 stosowaną we współczesnych systemach projektowych.

Dwa ustawienia kształtują wynik: procent kroku określa, o ile jaśniejszy lub ciemniejszy staje się każdy odcień (1–25% na krok), a liczba określa, ile tintów i cieni pojawia się po każdej stronie koloru bazowego, do dziesięciu. Pasek gradientu pokazuje podgląd całej rampy na pierwszy rzut oka.

Generowanie odbywa się natychmiast w Twojej przeglądarce w miarę pisania — nic nie jest wysyłane na serwer. Skopiuj dowolną pojedynczą wartość, pełną listę lub całą rampę jako zmienne CSS, gotowe do umieszczenia w pliku tokenów projektowych lub skali kolorów w stylu Tailwind.

Jak korzystać z Generator odcieni kolorów

  1. Wybierz kolor bazowy za pomocą selektora lub wpisz wartość; kliknij „Losowy kolor” dla inspiracji.
  2. Ustaw procent kroku, aby kontrolować, jak mocno każdy odcień się rozjaśnia lub przyciemnia.
  3. Wybierz liczbę odcieni, aby zdecydować, ile tintów i cieni pojawi się po każdej stronie.
  4. Kliknij próbkę, aby ją skopiować, lub użyj „Kopiuj wszystko” i „Kopiuj zmienne CSS” dla całej rampy.

Najczęściej zadawane pytania

Tak, całkowicie. Wszystkie tinty i cienie są obliczane na bieżąco w Twojej przeglądarce, więc nie ma żadnych kosztów, konta ani limitu liczby generowanych ramp.

Tint to Twój kolor bazowy zmieszany w kierunku bieli (jaśniejszy), podczas gdy cień to kolor bazowy zmieszany w kierunku czerni (ciemniejszy). Generator tworzy obie kierunki naraz, oznaczone jako „Tinty (jaśniejsze)” i „Cienie (ciemniejsze)” wokół Twojego koloru bazowego.

Ustaw liczbę na 4 lub 5 na stronę, aby uzyskać od dziewięciu do jedenastu próbek łącznie, z kolorem bazowym pośrodku. Krok w okolicach 8–10% zwykle daje odstępy podobne do skal 50–900 używanych w popularnych frameworkach.

Małe kroki (3–6%) dają subtelne warianty hover i obramowań; średnie kroki (8–12%) sprawdzają się w pełnych rampach systemów projektowych; duże kroki (15–25%) tworzą zestawy o wysokim kontraście w stylu plakatowym. Obserwuj podgląd gradientu — dobra rampa powinna ciemnieć równomiernie, bez pasmowania.

Tak. „Kopiuj zmienne CSS” eksportuje całą rampę jako nazwane niestandardowe właściwości CSS, a „Kopiuj wszystko” daje zwykłą listę wartości, którą możesz wkleić wszędzie, od map SCSS po obiekty motywów JavaScript.
Udostępnij
Powiązane narzędzia
Generator palet kolorów Twórz harmonijne palety kolorów za pomocą interaktywnego koła barw — stosuj reguły harmonii, takie jak analogiczne, komplementarne lub triada, i kopiuj dowolną wartość natychmiast. Bezpłatnie
Mieszacz kolorów Mieszaj kolor startowy z końcowym przez maksymalnie 10 kroków — podglądaj gradient, chwytaj każdy odcień i kopiuj dowolny format natychmiast. Bezpłatnie
Eksporter palet Wklej lub zaimportuj zestaw kolorów i eksportuj je natychmiast do zmiennych CSS, SCSS, konfiguracji Tailwind, JSON lub próbek SVG — ostatni krok dla każdej palety. Bezpłatnie
Ekstraktor kolorów z obrazu Wyodrębnij dopracowaną, gotową do kopiowania paletę kolorów z dowolnego obrazu. Bezpłatnie
Paleta kolorów bezpiecznych dla sieci Przeglądaj klasyczne 216 kolorów bezpiecznych dla sieci jako klikalną siatkę próbek — sortuj według barwy lub kolejności kostki, filtruj według hex i kopiuj dowolną wartość HEX lub rgb() natychmiast. Bezpłatnie
Dobór czcionek i katalog Google Fonts Przeglądaj wyselekcjonowany katalog popularnych czcionek Google Fonts z podglądem na żywo, filtruj według kategorii i wyszukuj po nazwie, a następnie kopiuj gotowy do wklejenia CSS i odkrywaj sugerowane pary czcionek — wszystko w przeglądarce. Bezpłatnie
Popularne wyszukiwania
generator odcieni koloru rozjaśnienia i odcienie rozjaśnij i przyciemnij kolor odcienie koloru generator odcieni twórz odcienie koloru
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.
Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.