HedgieTools

Paletgenerator

Tag udgangspunkt i din hovedfarve, og få en komplet palet til din brugerflade: sekundær, tertiær, succes, advarsel, fare og neutrale farver – med nuancer og kontrasttjek.

Din hovedfarve

Indtast en værdi, eller vælg en farve: resten af paletten bygges op omkring den.

Sekundær og tertiær
Værdiformat

Indtast en HEX-værdi, f.eks. #2563EB, eller klik på firkanten for at vælge farven.

Din palet

Klik på en værdi eller en nuance (50 til 950) for at kopiere den. Med blyanten erstatter du en foreslået farve med din egen: den forbliver uændret, når du skifter hovedfarve.

  • —

    Primær

    din farve
  • —

    Sekundær

    komplementær
  • —

    Tertiær

    næsten komplementær
  • —

    Info

    blå
  • —

    Succes

    grøn
  • —

    Advarsel

    orange
  • —

    Fare

    rød
  • —

    Neutral

    tonet grå

Lyse og mørke tokens

Brugsfarverne i din brugerflade, klar til lyst og mørkt tema. Hver af dem peger på en nuance i paletten. Klik for at kopiere.

  • --backgroundSidebaggrund
  • --surfaceKort og paneler
  • --surface-mutedSekundære områder
  • --borderKanter og skillelinjer
  • --textHovedtekst
  • --text-mutedSekundær tekst
  • --primaryKnapper og links
  • --primary-hoverHover-tilstand
  • --on-primaryTekst på primær
  • --focus-ringFokuskontur
  • --secondarySekundær accent
  • --tertiaryTertiær accent
  • --infoInformation
  • --info-softInformationsbaggrund
  • --successSucces
  • --success-softSuccesbaggrund
  • --warningAdvarsel
  • --warning-softAdvarselsbaggrund
  • --dangerFare, fejl
  • --danger-softFejlbaggrund

Matchende farver

De klassiske harmonier omkring din hovedfarve – til illustrationer, diagrammer eller accenter.

  • Komplementær

    den modsatte farve

  • Delt komplementær

    blødere end den modsatte

  • Analog

    nabofarverne

  • Triade

    tre afbalancerede farver

  • Tetrade

    fire farver i et kvadrat

  • Monokromatisk

    én farvetone, flere intensiteter

Forhåndsvisning og kontrast

Paletten anvendt på nogle få elementer i en brugerflade, og hvor læsbar hver kombination er efter WCAG-reglerne.

Tema for forhåndsvisning
SidetitelSekundær tekst, mindre vigtig, under titlen.
Et kort med et link og knapper.
PrimærSekundærTertiær
Info · Der er en opdatering tilgængelig.
Succes · Dine ændringer er gemt.
Advarsel · Dit abonnement udløber snart.
Fejl · Betalingen mislykkedes.
  • Tekst på baggrund
    Forhold—Normal tekst—Stor tekst—AAA—
  • Sekundær tekst på baggrund
    Forhold—Normal tekst—Stor tekst—AAA—
  • Link på baggrund
    Forhold—Normal tekst—Stor tekst—AAA—
  • Primær knap
    Forhold—Normal tekst—Stor tekst—AAA—
  • Sekundær knap
    Forhold—Normal tekst—Stor tekst—AAA—
  • Tertiær tekst på baggrund
    Forhold—Normal tekst—Stor tekst—AAA—
  • Infobesked
    Forhold—Normal tekst—Stor tekst—AAA—
  • Succesbesked
    Forhold—Normal tekst—Stor tekst—AAA—
  • Advarselsbesked
    Forhold—Normal tekst—Stor tekst—AAA—
  • Fejlbesked
    Forhold—Normal tekst—Stor tekst—AAA—

Eksport

Få paletten i det format, du har valgt ovenfor (HEX).

Indtast en hovedfarve for at generere koden.

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

Om paletgeneratoren

Vælg dit brands hovedfarve, og få alt det, en brugerflade har brug for omkring den: supplerende farver, statusfarver, neutrale farver, nuancer, lyse og mørke tokens, kontrasttjek og kode, der er klar til at indsætte – uden at forlade din browser.

En komplet palet ud fra én farve

Værktøjet udleder en sekundær og en tertiær farve af din hovedfarve, statusfarverne (info, succes, advarsel, fare) tilpasset dens stil og let tonede gråtoner til baggrunde og tekst.

Nuancer klar til brug

Hver farve findes i elleve nuancer, fra den lyseste (50) til den mørkeste (950), til baggrunde, kanter, hover-tilstande og tekst. Passer en foreslået farve dig ikke, så erstat den med din egen: nuancerne følger med.

Lyse og mørke tokens

Baggrund, flade, kant, tekst, hover, fokus og baggrunde til beskeder: hver brugsfarve peger på en nuance i paletten, med én værdi til det lyse tema og én til det mørke.

Kontrolleret kontrast

Hver kombination af tekst og baggrund vurderes efter WCAG-reglerne: 4,5:1 for normal tekst, 3:1 for stor tekst og 7:1 for AAA-niveauet.

Eksport til CSS, Tailwind, JSON

Kopiér hver værdi i HEX, RGB, HSL eller OKLCH, eller download en fil med CSS-variabler, et Tailwind v4-tema, en Tailwind v3-konfiguration, JSON eller en simpel liste. Alt foregår i din browser: intet sendes eller gemmes.

Relaterede værktøjer