HedgieTools

Palettgenerator

Ta utgangspunkt i hovedfargen din og få en komplett palett for grensesnittet: sekundær, tertiær, suksess, advarsel, fare og nøytrale farger, med nyanser og kontrastsjekk.

Hovedfargen din

Skriv inn en verdi eller velg en farge: resten av paletten bygges rundt den.

Sekundær og tertiær
Verdiformat

Skriv inn en HEX-verdi, for eksempel #2563EB, eller klikk på ruten for å velge fargen.

Paletten din

Klikk på en verdi eller en nyanse (50 til 950) for å kopiere den. Med blyanten bytter du ut en foreslått farge med din egen: den forblir uendret når du endrer hovedfargen.

  • —

    Primær

    din farge
  • —

    Sekundær

    komplementær
  • —

    Tertiær

    nesten komplementær
  • —

    Info

    blå
  • —

    Suksess

    grønn
  • —

    Advarsel

    oransje
  • —

    Fare

    rød
  • —

    Nøytral

    tonet grå

Lyse og mørke tokens

Bruksfargene i grensesnittet ditt, klare for lyst og mørkt tema. Hver av dem peker til en nyanse i paletten. Klikk for å kopiere.

  • --backgroundSidebakgrunn
  • --surfaceKort og paneler
  • --surface-mutedSekundære områder
  • --borderKanter og skillelinjer
  • --textHovedtekst
  • --text-mutedSekundærtekst
  • --primaryKnapper og lenker
  • --primary-hoverHover-tilstand
  • --on-primaryTekst på primærfarge
  • --focus-ringFokusramme
  • --secondarySekundær aksent
  • --tertiaryTertiær aksent
  • --infoInformasjon
  • --info-softInformasjonsbakgrunn
  • --successSuksess
  • --success-softSuksessbakgrunn
  • --warningAdvarsel
  • --warning-softAdvarselsbakgrunn
  • --dangerFare, feil
  • --danger-softFeilbakgrunn

Farger som passer sammen

De klassiske harmoniene rundt hovedfargen din, til illustrasjoner, diagrammer eller aksenter.

  • Komplementær

    den motsatte fargen

  • Delt komplementær

    mykere enn den motsatte

  • Analog

    nabofargene

  • Triade

    tre balanserte farger

  • Tetrade

    fire farger i et kvadrat

  • Monokrom

    én fargetone, flere intensiteter

Forhåndsvisning og kontrast

Paletten brukt på noen grensesnittelementer, og hvor lesbar hver kombinasjon er etter WCAG-reglene.

Tema for forhåndsvisningen
SidetittelSekundærtekst, mindre viktig, under tittelen.
Et kort med en lenke og knapper.
PrimærSekundærTertiær
Info · En oppdatering er tilgjengelig.
Suksess · Endringene dine er lagret.
Advarsel · Abonnementet ditt utløper snart.
Feil · Betalingen mislyktes.
  • Tekst på bakgrunn
    Forhold—Normal tekst—Stor tekst—AAA—
  • Sekundærtekst på bakgrunn
    Forhold—Normal tekst—Stor tekst—AAA—
  • Lenke på bakgrunn
    Forhold—Normal tekst—Stor tekst—AAA—
  • Primærknapp
    Forhold—Normal tekst—Stor tekst—AAA—
  • Sekundærknapp
    Forhold—Normal tekst—Stor tekst—AAA—
  • Tertiær tekst på bakgrunn
    Forhold—Normal tekst—Stor tekst—AAA—
  • Varsel: info
    Forhold—Normal tekst—Stor tekst—AAA—
  • Varsel: suksess
    Forhold—Normal tekst—Stor tekst—AAA—
  • Varsel: advarsel
    Forhold—Normal tekst—Stor tekst—AAA—
  • Varsel: fare
    Forhold—Normal tekst—Stor tekst—AAA—

Eksport

Hent paletten i formatet som er valgt ovenfor (HEX).

Skriv inn en hovedfarge for å generere koden.

CSS-variabler for paletten (--color-primary-500…). Tokens peker til disse variablene; slå på mørkt tema med data-theme="dark" på html-elementet.

Om palettgeneratoren

Velg hovedfargen til merkevaren din og få alt et grensesnitt trenger rundt den: støttefarger, statusfarger, nøytrale farger, nyanser, lyse og mørke tokens, kontrastsjekk og kode å lime inn – uten å forlate nettleseren.

En komplett palett fra én farge

Verktøyet utleder en sekundær- og en tertiærfarge fra hovedfargen din, statusfargene (info, suksess, advarsel, fare) tilpasset stilen dens, og svakt tonede gråtoner til bakgrunner og tekst.

Nyanser klare til bruk

Hver farge finnes i elleve nyanser, fra den lyseste (50) til den mørkeste (950), til bakgrunner, kanter, hover-tilstander og tekst. Hvis en foreslått farge ikke passer deg, bytt den ut med din egen: nyansene følger med.

Lyse og mørke tokens

Bakgrunn, flate, kant, tekst, hover, fokus og varselbakgrunner: hver bruksfarge peker til en nyanse i paletten, med én verdi for lyst tema og én for mørkt tema.

Kontrollert kontrast

Hver kombinasjon av tekst og bakgrunn vurderes etter WCAG-reglene: 4,5:1 for normal tekst, 3:1 for stor tekst og 7:1 for AAA-nivået.

Eksport til CSS, Tailwind og JSON

Kopier hver verdi som HEX, RGB, HSL eller OKLCH, eller last ned en fil med CSS-variabler, et tema for Tailwind v4, en konfigurasjon for Tailwind v3, JSON eller en enkel liste. Alt skjer i nettleseren din: ingenting sendes eller lagres.

Relaterte verktøy