Fargeskjemagenerator

Velg en basisfarge og få en full palett, komplementær, analog, triadisk, tetradisk eller monokromatisk. Kopier en farge som HEX, RGB eller HSL. Ingenting forlater nettleseren.

Slik fungerer Fargeskjemagenererator

Fargeopprettsgenerator bygger fullstendige fargepaletter fra en enkelt grunnfarge du velger: komplementær (motsatt på fargehjulet), analogt (tilstøtende nyanser), triadisk (tre jevnt fordelt), tetradisk (fire nyanser i to komplementære par) og monokromatisk (varierende lysstyrke og metning av samme nyanse). All palettlogikk kjøres i nettleseren; ingenting du angir forlater enheten din.

Hver generert palett viser prøver med HEX- og RGB-verdier klare til kopiering. Dette gir designere et utgangspunkt forankret i fargelære i stedet for gjetting. Fordi generatoren er frakoblet-kompatibel etter den innledende sidelastingen, kan du eksperimentere fritt med merkefarger under et klientmøte uten å trenge nettverksforbindelse. Skriv inn grunnfargen din i den notasjonen du har, HEX, RGB eller HSL, og hver genererte prøve gis tilbake i alle tre, slik at du kan kopiere den designverktøyet ditt forventer.

Skrevet av Bastien Sulyan

Slik bruker du Fargeskjemagenererator, steg for steg

Velg en grunnfarge ved hjelp av fargevalgeren eller ved å skrive inn en HEX-verdi.
Velg en harmonitype fra fanene: komplementær, analogt, triadisk, tetradisk eller monokromatisk.
Palettprøvene vises øyeblikkelig med sine HEX- og RGB-verdier.
Klikk en prøve for å kopiere HEX-verdien til utklippstavlen.
Juster grunnfargen for å utforske variasjoner og se hele paletten oppdateres.

Vanlige bruksområder

En designer som starter en ny merkeidentitet velger primærfargen og genererer en triadisk palett for å foreslå tre-fargekombinasjoner til en klient.
En utvikler som bygger et mørkt-modus-tema bruker den monokromatiske paletten for å generere et spekter av fargetoner og skygger fra en enkelt merkevarefarge.
En innholdsskaper velger en analogt palett for å velge aksentfarger for en presentasjon som føles sammenhengende uten sterk kontrast.
En UI-designer bruker den komplementære paletten for å identifisere en høykontrastaksentfarge som skiller seg ut mot den primære merkevareferargen.

Ofte stilte spørsmål

Hvordan fungerer den komplementære paletten?

En komplementær farge er nyanssen direkte overfor grunnfargen på HSL-fargehjulet, 180 grader unna. Å plassere komplementære farger ved siden av hverandre skaper maksimal kontrast. Verktøyet viser grunnfargen og dens komplement, pluss lysere og mørkere varianter av begge.

Hva er forskjellen mellom triadiske og tetradiske paletter?

En triadisk palett bruker tre nyanser jevnt fordelt på 120 grader fra hverandre på fargehjulet. En tetradisk palett bruker fire nyanser på 90 grader fra hverandre, og danner to komplementære par (også kalt en dobbel komplementær eller kvadratisk palett). Tetradiske paletter er mer komplekse og krever nøye balansering av proporsjoner for å unngå visuell støy.

Lagres eller sendes fargene jeg velger noe sted?

Nei. Palettgenerering er aritmetikk på grunnfargenes HSL-representasjon: rotasjon av fargenyansen med faste mengder, skifting av lysstyrke og metning. Alle beregninger kjøres lokalt i nettleseren; ingenting sendes til noen server.

Kan jeg eksportere paletten som en CSS-fil eller designtokenfil?

Verktøyet viser for øyeblikket prøver med kopierbare HEX- og RGB-verdier. For en full CSS-egendefinerte egenskaper-eksport eller et designtoken-JSON, kopier verdiene manuelt inn i prosjektets tokenfil eller CSS. En dedikert eksportknapp kan legges til i en fremtidig oppdatering.

Følger denne generatoren noen formell fargelærestandard?

Palettberegningene bruker standard fargesrotasjonsformler i HSL-fargerommet, som er konvensjonen i de fleste webdesignverktøy. Den eksakte perseptuelle ensartetheten til HSL har begrensninger sammenlignet med LAB eller OKLCH, men HSL-rotasjoner gir paletter som samsvarer med fargehjulets konvensjoner designere typisk forventer.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle utviklerverktøy