Farveskema-generator

Vælg en basisfarve og få en fuld palet, komplementær, analog, triadisk, tetradisk eller monokromatisk. Kopiér enhver farveprøve som HEX, RGB eller HSL. Intet forlader din browser.

Sådan virker Farveskema-generator

Farveskema-generator bygger komplette farvepaletter fra en enkelt grundfarve, du vælger: komplementær (modsat på farvecirklen), analog (tilstødende nuancer), triadisk (tre jævnt fordelte), tetradisk (fire nuancer i to komplementære par) og monokromatisk (varierende lysstyrke og mætning af samme nuance). Al palette-logik kører i browseren; intet du angiver forlader din enhed.

Hver genereret palet viser prøver med HEX- og RGB-værdier klar til kopiering. Dette giver designere et udgangspunkt baseret på farveteori frem for gætteri. Da generatoren kan bruges offline efter den første sideindlæsning, kan du frit eksperimentere med brandfarver under et kundemøde uden at have brug for netværksforbindelse. Indtast din grundfarve i den notation, du har, HEX, RGB eller HSL, og hver genereret prøve gives tilbage i alle tre, så du kan kopiere den, dit designværktøj forventer.

Skrevet af Bastien Sulyan

Sådan bruger du Farveskema-generator, trin for trin

Vælg en grundfarve ved hjælp af farvevælgeren, eller skriv en HEX-værdi.
Vælg en harmonitype fra fanerne: komplementær, analog, triadisk, tetradisk eller monokromatisk.
Paletprøverne vises øjeblikkeligt med deres HEX- og RGB-værdier.
Klik på en prøve for at kopiere dens HEX-værdi til din udklipsholder.
Juster grundfarven for at udforske variationer og se hele paletten opdatere.

Almindelige anvendelser

En designer, der starter en ny brandidentitet, vælger sin primærfarve og genererer en triadisk palet for at foreslå trefarvekombinationer til en klient.
En udvikler, der bygger et mørkt-tilstand-tema, bruger den monokromatiske palet til at generere en række tinter og nuancer fra en enkelt brandfarve.
En indholdsskaber vælger en analog palet til at vælge accentfarver til en præsentation, der føles sammenhængende uden hård kontrast.
En UI-designer bruger den komplementære palet til at identificere en højkontrastaccentfarve, der skiller sig ud mod den primære brandfarve.

Ofte stillede spørgsmål

Hvordan fungerer den komplementære palet?

En komplementær farve er den nuance, der er direkte modsat grundfarven på HSL-farvecirklen, 180 grader væk. At placere komplementære farver ved siden af hinanden skaber maksimal kontrast. Værktøjet viser grundfarven og dens komplement samt lysere og mørkere varianter af hver.

Hvad er forskellen mellem triadiske og tetradiske paletter?

En triadisk palet bruger tre nuancer jævnt fordelt med 120 grader mellemrum på farvecirklen. En tetradisk palet bruger fire nuancer med 90 graders mellemrum, der danner to komplementære par (også kaldet en dobbelt komplementær eller kvadratisk palet). Tetradiske paletter er mere komplekse og kræver omhyggelig afbalancering af proportioner for at undgå visuel støj.

Gemmes eller sendes de farver, jeg vælger, nogen steder?

Nej. Palette-generering er aritmetik på grundfarvens HSL-repræsentation: rotation af nuancevinklen med faste beløb, skift af lysstyrke og mætning. Alle beregninger kører lokalt i browseren; intet sendes til nogen server.

Kan jeg eksportere paletten som en CSS-fil eller design-token-fil?

Værktøjet viser i øjeblikket prøver med kopierbare HEX- og RGB-værdier. For en fuld CSS-brugerdefinerede egenskaber-eksport eller en design-token-JSON kan du kopiere værdierne manuelt til dit projekts token-fil eller CSS. En dedikeret eksportknap kan tilføjes i en fremtidig opdatering.

Følger denne generator nogen formel farveteoristandard?

Palette-beregningerne bruger standard nuancerotationsformler i HSL-farverummet, som er konventionen i de fleste webdesignværktøjer. Den nøjagtige perceptuelle ensartethed af HSL har begrænsninger sammenlignet med LAB eller OKLCH, men HSL-rotationer producerer paletter, der matcher de farvecirkelkonventioner, designere typisk forventer.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle udviklerværktøjer