Illustration: Color relationships displayed on a color wheel.
Illustration: Color relationships displayed on a color wheel.
Source colors

Illustrative preview

Interaktywne koło kolorów — znajdź pasujące harmonie kolorów

Znajdź komplementarne, analogiczne, triadyczne, tetradyczne i kwadratowe schematy kolorów. Dostosuj HEX, nasycenie i jasność, a następnie skopiuj pasujące kolory za darmo, bez konta.

Przeciągnij, aby wybrać kolor bazowy — skopiuj kody hex dla każdej klasycznej harmonii.

Kolor HEX / CSS
Harmonia

Harmonie koła kolorów – wyjaśnienie

Dopełniające

Kolory dopełniające się znajdują naprzeciwko siebie na kole kolorów — niebieski i pomarańczowy, czerwony i zielony. Tworzą one najsilniejszy możliwy kontrast i intensywność, dzięki czemu projekty wydają się energiczne, a przyciski wezwania do działania wyraźnie się wyróżniają. Użyj jednego koloru jako dominującego, a jego dopełnienia oszczędnie jako akcentu, aby uniknąć wizualnego napięcia.

Rozdzielone dopełniające

Schemat dopełniający rozdzielony wykorzystuje kolor bazowy oraz dwa kolory sąsiadujące z jego dopełnieniem. Zachowujesz wysoki kontrast schematu dopełniającego, ale łagodzisz napięcie, przez co dużo trudniej się pomylić. To świetny schemat na początek: jeden dominujący odcień, dwa wspierające akcenty i naturalnie zrównoważony efekt.

Analogiczne

Schematy analogiczne wykorzystują trzy sąsiadujące ze sobą kolory na kole barw, na przykład żółty, żółto-zielony i zielony. Ponieważ sąsiadujące barwy mają wspólny podton, efekt jest spokojny, harmonijny i naturalny — pomyśl o zachodach słońca czy lasach. Wybierz jeden kolor dominujący, sąsiednie użyj jako wsparcia, a neutralny dodaj dla kontrastu.

Triada

Schemat triadyczny wybiera trzy kolory rozmieszczone równomiernie co 120 stopni, na przykład czerwony, żółty i niebieski. Pozostaje wyrazisty nawet przy użyciu bladych lub stonowanych wersji barw i zachowuje równowagę, ponieważ żadna barwa nie dominuje przez samą bliskość na kole. Niech jeden kolor przewodzi, a pozostałe dwa zarezerwuj na akcenty i podświetlenia.

Tetradyczny (prostokątny)

Schematy tetradyczne (prostokątne) wykorzystują cztery kolory ułożone w dwie pary dopełniające, rozstawione co 60 stopni. Oferują największą różnorodność spośród wszystkich klasycznych harmonii, ale są też najtrudniejsze do zrównoważenia — wybierz jeden dominujący kolor, stonuj pozostałe i uważnie pilnuj proporcji barw ciepłych do zimnych.

Kwadrat

Schemat kwadratowy rozmieszcza cztery kolory równomiernie, co 90 stopni na kole barw. Podobnie jak schemat tetradyczny, łączy dwie pary barw dopełniających, ale równomierne rozmieszczenie daje bardziej wyrazistą i swobodniejszą równowagę między barwami ciepłymi a chłodnymi. Sprawdza się najlepiej, gdy jeden kolor wyraźnie dominuje, a pozostałe pełnią rolę drobnych akcentów.

Co możesz zrobić za pomocą Koło Kolorów

Zanim zaczniesz, przejrzyj główne możliwości.

  • Przeglądaj uzupełniające i analogiczne schematy kolorów
  • Znajdź harmonie triadyczne, tetradyczne i kwadratowe
  • Skopiuj kody szesnastkowe dla każdego pasującego koloru
  • Dostosuj nasycenie i lekkość na żywo
  • Wybierz kolor bazowy dla swojej palety projektowej

Odniesienie do ustawień

Dostępne elementy sterujące dla Koło Kolorów.

Opcje

Kolor bazowy (odcień i nasycenie)Próbnik kolorów
Przeciągnij w dowolnym miejscu interaktywnego koła, aby wybrać kolor wyjściowy: kąt ustawia odcień, a odległość od środka — nasycenie.
Kolor HEX / CSSWprowadzanie tekstu
Wpisz lub wklej dowolny kod HEX, wartość rgb(), hsl() albo nazwę koloru CSS, aby od razu ustawić koło na dokładnym kolorze, który już masz.
NasycenieSuwakZasięg: 0–100% · Domyślne: 91%
Reguluje intensywność koloru bazowego — od całkowicie szarego przy 0% do najczystszej, najbardziej wyrazistej wersji odcienia przy 100%.
JasnośćSuwakZasięg: 0–100% · Domyślne: 60%
Decyduje, jak jasny lub ciemny jest kolor bazowy — od czerni przy 0%, przez czysty odcień, po biel przy 100%; wszystkie harmonie aktualizują się odpowiednio.
HarmoniaUstawienia gotowe
Wybiera, którą klasyczną zależność z koła barw wyróżnić na kole — znaczniki wskazują kolory towarzyszące, dzięki czemu widzisz, jak zbudowany jest schemat.Opcje: DopełniająceRozdzielone dopełniająceAnalogiczneTriadaTetradyczny (prostokątny)Kwadrat
Bezpłatne korzystanie · Bez rejestracji · Bez znaku wodnegoPrzesyłane pliki są szyfrowane podczas transmisjiUsunięto zgodnie z naszą polityką przechowywania danych

Najczęściej zadawane pytania

Jak Koło Kolorów pomaga Ci osiągnąć cel

Prawdziwe problemy, które rozwiązuje każdego dnia — dla firm, twórców i codziennych zadań. Znajdź przypadek użycia, który Ci odpowiada i zacznij.

Wykształcenie

Poznaj teorię kolorów

Zobacz wszystkie klasyczne schematy harmonii kolorów obliczane na żywo na podstawie wybranego przez Ciebie koloru bazowego, wraz z prostym wyjaśnieniem, kiedy i dlaczego każdy schemat się sprawdza.

Dla twórców

Wybierz akcentowe kolory swojej strony internetowej

Wpisz kod HEX swojej marki w kole kolorów i skorzystaj ze schematów rozdzielczo-dopełniających lub triadycznych, aby znaleźć kolory akcentujące, które kontrastują, ale się nie gryzą.

Dla twórców

Zobacz schematy kolorów na prawdziwym interfejsie

Każda harmonia jest zastosowana na małej karcie przykładowej — nagłówek, treść, przycisk i kropki — dzięki czemu możesz ocenić zestawienia w kontekście, a nie jako abstrakcyjne próbki kolorów.

Dla twórców

Palety do sztuki i ilustracji

Użyj harmonii analogicznych do naturalnych, spokojnych scen, a dopełniających — do dramatycznych punktów centralnych, kopiując dokładne kody hex do swojej aplikacji do malowania.

Obejrzyj each transformation li

Every zdjęcie crosses the slash untouched i comes out the other side finished.