colorPaletteFinder powstał w oparciu o klasyczne zasady teorii barw połączone z nowoczesnymi wymaganiami projektowania cyfrowego. Zaprojektowaliśmy intuicyjny interfejs, w którym nie musisz ręcznie obliczać barw ani weryfikować współczynników kontrastu — narzędzie wykonuje najtrudniejszą pracę za Ciebie.
1. Interaktywne koło kolorów
Sercem colorPaletteFinder jest interaktywne koło kolorów HSL. W przeciwieństwie do standardowych prostokątnych selektorów kolorów, nasze okrągłe koło kolorów odwzorowuje bezpośrednio dynamikę teorii barw.
- Barwa (kąt): Przeciągaj punkt po zewnętrznej krawędzi, aby zmieniać podstawową rodzinę kolorów (czerwony, niebieski, zielony itd.).
- Nasycenie (odległość od środka): Przeciągnij punkt w stronę środka, aby kolor stał się szarawy i stonowany, lub w stronę krawędzi, aby uzyskać maksymalną wyrazistość.
- Jasność: Dostosowywana dynamicznie, aby wygenerowane kolory harmonii zachowały zrównoważony ciężar wizualny.
Przesuń punkt koloru podstawowego i obserwuj, jak wszystkie zależne kolory harmonii natychmiast dostosowują się w czasie rzeczywistym, zachowując swoje ścisłe zależności matematyczne.
2. Wybór zasady harmonii
W zależności od efektu estetycznego, który chcesz osiągnąć, możesz wybrać jedną z siedmiu różnych, matematycznie sprawdzonych zasad harmonii kolorów:
Dopełniająca
Kolory leżące dokładnie naprzeciw siebie na kole kolorów (180° od siebie). Tworzy maksymalny kontrast i energię o silnym oddziaływaniu.
Analogiczna
Kolory sąsiadujące ze sobą na kole (oddalone o 30°). Tworzy spokojny, komfortowy i naturalnie wyglądający projekt.
Triadyczna
Trzy kolory równomiernie rozmieszczone wokół koła (120° od siebie). Zapewnia wysoki kontrast, zachowując lepszą równowagę kolorystyczną niż schematy dopełniające.
Dopełniająca rozszczepiona
Kolor bazowy oraz dwa kolory sąsiadujące z jego dopełnieniem. Oferuje silny kontrast wizualny schematu dopełniającego, ale przy mniejszym napięciu.
Monochromatyczna
Wariacje jasności i nasycenia pojedynczej barwy. Daje spójny, czysty i elegancki efekt.
3. Sprawdzanie kontrastu WCAG
Stworzenie pięknej palety to tylko połowa pracy; kolory muszą być też dostępne dla wszystkich użytkowników. W szczególności tekst musi być czytelny na tle wybranych kolorów.
colorPaletteFinder ma wbudowany kontroler kontrastu na dole narzędzia. Wybierz dowolne dwa wygenerowane kolory (np. tło i kolor tekstu), a narzędzie obliczy współczynnik kontrastu.
- Standard AA: Wymaga współczynnika kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu.
- Standard AAA: Złoty standard dostępności, wymagający współczynnika co najmniej 7:1 dla zwykłego tekstu.
4. Kopiowanie i eksportowanie
Gdy Twoja idealna paleta jest już gotowa, włączenie jej do projektu jest bardzo proste.
Najedź na dowolną próbkę koloru w pasku palety, aby odsłonić jej dokładny kod HEX. Kliknięcie próbki natychmiast skopiuje sześciocyfrowy kod HEX do schowka (np. #1A2B3C), gotowy do wklejenia prosto w CSS, konfiguracjach Tailwind, Figmie lub Adobe Creative Cloud.