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

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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.

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.

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