Generator palet kolorów online - system barw z jednego koloru

Podaj kolor bazowy, a narzędzie wygeneruje kompletne palety: monochromatyczną, analogiczną, komplementarną, triadyczną, split-complementary, system akcentów UI, paletę pastelową, ciemną i neutralną. Skopiuj HEX lub HSL i od razu użyj w brandingu, UI i projektach WWW.

Paleta monochromatyczna

Wszystkie kolory mają ten sam odcień (H), a różnią się głównie jasnością (L) w przestrzeni HSL.

#0b28ba

hsl(230, 89%, 39%)

#153af2

hsl(230, 89%, 52%)

#4f6bf5

hsl(230, 89%, 64%)

#899cf8

hsl(230, 89%, 76%)

#c3ccfc

hsl(230, 89%, 88%)

Paleta triadyczna

Trzy odcienie oddalone od siebie o 120° na kole barw (wierzchołki trójkąta równobocznego) - geometria często wykorzystywana w brandingu i projektach inspirowanych Bauhausem.

#4f6bf5

hsl(230, 89%, 64%)

#f43757

hsl(350, 89%, 59%)

#7ff667

hsl(110, 89%, 69%)

#f87f94

hsl(350, 89%, 74%)

#42f21f

hsl(110, 89%, 54%)

Paleta split-complementary

Odmiana palety komplementarnej - zamiast jednego dopełnienia (180°) używamy dwóch kolorów przesuniętych o ok. ±30° od dopełnienia, co zmniejsza napięcie wizualne przy zachowaniu silnego kontrastu.

#4f6bf5

hsl(230, 89%, 64%)

#f5864f

hsl(20, 89%, 64%)

#bef54f

hsl(80, 89%, 64%)

#f7a176

hsl(20, 89%, 72%)

#b0f328

hsl(80, 89%, 56%)

Paleta pastelowa

Ten sam odcień z obniżonym nasyceniem i podniesioną jasnością - przesunięcie w stronę środka i górnej części przestrzeni HSL, które daje miękkie, „kremowe” kolory.

#e1e5f4

hsl(230, 45%, 92%)

#d3d7ee

hsl(230, 45%, 88%)

#c4cae9

hsl(230, 45%, 84%)

#b5bde3

hsl(230, 45%, 80%)

#a6b0dd

hsl(230, 45%, 76%)

Paleta ciemna

Ta sama barwa przy wysokim nasyceniu (S) i obniżonej jasności (L) - przesunięcie w dół osi lightness, które daje głębokie kolory typowe dla dark mode i mocnych akcentów.

#3757f4

hsl(230, 89%, 59%)

#153af2

hsl(230, 89%, 52%)

#0c2dd2

hsl(230, 89%, 44%)

#0a25ab

hsl(230, 89%, 36%)

#081d85

hsl(230, 89%, 28%)

Paleta tonalna (inspirowana Material Design)

Kilka kroków jasności jednego odcienia - zróżnicowane L i umiarkowane S, zbliżone do tonalnych zakresów znanych z wytycznych Material Design (np. 50-900).

#f2f3f8

hsl(230, 27%, 96%)

#dcdfef

hsl(230, 36%, 90%)

#b1bae7

hsl(230, 54%, 80%)

#7c8ee9

hsl(230, 71%, 70%)

#3e5df4

hsl(230, 89%, 60%)

Paleta minimalistyczna (inspirowana Apple)

Jeden mocny akcent kolorystyczny i kilka bardzo jasnych, miękkich neutrali - układ typowy dla interfejsów z dużą ilością bieli i subtelnych cieni.

#3e5df4

hsl(230, 89%, 60%)

#fafafa

hsl(230, 6%, 98%)

#efeff1

hsl(230, 6%, 94%)

#dfdfe2

hsl(230, 6%, 88%)

#484951

hsl(230, 6%, 30%)

Paleta analogiczna

Kolory o zbliżonym odcieniu - tutaj od ok. -30° do +30° wokół koloru bazowego na klasycznym kole barw (np. Ittena).

#4fbef5

hsl(200, 89%, 64%)

#67a3f6

hsl(215, 89%, 69%)

#4f6bf5

hsl(230, 89%, 64%)

#4637f4

hsl(245, 89%, 59%)

#864ff5

hsl(260, 89%, 64%)

Paleta komplementarna

Kolor bazowy i jego dopełnienie przesunięte o 180° na kole barw - jeden z podstawowych kontrastów barwnych opisanych m.in. przez Johannesa Ittena.

#4f6bf5

hsl(230, 89%, 64%)

#1f42f2

hsl(230, 89%, 54%)

#f5d94f

hsl(50, 89%, 64%)

#f8e37f

hsl(50, 89%, 74%)

#f2cf1f

hsl(50, 89%, 54%)

Szukasz kogoś kto pomoże Ci stworzyć spójną markę?

Napisz do nas, pomożemy Ci zbudować kompletny system, który wyróżni Cie na tle konkurencji

Napisz do nas Sprawdź nasze usługi

To narzędzie działa na większym ekranie

Żeby wygodnie skorzystać z tego narzędzia, otwórz je na laptopie, komputerze stacjonarnym lub tablecie w poziomie.

Podpowiedź

Jeśli korzystasz z tabletu, przełącz go w tryb poziomy - gdy szerokość okna będzie większa, narzędzie załaduje się automatycznie.