Generator för färgpaletter
Färgharmoni
Two colors opposite on the color wheel
Genererad palett
Förhandsvisning av palett
Exportera palett
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Tekniska detaljer
Så fungerar färgpalettgeneratorn
Vad verktyget gör
Färgpalettgeneratorn skapar harmoniska färgscheman från valfri basfärg med hjälp av etablerade principer inom färgteori. Välj en basfärg och välj bland sex harmonityper — komplementär, analog, triadisk, tetradisk, split-komplementär eller monokromatisk — för att direkt generera en samordnad palett. Varje genererad färg visar HEX-, RGB- och HSL-värden som är redo att kopieras in i din CSS, ditt designverktyg eller din stilguide.
Vanliga användningsfall för utvecklare
Designers och utvecklare använder palettgeneratorer när de startar nya projekt, skapar designsystem eller fräschar upp varumärkesfärger. Vanliga scenarier inkluderar att generera komplementära accentfärger till en primär varumärkesfärg, skapa analoga färgscheman för datavisualiseringar, bygga triadiska paletter för livfulla UI-teman och utforska monokromatiska variationer för minimalistiska designer. Verktyget är också användbart för att generera uppsättningar av CSS-anpassade egenskaper och JSON-färgtokens för designsystem.
Typer av färgharmoni
Färgharmonier bygger på färghjulet. Komplementfärger ligger mittemot varandra (180°) och skapar hög kontrast. Analoga färger ligger intill varandra (±30°) och känns sammanhållna. Triadiska färger är jämnt fördelade med 120° mellanrum för balanserad livfullhet. Tetradisk (rektangel) använder fyra färger med 90° mellanrum. Split-komplementär kombinerar en bas med två färger som ligger intill dess komplement. Monokromatisk varierar ljushet och mättnad hos en enda nyans för subtila, enhetliga paletter.
Vanliga fallgropar och specialfall
Genererade paletter är utgångspunkter, inte färdiga designer. Kontrollera alltid kontrastförhållanden mellan genererade färger för att säkerställa tillgänglighet. Mycket mättade eller mycket mörka basfärger kan ge paletter med dålig läsbarhet. Kom ihåg att skärmfärger ser annorlunda ut i tryck. Testa paletter mot verkligt innehåll och UI-element i stället för att enbart förlita dig på förhandsvisningar av färgrutor.
När du ska använda det här verktyget jämfört med kod
Använd det här webbläsarverktyget för interaktiv utforskning och snabb palettgenerering under designsprintar. För produktionsklara designsystem, implementera palettgenerering programmatiskt med bibliotek som chroma.js, culori eller polished som kan generera harmonier, säkerställa kontrastförhållanden och integrera med byggpipelines.