Generator palety kolorów

Generator palety kolorów dobiera zestaw kolorów, które pasują do siebie, bo leżą w określonych miejscach koła barw. Przydaje się przy projektowaniu strony, aplikacji, logo, prezentacji albo wykresu, gdy masz jeden kolor, np. kolor marki, i szukasz dla niego towarzystwa. Jeśli nie masz punktu wyjścia, losowa paleta podsunie pomysły.

Przy każdym kolorze widać kody HEX, RGB i HSL oraz kontrast z białym i czarnym tekstem. Gotową paletę skopiujesz jako zmienne CSS, SCSS, konfigurację Tailwind albo JSON. Pojedynczy losowy kolor znajdziesz w generatorze losowego koloru.

1. Wybierz rodzaj palety, np. analogiczną albo dopełniającą.
2. Ustaw kolor bazowy. Możesz go wybrać z próbnika, wpisać jako HEX albo wylosować przyciskiem obok.
3. Wybierz liczbę kolorów, od 2 do 8. Paleta zmienia się od razu.
4. Kliknij kłódkę na kolorach, które chcesz zostawić, i losuj dalej przyciskiem Losuj nową paletę albo spacją.
5. Skopiuj pojedynczy kod kliknięciem albo całą paletę w wybranym formacie. Paletę możesz też zapisać w przeglądarce.

Przy palecie opartej na kolorze bazowym przycisk losowania wybiera nowy kolor bazowy i buduje paletę od nowa. Przy palecie losowej każdy niezablokowany kolor dostaje nową barwę.

Koło barw układa barwy w okrąg: czerwony u góry, dalej żółty, zielony, cyjan, niebieski i purpura. Każdy rodzaj palety wybiera kolory według stałych kątów na tym kole, licząc od koloru bazowego.

Paleta monochromatyczna zmienia tylko jasność, od ciemnej do jasnej wersji tej samej barwy. Analogiczna rozkłada kolory w wycinku 60° wokół koloru bazowego. Dopełniająca, triadyczna i tetradyczna zaczynają od dwóch, trzech albo czterech barw, a gdy chcesz więcej kolorów, dokładają ich jaśniejsze i ciemniejsze odmiany.

Palety z większą liczbą barw, jak triadyczna i tetradyczna, łatwo przesadzić. Zwykle lepiej wybrać jeden kolor główny, a pozostałe stosować oszczędnie, np. tylko do przycisków i wyróżnień.

Generator korzysta z koła barw HSL. To samo koło widać w próbnikach kolorów w programach graficznych i w zapisie hsl() w CSS. Jest zbudowane na kolorach, z których ekran składa obraz: czerwonym, zielonym i niebieskim.

Koło malarskie, znane z lekcji plastyki, opiera się na farbach: czerwonej, żółtej i niebieskiej. Dlatego pary dopełniające wychodzą na obu kołach inaczej. Dla niebieskiego generator wskaże żółty, a koło malarskie pomarańczowy. Dla czerwonego generator wskaże cyjan, a koło malarskie zielony.

Do projektów na ekran lepiej pasuje koło HSL. Jeśli dobierasz farby do ściany albo obrazu, wynik z generatora traktuj jako punkt wyjścia i porównaj go z wzornikiem.

Ładna paleta nie wystarczy, jeśli na jej kolorach nie da się przeczytać tekstu. Wytyczne WCAG opisują kontrast jako stosunek jasności dwóch kolorów, od 1:1 dla identycznych do 21:1 dla czerni na bieli. Generator liczy go dla każdego koloru z białym i czarnym tekstem i pokazuje lepszy wariant.

• AA oznacza co najmniej 4,5:1. Tyle potrzebuje zwykły tekst na stronie.
• AA duży oznacza od 3:1 do 4,5:1. Wystarczy dla dużego tekstu, np. nagłówków, a także dla ikon i obramowań przycisków.
• AAA oznacza co najmniej 7:1, czyli poziom podwyższony.

Kolory o średniej jasności, np. czysty pomarańczowy czy turkusowy, często nie osiągają 4,5:1 ani z białym, ani z czarnym tekstem. Takie kolory lepiej sprawdzają się jako tło dużych nagłówków, ilustracje i akcenty niż jako tło dłuższego tekstu.

Popularna zasada 60-30-10 mówi, żeby około 60% powierzchni zajmował kolor dominujący, 30% kolor uzupełniający, a 10% akcent, np. przyciski i odnośniki. To reguła orientacyjna, ale dobrze pokazuje, że kolory palety nie powinny zajmować tyle samo miejsca.

• Dodaj do palety neutralne szarości na tło i tekst. Rzadko kiedy cały projekt da się zbudować z samych kolorowych barw.
• Przypisz kolorom role, np. główny, tło, akcent, ostrzeżenie, i trzymaj się ich w całym projekcie.
• Sprawdź paletę w trybie ciemnym. Kolory, które dobrze wyglądają na białym tle, na ciemnym bywają zbyt jaskrawe.
• Nie opieraj znaczenia wyłącznie na kolorze. Osoba, która słabo rozróżnia czerwony i zielony, nie odczyta różnicy między nimi, więc dodaj ikonę albo podpis.

Przyciski pod tabelą kopiują całą paletę do schowka w wybranym formacie. Zmienne CSS wyglądają tak:

:root {
  --color-1: #3b5bdb;
  --color-2: #4c6ef5;
  --color-3: #748ffc;
}

Format SCSS daje zmienne $color-1, $color-2 i kolejne. Tailwind dostaje fragment do wklejenia w theme.extend.colors, po którym działają klasy w rodzaju bg-palette-1. JSON zawiera każdy kolor w zapisie HEX, RGB i HSL, co przydaje się w skryptach i aplikacjach.