Przejdź do treści
100% lokalnie

Generator palet kolorów

Zmień jeden kolor podstawowy na pełną paletę przy użyciu reguł harmonii kolorów.

Wejście
0
0
Wynik

Generator palet kolorów

Wpisz kolor podstawowy jako kod hex, wartość rgb() lub hsl() i to narzędzie stworzy pełną paletę zgodnie z zasadami harmonii barw, nie tylko gradientem jasności tego samego odcienia. Wybierz kolory komplementarne dla jednego przeciwnego koloru, rozdzielone komplementarne lub triadyczne dla zbilansowanego kontrastu, tetradyczne dla czterokołorowego prostokąta, analogiczne dla sąsiednich odcieni, które naturalnie się łączą, lub monochromatyczne dla tonów i odcieni jednego odcienia.

Opcja harmonii decyduje, ile kolorów będzie w wyniku — komplementarne zawsze zwracają dwa, triadyczne i rozdzielone komplementarne zwracają trzy, tetradyczne zwracają cztery — podczas gdy liczba kolorów i kąt kroku odcienia dotyczą tylko analogicznych i monochromatycznych, gdzie wybierasz liczbę kolorów i odległość między nimi. Obliczaj w HSL dla klasycznej matematyki koła kolorów, lub przełącz się na OKLCH, który utrzymuje tę samą postrzeganą jasność na wszystkich odcieniach, aby paleta nie wyglądała tak, że jedna próbka jest nienaturalnie ciemna lub wytarta obok reszty. Suwaki dostosowania nasycenia i jasności dokładnie dostrajają całą paletę po zbudowaniu harmonii, a opcja formatu koloru drukuje każdy wynik jako hex, rgb(), hsl() lub oklch().

Każda próbka jest sprawdzana pod kątem WCAG AA (4,5:1) jako tekst na białym i czarnym tle, oznaczona ptaszkiem lub krzyżykiem obok każdego wskaźnika — przydatne do wyboru, które kolory w wygenerowanej paletcie są bezpieczne dla tekstu w stosunku do samej dekoracji. Eksportuj wynik jako zwykłą listę, blok niestandardowych właściwości CSS gotowy do wklejenia w arkusz stylów, lub obiekt koloru konfiguracji Tailwind.

Wszystko działa lokalnie w twojej przeglądarce — kolor, który wpiszesz, nigdy nie jest nigdzie wysyłany. Skopiuj wynik, pobierz go jako plik .txt, lub wyślij go do wejścia innego narzędzia, aby kontynuować pracę.

Częste pytania

Jakie formaty wejścia przyjmuje jako kolor podstawowy?
Kody hex (#3b82f6, #38f, z # lub bez #), rgb()/rgba() i hsl()/hsla(). Wpisz jeden z nich a paleta aktualizuje się natychmiast.
Jaka jest różnica między HSL i OKLCH przy obliczaniu?
HSL to klasyczna matematyka koła kolorów i jest szybka i przewidywalna. OKLCH jest przestrzenią postrzeganą równomiernie, więc paleta w niej stworzona utrzymuje bardziej równomierną postrzeganą jasność na wszystkich odcieniach zamiast tego, żeby niektóre kolory wyglądały dziwnie ciemniej lub jaśniej niż reszta.
Dlaczego zmiana "liczby kolorów w paletcie" wpływa tylko na niektóre harmonie?
Kolory komplementarne, rozdzielone komplementarne, triadyczne i tetradyczne są ustalone z definicji — dwa, trzy, trzy i cztery kolory. Liczba wpływa tylko na analogiczne i monochromatyczne, które mogą rozsądnie mieć dowolną liczbę kolorów.
Co oznacza zaznaczenie/krzyżyk AA obok każdego koloru?
To jest wskaźnik kontrastu WCAG tego koloru używanego jako tekst na białym tle i na czarnym tle, ze znakiem zaznaczenia gdy przekracza próg 4,5:1 AA i krzyżykiem gdy nie.
Czy mój kolor jest gdzieś wysyłany?
Nie. Paleta jest generowana całkowicie w twojej przeglądarce — nic z tego, co wpiszesz, nie jest wysyłane na serwer.