Färgpalettgenerator

Generera paletter från en enda startfärg

En användbar palettgenerator förvandlar en enda färg till en liten uppsättning relaterade val som du faktiskt kan testa i en design. I stället för att välja slumpmässiga färgprover använder det här verktyget klassiska färgcirkelrelationer och HSL-justeringar av ljushet. Välj en basfärg, välj en harmoni, så uppdateras paletten direkt med kopierbara HEX-värden. Det är tillräckligt snabbt för att utforska och tillräckligt förutsägbart för att dokumentera som design tokens när du har förfinat resultatet.

Generatorn körs helt i din webbläsare, så den är säker för outgivna varumärkesfärger, kunders moodboards och interna produktteman. Det finns inga uppladdningar, konton eller externa palettjänster. Beräkningen är deterministisk: samma basfärg och harmoni ger samma färgprover, vilket gör det enkelt att återvända till en palett senare eller jämföra flera riktningar under en designgranskning.

Välja rätt harmoni

Komplementära paletter parar en färg med nyansen mitt emot på färgcirkeln. De skapar stark kontrast och är användbara för uppmaningsknappar, diagram eller accenter som ska sticka ut. Analoga paletter använder angränsande nyanser, som oftast känns lugnare och mer sammanhängande; de passar bra för bakgrunder, illustrationer och mjukare produktteman. Triadiska paletter fördelar nyanserna jämnt runt cirkeln och ger variation utan att förlita sig på en dominerande motfärg. Monokromatiska paletter håller nyansen konstant och varierar ljusheten, vilket är idealiskt för gränssnittstillstånd, kort, kantlinjer och diskreta ytor.

Från genererade färger till ett fungerande designsystem

Genererade paletter är en utgångspunkt, inte en ersättning för testning. Kopiera färgerna till ditt verkliga gränssnitt och kontrollera hur de fungerar med text, ikoner, skuggor och angränsande ytor. Vissa färger som ser balanserade ut som prover kan kännas för starka på stora ytor eller för svaga på små kontroller. När du har valt riktning bör du använda kontrastkontrollen för läsbar text och överväga att namnge de slutliga färgerna efter syfte, som primär, accent, yta eller varning, i stället för enbart efter nyans. Syftesbaserade namn gör framtida omdesigner enklare eftersom koden förmedlar avsikten.