tigtools

Generator palet kolorów

Wybierz kolor bazowy i harmonię, a następnie skopiuj paletę w formacie używanym w Twoim projekcie.

Działa w przeglądarce Bez rejestracji

Paleta

  • #3366cc
  • #8c6500

Zablokowane kolory nie zmieniają się po zmianie koloru bazowego.

Eksportuj jako

Jak używać

  1. Wpisz kolor bazowy lub wybierz go próbnikiem. Opcja „Nowy losowy kolor bazowy” wybierze go za Ciebie.
  2. Wybierz harmonię. Opcja „Odcienie i rozjaśnienia” tworzy 11-stopniową skalę od bardzo jasnego do bardzo ciemnego koloru.
  3. Zablokuj dowolne kolory, które chcesz zachować, a potem testuj kolejne kolory bazowe.
  4. Wybierz HEX, niestandardowe właściwości CSS lub JSON, ustaw nazwę i skopiuj kod.

Jak to działa

Harmonie uzyskuje się przez obracanie odcienia na kole barw: kolory dopełniające różnią się odcieniem o 180°, analogiczne to sąsiednie odcienie oddalone o 30° i 60° po obu stronach, triadyczne obejmują trzy odcienie oddalone od siebie o 120°, tetradyczne — cztery odcienie oddalone o 90°, a rozdzielone dopełniające — dwa odcienie sąsiadujące z dopełniającym (150° i 210°).

Obrót odbywa się w przestrzeni OKLCH, a nie HSL. OKLCH utrzymuje stałą postrzeganą jasność, dzięki czemu żółty i niebieski kolor z tej samej palety wyglądają na równie jasne, zamiast razić żółcią. Jeśli obrócony kolor wykracza poza zakres wyświetlany przez ekrany sRGB, jego chroma jest zmniejszana, aż kolor się w nim zmieści, przy zachowaniu jasności i odcienia.

Skala odcieni i rozjaśnień wykorzystuje stałe kroki jasności OKLCH oznaczone od 50 do 950, podobnie jak w Tailwind CSS. W pobliżu bieli i czerni chroma jest zmniejszana, aby najjaśniejsze odcienie nie wyglądały neonowo. Harmonie to punkt wyjścia — przed użyciem kolorów w treści sprawdź kontrast tekstu i tła.

Przykłady

Kolor marki i akcent

Dla koloru bazowego #3366cc opcja „Dopełniający” dodaje #8c6500 — ciepły odcień ochry o tej samej jasności OKLCH. Połączenie niebieskiego z żółtopomarańczowym często stosuje się jako kolor akcentowy przy niebieskiej identyfikacji marki.

Tokeny projektu dla biblioteki komponentów

Wybierz „Odcienie i rozjaśnienia”, ustaw nazwę na „primary” i wyeksportuj zmienne CSS. Otrzymasz zmienne od --primary-50 do --primary-950, gotowe do użycia jako tła (50–100), obramowania (200–300) i tekst (700–900).

Zachowanie jednego koloru podczas eksperymentowania

Zablokuj drugi kolor palety triadycznej, a potem testuj różne kolory bazowe. Zablokowany kolor zachowa wartość HEX, a pozostałe będą się zmieniać.

Często zadawane pytania

Dlaczego moje kolory różnią się od kolorów z narzędzia korzystającego z koła barw HSL?

To narzędzie obraca odcień w przestrzeni OKLCH, czyli percepcyjnej przestrzeni barw. Kąty odcienia nie pokrywają się dokładnie z kątami w HSL, dlatego „przeciwna” barwa może nieznacznie różnić się od tej uzyskanej w narzędziu korzystającym z HSL.

Czy mogę użyć JSON w Tailwind CSS?

JSON mapuje nazwy na wartości HEX w formacie akceptowanym przez Tailwind w konfiguracji motywu. W Tailwind 4 możesz też wkleić zmienne CSS do bloku @theme po zmianie ich nazw na --color-…

Czy wygenerowane palety są dostępne?

Nie automatycznie. Harmonia nie określa kontrastu między tekstem a tłem. Sprawdź każdą planowaną kombinację za pomocą narzędzia do sprawdzania kontrastu.

Prywatność

Palety są generowane w przeglądarce. Kolory nie są nigdzie wysyłane ani przechowywane.