Jak korzystać z generatora palet kolorów

Ten darmowy generator palet kolorów zamienia jeden kolor wyjściowy w kompletny, harmonijny schemat, korzystając z klasycznych obliczeń teorii barw. Wybierz kolor bazowy za pomocą koła, suwaka barwy lub wpisując kod hex, a następnie wybierz zasadę harmonii, aby od razu zobaczyć dopasowany zestaw kolorów. Każdą próbkę skopiujesz do schowka jednym kliknięciem, gotową do wklejenia prosto w CSS, Tailwind, Figmie lub dowolnym narzędziu projektowym.

• Wybierz kolor bazowy — przeciągnij punkt na kole kolorów, przesuń suwak barwy, wpisz sześciocyfrową wartość hex lub skorzystaj z natywnego selektora kolorów na górnym pasku.
• Wybierz zasadę harmonii — rozwiń listę „Harmonia kolorów” i wybierz interesującą Cię zależność (dopełniająca, analogiczna, triadyczna i więcej).
• Skopiuj kolory — najedź na próbkę w pasku palety, aby odsłonić jej kod hex, a następnie kliknij, aby go skopiować.
• Sprawdź dostępność — skorzystaj z wbudowanego kontrolera kontrastu WCAG powyżej, aby upewnić się, że kolory tekstu i tła są czytelne.
• Odkrywaj wariacje — przejrzyj siatkę „Wszystkie palety harmonii”, aby porównać każdą zasadę dla swojego koloru bazowego, lub zacznij od jednej z wyselekcjonowanych palet.

Siedem zasad harmonii kolorów

Harmonie kolorów opisują, jak barwy odnoszą się do siebie nawzajem na kole kolorów. Każda zasada tworzy inny nastrój i poziom kontrastu:

• Dopełniająca — dwie barwy leżące dokładnie naprzeciw siebie (180° od siebie). Maksymalny kontrast i energia; świetna do przycisków wezwania do działania.
• Analogiczna — sąsiadujące barwy (około 30° od siebie). Spokojna, spójna i naturalna w odbiorze.
• Triadyczna — trzy barwy równomiernie rozmieszczone co 120°. Żywa, a przy tym zrównoważona.
• Dopełniająca rozszczepiona — kolor bazowy oraz dwie barwy otaczające jego dopełnienie. Silny kontrast z mniejszym napięciem niż czysta harmonia dopełniająca.
• Tetradyczna — cztery barwy tworzące prostokąt na kole. Bogata i zróżnicowana; najlepiej sprawdza się z jednym dominującym kolorem.
• Kwadratowa — cztery barwy równomiernie rozmieszczone co 90°. Odważna i zrównoważona, o równym ciężarze wizualnym.
• Monochromatyczna — pojedyncza barwa o zmiennej jasności i nasyceniu. Elegancka, czysta i łatwa w zastosowaniu.

Sprawdzanie kontrastu kolorów pod kątem dostępności

Nawet piękna paleta musi być czytelna. Wytyczne dotyczące dostępności treści internetowych (WCAG) definiują minimalne współczynniki kontrastu między tekstem a jego tłem: 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu, aby spełnić poziom AA, oraz 7:1 dla bardziej rygorystycznego poziomu AAA. Kontroler kontrastu na tej stronie oblicza dokładny współczynnik między dowolnymi dwoma kolorami i pokazuje, czy spełniają one poziom AA lub AAA, dzięki czemu możesz dopracować paletę, zanim trafi do produkcji.

Najczęściej zadawane pytania

Czy generator palet kolorów jest darmowy?

Tak. Narzędzie jest całkowicie darmowe zarówno do zastosowań prywatnych, jak i komercyjnych, bez konieczności rejestracji.

Jakie formaty kolorów obsługuje?

Kolory możesz wprowadzać i kopiować jako kody hex, a każdy wygenerowany kolor jest obliczany na podstawie leżących u jego podstaw wartości HSL i RGB.

Której zasady harmonii powinienem użyć?

Użyj harmonii dopełniającej lub dopełniającej rozszczepionej dla mocnych akcentów, analogicznej lub monochromatycznej dla spokojnych i spójnych interfejsów, a triadycznej lub kwadratowej, gdy potrzebujesz bogatszego, wielobarwnego schematu.