Color Palette Generator
Generate color palettes
Generate color palettes Działa lokalnie w Twojej przeglądarce
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Generator palet kolorów pobiera jeden kolor podstawowy i wyprowadza z niego standardowe schematy harmonii: uzupełniające, analogiczne, triadyczne, rozdzielone komplementarne i tetradyczne, a także rampę odcieni w kierunku bieli i odcieni w kierunku czerni. Harmonie są obliczane w HSL poprzez obracanie odcienia przy zachowaniu nasycenia i jasności, dlatego też wyniki pozostają powiązane z bazą, a nie dryfują. Rampa jest częścią, której tak naprawdę potrzebuje większość palet, ponieważ działający interfejs wymaga kilku wartości tego samego odcienia dla stanów najechania, aktywności i wyłączenia, a nie tylko jednego koloru akcentującego.
Where people use the
- Budowanie palety wokół jednego koloru marki.
- Tworzenie wariantów najechanych, aktywnych i wyłączonych z jednego akcentu.
- Poszukiwanie alternatyw dla koloru, który nie przeszedł kontroli kontrastu.
- Generowanie neutralnej rampy dla powierzchni i granic.
How to use the
- 1
Wybierz kolor bazowy
Wprowadź wartość szesnastkową, np. 4ECDC4, lub użyj selektora. Wszystko inne wywodzi się z tego jednego koloru.
- 2
Przeczytaj schematy harmonii
Każdy schemat to inna rotacja odcieni. Dopełnienie wynosi 180 stopni, triada to 120 i 240 i tak dalej.
- 3
Skorzystaj z rampy barwiącej i cieniującej
Pięć odcieni w kierunku bieli i pięć odcieni w kierunku czerni zapewnia stany i wysokości potrzebne w prawdziwym interfejsie.
- 4
Skopiuj wartości
Pełna lista wygenerowanych wartości szesnastkowych znajduje się w jednym bloku, gotowym do wklejenia do arkusza stylów lub pliku tokena projektu.
- 5
Przed wysyłką sprawdź kontrast
Uruchom dowolną parę tekstu i tła z palety za pomocą modułu sprawdzania kontrastu. Harmonijne to nie to samo, co czytelne.
Wskazówki i najlepsze praktyki
- Wybierz kolor bazowy od marki, następnie dostosuj jasność tylko do stanów.
- Zarezerwuj kolor uzupełniający dla jednej akcji, którą chcesz zauważyć.
- Przed wysyłką zawsze przeprowadzaj ostateczne parowanie, sprawdzając kontrast.
Często zadawane pytania
Jaka jest różnica pomiędzy schematami?
Uzupełniający wykorzystuje przeciwny odcień, który daje najsilniejszy kontrast i pasuje do wezwania do działania. Analogicznie wykorzystuje sąsiadów 30 stopni z każdej strony, co jest spokojne i bezpieczne. Triadic równomiernie rozprowadza trzy odcienie, które są żywe i trudniejsze do kontrolowania. Podział dopełniający łagodzi uzupełniające się zderzenie poprzez użycie dwóch odcieni po obu stronach przeciwnego. Tetradic wykorzystuje cztery odcienie ustawione pod kątem prostym, co pasuje do skomplikowanych dashboardów.
Dlaczego wygenerowane kolory mają to samo nasycenie i jasność?
Ponieważ obracanie tylko odcienia sprawia, że są one rozpoznawalne. Zmieniająca się jasność jednocześnie tworzy kolory, które wyglądają na niepowiązane, co podważa sens palety.
Czy odcienie to tylko kolor zmieszany z bielą?
Właściwie tak, ale obliczane w HSL poprzez zwiększenie jasności przy jednoczesnym zachowaniu barwy i nasycenia. Dzięki temu odcień jest stabilny, podczas gdy naiwne mieszanie w RGB dryfuje w stronę szarości.
Ile kolorów powinna mieć paleta?
W przypadku większości interfejsów wystarczą dwa lub trzy odcienie plus neutralna rampa. Schemat z pięcioma nasyconymi odcieniami jest trudny w zastosowaniu w sposób spójny i zwykle wygląda na przypadkowy.
Czy sprawdza dostępność?
Nie, generuje tylko kolory. Użyj modułu sprawdzania kontrastu w przypadku każdego parowania, którego zamierzasz używać do tekstu.