Rodzina generatorów

Generator palet kolorów

Zacznij od jednego koloru, wybierz zasadę harmonii i wygeneruj paletę, której naprawdę możesz użyć w interfejsach, ilustracjach, prezentacjach i systemach marki. Każdy wynik zawiera czytelne formaty HEX, RGB, HSL, zmienne CSS oraz wyjście JSON.

  • Podgląd palety na żywo
  • Wiele schematów harmonii
  • Eksporty gotowe dla deweloperów
  • Wskazówki dot. kontrastu próbek

Generuj paletę

Użyj koloru bazowego i dostosuj przesunięcie odcienia, nasycenia i jasności. Generator bezpiecznie ogranicza wartości, zapętla odcień przy 360 stopniach i zaokrągla wartości eksportu do liczb całkowitych RGB oraz jednego miejsca po przecinku dla procentów HSL.

Wpisz 3-cyfrowy lub 6-cyfrowy kod hex, np. #C96C3D lub #f80.
Różne schematy zmieniają rozstawienie odcieni, podczas gdy suwak rozpiętości kształtuje wariację wewnątrz zestawu.
Aby zachować dokładność harmonii, niektóre schematy powtarzają interwały przy żądaniu większej liczby kolorów niż wzorzec podstawowy.
48%
Mała rozpiętość pozostaje bliżej tonu bazowego. Większa rozpiętość bardziej oddala od siebie jasne i ciemne akcenty.
Paleta gotowa.

Wyniki

Pasek podglądu pokazuje paletę jako sekwencję od lewej do prawej. Każda próbka zawiera rekomendację kontrastu dla tekstu na tym konkretnym kolorze.

Eksport

Użyj selektora formatu, aby przełączać się między zmiennymi niestandardowymi CSS a formatem JSON. Akcje kopiowania są wyłączone tylko wtedy, gdy API schowka przeglądarki jest niedostępne.

HEX RGB HSL CSS JSON

Jak to działa

Generator konwertuje bazowy kolor hex na HSL, nakłada interwały odcieni w oparciu o wybraną zasadę harmonii, a następnie dostosowuje nasycenie i jasność w całej palecie zgodnie z wartością rozpiętości.

1. Oczyszczanie danych

Dane wejściowe Hex są przycinane, normalizowane i rozwijane w razie potrzeby. Nieprawidłowe wpisy nie psują strony, a ostatnia poprawna paleta pozostaje widoczna.

2. Matematyka palety

Wartości odcienia zapętlają się wokół koła kolorów. Nasycenie i jasność są ograniczane w przedziale od 0 do 100, aby zapobiec generowaniu niepoprawnych kolorów.

3. Eksport produkcyjny

Eksporty obejmują nazewnictwo, zaokrąglone wartości i stabilną kolejność, dzięki czemu wynik można wkleić bezpośrednio do tokenów projektowych lub arkuszy stylów.

Kolory mogą wyglądać inaczej na różnych ekranach, przeglądarkach i systemach operacyjnych. Traktuj to narzędzie jako punkt wyjścia, a następnie zweryfikuj wybory w docelowym środowisku.