Jak korzystać: Generator palet kolorów i kontrast WCAG
- 1
Zacznij od koloru
Wpisz lub wybierz kolor bazowy, a potem wybierz harmonię, na przykład analogiczną, triadę albo komplementarną rozdzieloną – albo wylosuj paletę.
- 2
Zablokuj i dopracuj
Zablokuj próbki, które Ci się podobają, zanim znowu losujesz, edytuj dowolną próbkę bezpośrednio albo wyciągnij ze zdjęcia pięć dominujących kolorów.
- 3
Sprawdź czytelność
Otwórz Kontrast, aby przetestować tekst na tle według WCAG 2.2 AA i AAA, zastosuj proponowaną poprawkę i obejrzyj podgląd palety dla osób z zaburzeniami widzenia barw.
- 4
Eksportuj
Skopiuj zmienne CSS, motyw Tailwind v4 lub konfigurację v3, SCSS albo JSON z odcieniami 50–950, albo pobierz próbki PNG.
Limity i Pro
Wszystko za darmo: palety po 5 kolorów, 6 harmonii, nielimitowane losowanie i eksporty, obrazy do 50 MB do pobierania kolorów, próbki PNG o szerokości 1600 pikseli.
O narzędziu: Generator palet kolorów i kontrast WCAG
Generator palet kolorów tworzy schemat pięciu kolorów i wszystko, czego wokół niego potrzebuje system projektowy. Harmonie obracają odcień bazowy na kole barw HSL: analogiczna przesuwa się o 30° w każdą stronę, komplementarna dodaje odcień przeciwległy, komplementarna rozdzielona bierze dwa odcienie obok przeciwległego, triada rozmieszcza trzy odcienie co 120°, tetrada używa kwadratu co 90°, a monochromatyczna zachowuje jeden odcień w pięciu poziomach jasności. Tryb losowy uwzględnia zablokowane próbki, a opcja obrazu grupuje piksele zdjęcia w przestrzeni OKLab, by znaleźć pięć najczęstszych, wyraźnie różnych kolorów.
Dla każdego koloru zakładka Odcienie tworzy 11-stopniową skalę 50–950 w OKLCH, w której stopień najbliższy Twojemu kolorowi ma dokładnie jego wartość, albo 13 tonów systemu HCT z Material 3 wraz z pięcioma paletami kluczowymi, które wyznaczyłby motyw Material. Kontrola kontrastu korzysta ze wzoru luminancji z WCAG 2.2, nigdy nie zaokrągla współczynnika w górę i podpowiada najbliższy kolor spełniający wymagania, zmieniając tylko jasność i zachowując odcień. Siatka pokazuje współczynnik każdej pary z palety względem bieli i czerni.
Symulacje obejmują protanopię, deuteranopię, tritanopię i achromatopsję z macierzami Machado oraz oznaczają próbki, które zlewają się ze sobą. Eksporty nazywają kolory według odcienia i przyjmują Twoje własne nazwy. Narzędzie nie ocenia, czy kolory pasują do marki, a symulacje tylko przybliżają to, jak widzą osoby z zaburzeniami widzenia barw; nie zastąpią testów z ich udziałem.
Prywatność
Wszystkie obliczenia kolorów, kontroli kontrastu i analiza obrazu odbywają się w tej karcie: zdjęcie użyte do wyboru kolorów jest odczytywane z dysku do małego canvasu i nigdy nie jest przesyłane na serwer. Paletę można zapisać w adresie strony, aby skopiowany link ją otwierał; na serwerze nie zapisujemy niczego.
Funkcje
Sześć harmonii i kolory z obrazu
Od analogicznej do tetrady z jednego koloru bazowego, losowanie z blokadami albo dominujące kolory zdjęcia.
Kontrast WCAG 2.2 z poprawkami
AA i AAA dla zwykłego i dużego tekstu oraz grafiki interfejsu, a najbliższy spełniający wymagania kolor jest o jedno kliknięcie dalej.
Eksporty dla programistów
Zmienne CSS, Tailwind v4 i v3, SCSS oraz JSON w HEX, RGB, HSL lub OKLCH, a do tego próbki PNG.