Generator triadycznych schematów kolorów

Generuj harmonijne zestawy 3 kolorów rozmieszczonych równomiernie na kole barw (120°). Wybierz kolor bazowy, dostosuj nasycenie i jasność. Eksportuj HEX/CSS. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Format koloru

Liczba kroków wariantów

Kolor bazowy (HEX)

Uwzględnij warianty Opcja narzędzia

Wynik

Kolory w palecie

3 szt.

baza + dwa przesunięcia barwy

Przesunięcie

+120° / +240°

trzy równe odcinki koła kolorów

Kolor bazowy

#2F80ED

Format koloru

HEX

Warianty

Jaśniejsze i ciemniejsze (2 kroki)

Baza #2F80ED Triada 2 #ED2F80 Triada 3 #80ED2F

Paleta triadyczna
Baza: #2F80ED
Triada 2: #ED2F80
Triada 3: #80ED2F

Jaśniejsze i ciemniejsze odcienie (2 kroki)
Baza:
  Jaśniejsze: #63A0F2, #82B3F4
  Ciemniejsze: #2666BE, #1F539A
Triada 2:
  Jaśniejsze: #F263A0, #F482B3
  Ciemniejsze: #BE2666, #9A1F53
Triada 3:
  Jaśniejsze: #A0F263, #B3F482
  Ciemniejsze: #66BE26, #539A1F

Ściąga: przykładowe palety triadyczne liczone silnikiem (+120° i +240°)

Kolor bazowy	Triada 2 (+120°)	Triada 3 (+240°)
`#2F80ED`	`#ED2F80`	`#80ED2F`
`#E63946`	`#46E639`	`#3946E6`
`#2A9D8F`	`#8F2A9D`	`#9D8F2A`

Palety liczy dokładnie ten sam silnik, który obsługuje formularz: HEX → RGB → HSL, potem odcień bazy (H) powiększony o 120° i 240° z zawijaniem modulo 360 (wrapHue), przy niezmienionym nasyceniu i jasności, i powrót do HEX. Na kole kolorów to trójkąt równoboczny: 0° to czerwień, 120° zieleń, 240° niebieskość — dlatego triada trzech barw podstawowych (R, G, B) jest najbardziej naturalnym przykładem tego schematu.

Triada na kole kolorów

Co liczy silnik

