Farvepaletgenerator
Farveharmoni
Two colors opposite on the color wheel
Genereret palet
Forhåndsvisning af palet
Eksportér palet
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Tekniske detaljer
Sådan fungerer farvepaletgeneratoren
Hvad værktøjet gør
Farvepaletgeneratoren skaber harmoniske farveskemaer ud fra enhver basisfarve ved hjælp af etablerede principper fra farveteori. Vælg en basisfarve, og vælg mellem seks harmonityper — komplementær, analog, triadisk, tetradisk, split-komplementær eller monokromatisk — for straks at generere en koordineret palet. Hver genereret farve viser HEX-, RGB- og HSL-værdier, der er klar til at blive kopieret ind i din CSS, dit designværktøj eller din style guide.
Almindelige anvendelsestilfælde for udviklere
Designere og udviklere bruger paletgeneratorer, når de starter nye projekter, opbygger designsystemer eller opdaterer brandfarver. Almindelige scenarier omfatter at generere komplementære accentfarver til en primær brandfarve, skabe analoge farveskemaer til datavisualiseringer, bygge triadiske paletter til livlige UI-temaer og udforske monokromatiske variationer til minimalistiske designs. Værktøjet er også nyttigt til at generere sæt af CSS custom properties og JSON-farvetokens til designsystemer.
Typer af farveharmoni
Farveharmonier er baseret på farvehjulet. Komplementære farver ligger over for hinanden (180°) og skaber høj kontrast. Analoge farver ligger ved siden af hinanden (±30°) og føles sammenhængende. Triadiske farver er jævnt fordelt med 120° mellemrum for afbalanceret intensitet. Tetradisk (rektangel) bruger fire farver med 90° mellemrum. Split-komplementær parrer en basisfarve med to farver, der ligger ved siden af dens komplement. Monokromatisk varierer lyshed og mætning af en enkelt nuance for subtile, ensartede paletter.
Almindelige faldgruber og kanttilfælde
Genererede paletter er udgangspunkter, ikke færdige designs. Tjek altid kontrastforhold mellem de genererede farver for at sikre tilgængelighed. Meget mættede eller meget mørke basisfarver kan give paletter med dårlig læsbarhed. Husk, at skærmfarver ser anderledes ud på tryk. Test paletter mod rigtigt indhold og UI-elementer i stedet for kun at stole på farveprøve-forhåndsvisninger.
Hvornår du skal bruge dette værktøj vs. kode
Brug dette browserværktøj til interaktiv udforskning og hurtig paletgenerering under design-sprints. Til produktionsklare designsystemer kan du implementere paletgenerering programmatisk med biblioteker som chroma.js, culori eller polished, der kan generere harmonier, håndhæve kontrastforhold og integrere med build pipelines.