Generator för färgharmonier
Tekniska detaljer
Så fungerar generatorn för färgharmonier
Vad verktyget gör
Generatorn för färgharmonier beräknar matematiskt relaterade färgset från en enda basnyans: komplementära, analoga, triadiska, tetradiska, kvadratiska, split-komplementära, monokromatiska och nyanser. Varje palett renderas med HEX-, RGB- och HSL-värden som du kan kopiera med ett klick och använda direkt i CSS eller design tokens.
Vanliga användningsfall för utvecklare
Designers prototypar varumärkespaletter genom att utforska hur en varumärkesnyans utvecklas under olika harmoniregler. Frontendutvecklare utgår från en primär varumärkesfärg för att skapa accentfärger för knappar, aviseringar och badges. Data-viz-ingenjörer väljer kategoriska färgset som ser genomtänkta ut men ändå förblir åtskiljbara. Produktchefer jämför palettalternativ när de granskar designförslag utan att behöva dedikerade designverktyg.
Dataformat, typer eller varianter
Åtta scheman finns tillgängliga: Komplementär (bas + 180°), Analog (bas ± 30°), Triadisk (3 färger med 120° mellanrum), Tetradisk (rektangulär 4-färg), Kvadrat (4 färger med 90° mellanrum), Split-komplementär (bas + ±150°), Monokromatisk (samma nyans med varierande ljushet 10–90%) och Nyanser (samma nyans, mörk till ljus). Varje färg innehåller sina HEX-, RGB- och HSL-representationer tillsammans med en rolletikett.
Vanliga fallgropar och specialfall
Harmonier som härleds från extremt omättade eller nästan gråskaliga basfärger ser oåtskiljbara ut mellan scheman — börja med en mättad bas. Mycket mättade baser i kombination med triadiska eller tetradiska scheman kan ge skrikiga, svårbalanserade paletter; överväg att dra ned mättnaden för UI-användning. Vissa kombinationer som härleds från harmonier klarar inte WCAG-kontrast — verifiera alltid text-/bakgrundspar i verktyget för färgkontrast innan du lanserar.
När du ska använda det här verktyget jämfört med kod
Använd webbläsarverktyget för idéarbete, snabb utforskning och designgranskning. I kod låter bibliotek som chroma.js, colord eller culori dig beräkna harmonier programmatiskt, integrera dem i build-pipelines för design tokens och kombinera harmonimatematik med perceptuellt uniforma färgrymder som Oklch för mer jämnt utseende paletter.