Triada to trzy barwy odległe o 120° na kole kolorów. Silnik zamienia podany HEX na model HSL, dodaje 120° i 240° do odcienia (z zawijaniem przez 360°) i wraca do HEX — nasycenie i jasność zostają jak w bazie, zmienia się tylko barwa. Skróty 3-cyfrowe (#2FD) są rozszerzane do pełnego zapisu.

Kiedy triada, a kiedy inne schematy

Triada daje żywy, ale zbalansowany zestaw — dobra do infografik, ilustracji, materiałów sportowych i interfejsów, które mają mieć energię bez „krzyku”. Do spokojniejszych projektów lepszy jest schemat analogiczny (sąsiednie barwy), do maksymalnego kontrastu — dopełniający (+180°).

Hierarchia przez warianty

Kolory triady mają identyczne nasycenie i jasność, więc samymi triadami trudno zbudować hierarchię. Włącz „Uwzględnij warianty”: silnik dolewa 25/40/55% bieli (jaśniejsze) i 20/35/50% czerni (ciemniejsze) dla każdego koloru — to gotowe stany tła, tekstu i granic. Kontrast pary tekst–tło sprawdź osobno (WCAG 4,5:1).

Formaty eksportu

Dla formatu HEX przycisk „Pobierz plik” daje arkusz CSS z blokiem :root i zmiennymi --triada-baza, --triada-2, --triada-3 (do wklejenia w projekt i użycia przez var()). Dla RGB i HSL pobierzesz listę .txt z dokładnie tym, co widzisz w wyniku.

Wskazówka: kafelki nad wynikiem pokazują liczbę kolorów, przesunięcia, kolor bazowy, format i stan wariantów, a nad wynikiem widzisz swatchy trzech kolorów z podpisami Baza / Triada 2 / Triada 3.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator triadycznych schematów kolorów – harmonia trzech barw

Schemat triadyczny (triadic color scheme) to zestaw trzech kolorów rozmieszczonych równomiernie na kole barw – co 120°. Tworzy energetyczne, zrównoważone kompozycje kolorystyczne. Wystarczy wybrać jeden kolor bazowy – narzędzie oblicza pozostałe dwa.

schemat triadyczny kolorów triadic color scheme 3 kolory kolo barw generator harmonii kolorów

Schemat triadyczny – podstawy

Na kole barw 360°: kolor bazowy (0°) + kolor 2 (120°) + kolor 3 (240°). Przykład: czerwony (#FF0000) → żółty-zielony (#00FF00) → niebieski (#0000FF). Schemat jest żywy i kontrastowy – każdy z kolorów jest maksymalnie odległy od pozostałych. Stosowany gdy zależy na różnorodności i dynamice.

Inne schematy harmonii kolorów

Analogiczny: 3 kolory sąsiadujące (30° odstęp) – spokojny, naturalny. Dopełniający (komplementarny): 2 kolory naprzeciwko (180°) – maksymalny kontrast. Tetradic (kwadrat): 4 kolory co 90° – bogaty, złożony. Split-complementary: kolor + 2 sąsiednie do dopełniającego – mniejszy kontrast niż triadic.

Dostosowanie nasycenia i jasności

Czyste triadyczne kolory mogą być zbyt intensywne do zastosowań UI. Modyfikacje: zmniejsz nasycenie do 60-70% (pastelowe tony). Zmień jasność: 1 kolor ciemny (dominant), 2 jasne (akcenty). Dodaj wersje tinted (z białym) i shaded (z czarnym) dla systemu projektowania. HSL ułatwia te modyfikacje.

Użycie triadycznego schematu w projekcie

Zasada 60-30-10: 60% kolor dominujący (tło, duże powierzchnie), 30% kolor pomocniczy (karty, sekcje), 10% kolor akcentowy (CTA, highlights). Unikaj użycia wszystkich 3 kolorów w pełnej intensywności jednocześnie – 1 dominuje, reszta wspiera.

Jak działa generator triady – obrót odcienia o 120°

Podstawą działania jest zapis koloru w przestrzeni HSL, gdzie barwę opisują trzy liczby: odcień (H) wyrażony w stopniach od 0 do 360, nasycenie (S) oraz jasność (L). Generator zamienia wpisany kolor HEX na te trzy składowe, a następnie modyfikuje wyłącznie odcień – nasycenie i jasność zostają nietknięte.

Wzór sprowadza się do dwóch działań: H2 = (H + 120) mod 360 oraz H3 = (H + 240) mod 360. Zapis „mod 360” oznacza zawijanie koła – gdy suma przekroczy 360 stopni, odejmowany jest pełny obrót. Dzięki temu trzy kolory mają identyczne S i L, a różni je wyłącznie położenie na kole barw, co daje im porównywalną „wagę” w kompozycji.

Ta sama reguła działa w drugą stronę: obrót o -120° zwraca ten sam zestaw, tylko w odwrotnej kolejności, dlatego kolejność kolorów na liście wynika z przyjętego punktu startowego, a nie z hierarchii ważności. Przy trzech kolorach rozstawionych co 120° żadna para nie leży bezpośrednio obok siebie ani dokładnie naprzeciwko siebie – to właśnie ta geometria odpowiada za energetyczny, ale wciąż zrównoważony charakter triady.

Przykład krok po kroku: triada z magenty

Wybierz kolor bazowy i wpisz go w polu startowym: #FF00FF (magenta).
Generator rozkłada kolor na składowe HSL: H = 300°, S = 100%, L = 50%.
Kolor 2: H = 300 + 120 = 420, a po zawinięciu 420 - 360 = 60°. Przy niezmienionych S i L powstaje HSL(60, 100%, 50%), czyli #FFFF00 (żółty).
Kolor 3: H = 300 + 240 = 540, czyli 540 - 360 = 180°. Wynik to HSL(180, 100%, 50%), czyli #00FFFF (cyjan).
Sprawdź odstępy: 300° → 60° → 180° → 300° to trzy skoki po 120°, z których ostatni również wymaga zawinięcia koła.
Złagodzenie palety: zostaw odcienie, ale obniż nasycenie do 65% przy L = 50%. Dla magenty daje to HSL(300, 65%, 50%), czyli #D22DD2 – ten sam kierunek barwy, wyraźnie mniejsza intensywność.

Tabela referencyjna: odcienie triady na kole barw

Odcień bazowy (H)	Kolor 2 (H + 120°)	Kolor 3 (H + 240°)
30° – #FF8000	150° – #00FF80	270° – #8000FF
60° – #FFFF00	180° – #00FFFF	300° – #FF00FF
90° – #80FF00	210° – #0080FF	330° – #FF0080
120° – #00FF00	240° – #0000FF	0° – #FF0000
180° – #00FFFF	300° – #FF00FF	60° – #FFFF00
240° – #0000FF	0° – #FF0000	120° – #00FF00
300° – #FF00FF	60° – #FFFF00	180° – #00FFFF

Jak używać triady w praktyce

Zacznij od koloru, który już masz – wpisz firmowy HEX jako bazowy. Triada zachowa jego odcień, więc pozostałe dwie barwy będą spójne z identyfikacją, a nie dobrane przypadkowo.
Rozdziel role, zamiast mieszać proporcje – jeden kolor uczyń dominującym, drugi pomocniczym, trzeci akcentowym. Użycie wszystkich trzech w tej samej ilości odbiera kompozycji punkt ciężkości.
Najpierw nasycenie, potem jasność – obniżenie nasycenia zwykle wystarcza, by czyste odcienie przestały być krzykliwe; dopiero gdy to nie pomaga, różnicuj jasność.
Pracuj na zapisie HSL – wersje tinted i shaded generuj zmianą L, a nie ręcznym mieszaniem HEX. Łatwiej wtedy utrzymać powtarzalny system kolorów w projekcie.
Oceniaj kolory w kontekście – ta sama triada inaczej wygląda na dużym tle, a inaczej w drobnym przycisku. Sprawdzaj ją w miejscu docelowym, nie tylko na palecie.

Ograniczenia schematu triadycznego

Model HSL nie jest percepcyjny – równy obrót odcienia o 120° nie oznacza równych różnic widzianych okiem; w przestrzeniach opartych na postrzeganiu odległości wypadłyby inaczej.
Równa jasność nie znaczy równa siła – przy tym samym L żółty i cyjan wyglądają jaśniej niż niebieski, więc wynik często wymaga ręcznej korekty jasności.
Brak kontroli dostępności – narzędzie nie liczy kontrastu WCAG ani nie symuluje daltonizmu. Samo równoodległe położenie barw nie gwarantuje czytelnego tekstu na tle.
Bez zarządzania kolorem – wynik to wartości ekranowe (HEX/sRGB). Narzędzie nie uwzględnia profili ICC, gamutu drukarskiego ani zakresów P3, więc wydruk może odbiegać od podglądu.

Najczęstsze pytania

Kiedy triadyczny schemat jest odpowiedni, a kiedy nie?

Dobry dla: plakaty, ilustracje, branding energetyczny, materiały dla dzieci, sport i gaming. Unikaj w: korporacyjne oprogramowanie (zbyt żywy), minimalistyczny design, medycyna (spokojne kolory). Triadic działa lepiej gdy co najmniej 1 kolor jest stonowany lub jasny.

Jak wybrać kolor bazowy dla triadycznego schematu?

Zacznij od koloru marki (brand color). Wygeneruj triadic i sprawdź czy wynikowe kolory pasują do branży. Jeśli bazowy jest niebieski – otrzymasz pomarańczowy i zielony. Jeśli żółty – magentę i cyjan. Testuj różne odcienie bazowego w tej samej barwie.

Jak sprawdzić dostępność triadycznego schematu?

Sprawdź kontrast każdej pary kolor/tło (narzędzie "kontrast kolorów" WCAG). Triadic schematy mogą mieć słaby kontrast między sobą – ważne dla tekstu. Daltonizm: użyj narzędzia symulacji daltonizmu (Coblis). Typ protanopii/deuteranopii: czerwono-zielona ślepota najczęstsza (8% mężczyzn).

Co to jest kolo barw (color wheel) i skąd pochodzi?

Teoria barw: Newton (1666, pryzmat i spektrum), Goethe (kolo barw, 1810), Itten (Bauhaus, 1961 – najpopularniejszy schemat 12-kolorowy). Kolo RYB (czerwony-żółty-niebieski): malarstwo tradycyjne. Kolo RGB: ekrany (addytywne). Kolo CMYK: druk (subtraktywne). Narzędzie używa modelu HSL (perceptualny).

Jak użyć triadycznych kolorów w CSS?

Zdefiniuj jako CSS variables: :root { --color-1: #E63946; --color-2: #2A9D8F; --color-3: #E9C46A; }. Następnie używaj przez var(--color-1). Tryb ciemny: użyj oklch() z adjusted lightness. Design token: eksportuj do Figma, Style Dictionary lub Tailwind config.

Jak obliczyć kolory triadyczne z jednego HEX?

Kolor jest zamieniany na zapis HSL, do odcienia dodaje się 120° i 240°, a wynik zawija się w zakresie 0–360°. Nasycenie i jasność pozostają bez zmian, więc wszystkie trzy kolory mają identyczną intensywność.

Czy kolejność kolorów w triadzie ma znaczenie?

Nie. Obrót o -120° daje ten sam zestaw w odwrotnej kolejności, więc o rolach decyduje to, który kolor uznasz za dominujący, a nie pozycja na liście.

Jaki kolor bazowy wybrać do schematu triadycznego?

Najlepiej taki, który już występuje w projekcie lub identyfikacji – pozostałe dwa zostaną wyliczone względem niego. Jeśli koloru nie ma, wybierz odcień, który ma nieść główny przekaz kompozycji.

Ile kolorów ma triada i czy można dodać czwarty?

Schemat triadyczny ma dokładnie trzy kolory rozstawione co 120°. Dodanie czwartego zmienia go w inny typ harmonii, więc wynik trzeba wtedy projektować od nowa, a nie tylko dopisywać barwę.

Czy triada sprawdzi się w interfejsie i przy tekście?

Sprawdzi się jako paleta akcentów i wyróżnień, ale nie jako dowolna para tekst–tło. Wybierz dwa kolory z triady i najpierw sprawdź ich kontrast, a dopiero potem zgodność odcieni.

Powiązane narzędzia: blender kolorów HEX, sprawdzanie kontrastu i generator palet kolorów.