HEX-fargepalettgenerator
Start med én HEX-farge og lag en komplett palett med toneskala, harmonifarger, semantiske variabler og CSS-variabler klare til kopiering.
Hurtigvalg
Grunnfarge (HEX)
#2563EB
Harmonifarger
Primær
Hovedfarge for merke og CTA
#2563EBSekundær
Støttende merkevarefarge
#6C59D5Aksent
Fremhevinger med høy kontrast
#E3AA2DBakgrunn
Bakgrunnstone for siden
#F7F7F8Overflate
Kort og overflatebeholdere
#E8E9EETekst
Standardfarge for brødtekst
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}Slik bygger du et komplett fargesystem fra én HEX-kode
Verktøyet gjør en grunnfarge til en strukturert palett i sanntid. Skriv inn en HEX-verdi, velg en farge eller lag en tilfeldig farge for å utforske nye retninger. Du får straks full palettoversikt med harmonifarger, toneskalaer, semantiske variabler og CSS-variabler klare til kopiering.
Steg 1: Skriv inn eller velg en grunnfarge
Skriv en HEX-kode, velg fra fargevelgeren eller klikk på Tilfeldig farge for å lage en automatisk.
Steg 2: Se palettoversikten
Se grunnfargen sammen med automatisk genererte harmonifarger som utfyller og utvider designen.
Steg 3: Utforsk toneskala og semantiske variabler
Se toneskalaen (50–900) med lyse og mørke nyanser til bakgrunner, rammer, tilstander og tekstkontrast. Semantiske variabler genereres også til praktisk grensesnittbruk.
Steg 4: Kopier CSS-variabler eller roller
Kopier genererte CSS-variabler eller semantiske roller med ett klikk og lim dem direkte inn i stilarket.
Strukturerte fargepaletter for ekte prosjekter
HEX-fargepalettgeneratoren går lenger enn enkle fargeprøver. Den lager strukturerte, systemklare paletter som kan brukes direkte i produktgrensesnitt, designsystemer og merkevarearbeid.
Fargegenerering basert på harmoni
Lag automatisk utfyllende harmonifarger som bevarer visuell balanse og kontrast.
Toneskala (50–900)
Lyse til mørke nyanser optimalisert for grensesnittlag, tilstander, bakgrunner og lesbar tekstkontrast.
Semantiske variabler for et helhetlig grensesnitt
Forhåndsdefinerte roller sikrer konsekvent bruk for primærhandlinger, suksess, advarsler og nøytrale elementer.
CSS-variabler klare til kopiering
Eksporter hele paletten som CSS-variabler med ett klikk — klar til bruk i stilarket.