Softonic

Generator kolorów triadycznych

Krok 1 / 2
Dalej

Paleta triadyczna używa trzech kolorów rozmieszczonych co 120° na kole barw; czerwony, żółty i niebieski to przykład ze szkoły podstawowej. Wynik jest z natury zrównoważony i energetyczny, a przy tym nie chaotyczny. Wybierz dowolny kolor bazowy w próbniku: generator przelicza go na HSL, obraca odcień dokładnie o +120° i +240°, zostawiając nasycenie i jasność nietknięte, i pokazuje trzy próbki z ich kodami HEX. Kliknij próbkę, aby skopiować jej kod.

Jak budowana jest paleta

  1. 1

    Wybierz kolor bazowy

    Użyj próbnika kolorów, aby wskazać odcień, wokół którego powstanie paleta.

  2. 2

    Obliczani są dwaj partnerzy

    Narzędzie obraca odcień o +120° i +240° w przestrzeni HSL; nasycenie i jasność pozostają identyczne, dzięki czemu triada jest spójna.

  3. 3

    Odczytaj kody HEX

    Base, Triadic +120° i Triadic +240° pojawiają się obok siebie, każda próbka z sześciocyfrową wartością HEX.

  4. 4

    Kliknij, aby skopiować

    Jedno kliknięcie w próbkę kopiuje jej kod HEX do schowka, gotowy do wklejenia w CSS, konfiguracji Tailwind albo narzędziu projektowym.

Dlaczego palety triadyczne wydają się zrównoważone

Trzy kolory w równych odstępach na kole barw nie dzielą żadnego sąsiedztwa odcieni: kontrastują mocno, a odstęp 120° pozwala uniknąć czołowego zderzenia, jakie zdarza się przy bezpośrednich dopełnieniach (odległych o 180°). Oko czyta je jako odrębne, ale harmonijne.

Matematyka stojąca za próbkami

Generator zamienia kolor HEX na HSL, dodaje do odcienia 120° i 240°, po czym przelicza z powrotem. Ponieważ zmienia się tylko odcień, trzy kolory zawsze mają to samo nasycenie i jasność. Ciekawy efekt uboczny: obrót o dokładnie 120° odpowiada cyklicznej zamianie kanałów czerwonego, zielonego i niebieskiego, więc partnerami #6366F1 (koloru domyślnego) są #F16366 i #66F163, te same trzy pary bajtów w innej kolejności.

Przykładowe triady z tego narzędzia:

Baza Triadic +120° Triadic +240°
#FF0000 (czerwony) #00FF00 #0000FF
#6366F1 (indygo) #F16366 #66F163
#E67E22 (pomarańczowy) #22E67E #7E22E6
#0EA5E9 (błękit nieba) #E90EA5 #A5E90E
#2ECC71 (szmaragdowy) #712ECC #CC712E

Jak używać triady bez przytłaczania

Trzy żywe barwy w pełnym nasyceniu to dużo. Sprawdzona praktyka:

  • Jedna dominująca (60%) dla głównego interfejsu.
  • Jedna drugorzędna (30%) dla akcentów i sekcji.
  • Jeden mocny akcent (10%) dla kluczowych elementów interaktywnych.

Drugą dźwignią jest start od stonowanej bazy: obaj partnerzy dziedziczą jej nasycenie, więc łagodna baza daje łagodną triadę.

Triada a inne harmonie

Harmonia Struktura Wrażenie
Dopełniająca 2 kolory, odległe o 180° Wysoki kontrast, mocna
Analogiczna 3 kolory, sąsiadujące Spokojna, spójna
Triadyczna 3 kolory, odległe o 120° Zrównoważona, energetyczna
Tetradyczna 4 kolory, prostokąt Bogata, trudniejsza do zrównoważenia
Dopełniająca dzielona Baza + 2 bliskie dopełnienia Mocna bez gryzienia się

Wskazówki do projektowania interfejsów

  • Sprawdź kontrast każdej pary. Palety triadyczne nie gwarantują kontrastu WCAG AA dla tekstu na kolorze; zweryfikuj poszczególne kombinacje.
  • Wybierz jeden kolor dla wezwań do działania i trzymaj się go. Przyciski przeskakujące między kolorami triady dezorientują użytkowników.
  • Używaj rozjaśnień i przyciemnień, by rozszerzyć paletę bez dodawania czwartej barwy.
  • Testuj w trybie ciemnym. Triada, która działa na bieli, może stracić rozróżnialność na ciemnym tle; dostosuj jasność.

Najczęściej zadawane pytania

Trzy równe podziały koła barw o 360° dają maksymalny dystans między odcieniami, bez dominacji któregokolwiek. Mniejszy odstęp daje harmonię analogiczną; większy łamie równe odległości i zwykle przechodzi w schemat dopełniającej dzielonej.

Tak, choć często w złagodzonej formie. Wiele marek zaczyna od bazy triadycznej, a potem odsyca lub tonuje dwie z trzech barw, aby uzyskać dojrzalszy charakter. W pełni nasycona triada odbierana jest jako figlarna lub energetyczna, dopasuj ją więc do osobowości marki.

Tak. Generator zachowuje nasycenie i jasność koloru bazowego u obu partnerów, więc odsycona baza daje równie łagodną triadę. To częsta strategia w projektach profesjonalnych i redakcyjnych.

Czysta szarość ma zerowe nasycenie, więc nie ma odcienia do obrócenia i trzy próbki wychodzą takie same. Przesuń bazę w stronę dowolnego odcienia, a próbki natychmiast się rozejdą.

Rejestracja nie jest potrzebna i nic nie jest zapisywane. Kolor służy wyłącznie do obliczenia i wyświetlenia palety, a w widoku krok po kroku pojawia się też w adresie URL strony, dzięki czemu paletę łatwo dodać do zakładek lub udostępnić.

Powiązane narzędzia

Próbnik kolorów Material Design

Przeglądaj paletę kolorów Material Design. Kopiuj dowolny odcień (od 50 do A700) w formacie HEX, RGB lub HSL jednym dotknięciem.

Generator papieru w kratkę

Twórz papier w kratkę do druku online: wybierz siatkę lub kropki, ustaw odstęp w mm, wybierz A4 lub Letter oraz własny kolor linii, a następnie wydrukuj lub pobierz czytelny plik SVG.

Generator napisów graffiti

Twórz napisy graffiti w stylu tag, bubble, block, stencil, neon i wild. Dobierz kolory i wyeksportuj PNG lub SVG bezpośrednio w przeglądarce.

Generator papieru w linie

Twórz papier w linie do druku za darmo. Wybierz linie szerokie, standardowe lub wąskie, ustaw odstęp między liniami w mm, format strony i linię marginesu, a następnie wydrukuj lub pobierz plik SVG.

Dzielnik siatki na Instagramie

Podziel szeroki obraz na siatkę 3×3 na Instagramie lub na dowolną liczbę rzędów. Kafelki są ponumerowane, więc łatwo wgrasz je w odwrotnej kolejności.

Kreator wzorów haftu krzyżykowego

Zamień plik JPEG, PNG lub WebP w schemat haftu krzyżykowego: 10–150 krzyżyków, 2–40 własnych kolorów, symbole, dokładne liczby ściegów i wymiary kanwy.

Narzędzie jest dostępne w innych językach