HedgieTools

Palettgenerator

Utgå från din huvudfärg och få en komplett palett för ditt gränssnitt: sekundär- och tertiärfärg, statusfärger (lyckad, varning, fara) och neutrala toner, med nyanser och kontrastkontroller.

Din huvudfärg

Skriv ett värde eller välj en färg: resten av paletten byggs kring den.

Sekundär och tertiär
Värdeformat

Skriv ett HEX-värde, till exempel #2563EB, eller klicka på rutan för att välja färgen.

Din palett

Klicka på ett värde eller en nyans (50 till 950) för att kopiera. Med pennan byter du ut en föreslagen färg mot din egen: den behålls när du ändrar huvudfärgen.

  • —

    Primär

    din färg
  • —

    Sekundär

    komplementär
  • —

    Tertiär

    nästan komplementär
  • —

    Info

    blå
  • —

    Lyckad

    grön
  • —

    Varning

    orange
  • —

    Fara

    röd
  • —

    Neutral

    tonad grå

Ljusa och mörka tokens

De färger som ditt gränssnitt använder, klara för ljust och mörkt tema. Var och en pekar på en nyans i paletten. Klicka för att kopiera.

  • --backgroundSidbakgrund
  • --surfaceKort och paneler
  • --surface-mutedSekundära ytor
  • --borderKanter och avdelare
  • --textHuvudtext
  • --text-mutedSekundär text
  • --primaryKnappar och länkar
  • --primary-hoverHovringsläge
  • --on-primaryText på primärfärg
  • --focus-ringFokusram
  • --secondarySekundär accent
  • --tertiaryTertiär accent
  • --infoInformation
  • --info-softInformationsbakgrund
  • --successLyckad
  • --success-softBakgrund för lyckad åtgärd
  • --warningVarning
  • --warning-softVarningsbakgrund
  • --dangerFara, fel
  • --danger-softFelbakgrund

Matchande färger

De klassiska harmonierna kring din huvudfärg, för illustrationer, diagram eller accenter.

  • Komplementär

    den motsatta färgen

  • Delad komplementär

    mjukare än motsatsen

  • Analog

    grannfärgerna

  • Triad

    tre balanserade färger

  • Tetrad

    fyra färger i en kvadrat

  • Monokrom

    en färgton, flera intensiteter

Förhandsvisning och kontrast

Paletten tillämpad på några gränssnittselement, och hur läsbar varje kombination är enligt WCAG-reglerna.

Tema för förhandsvisningen
SidrubrikSekundär text, mindre viktig, under rubriken.
Ett kort med en länk och knappar.
PrimärSekundärTertiär
Info · En uppdatering finns tillgänglig.
Lyckad · Dina ändringar har sparats.
Varning · Ditt abonnemang går snart ut.
Fel · Betalningen misslyckades.
  • Text på bakgrund
    Förhållande—Normal text—Stor text—AAA—
  • Sekundär text på bakgrund
    Förhållande—Normal text—Stor text—AAA—
  • Länk på bakgrund
    Förhållande—Normal text—Stor text—AAA—
  • Primär knapp
    Förhållande—Normal text—Stor text—AAA—
  • Sekundär knapp
    Förhållande—Normal text—Stor text—AAA—
  • Tertiär text på bakgrund
    Förhållande—Normal text—Stor text—AAA—
  • Informationsmeddelande
    Förhållande—Normal text—Stor text—AAA—
  • Bekräftelsemeddelande
    Förhållande—Normal text—Stor text—AAA—
  • Varningsmeddelande
    Förhållande—Normal text—Stor text—AAA—
  • Felmeddelande
    Förhållande—Normal text—Stor text—AAA—

Export

Hämta paletten i formatet du valt ovan (HEX).

Ange en huvudfärg för att generera koden.

CSS-variabler för paletten (--color-primary-500…). Tokens pekar på de här variablerna; aktivera det mörka temat med data-theme="dark" på html-elementet.

Om palettgeneratorn

Välj huvudfärgen för ditt varumärke och få allt ett gränssnitt behöver runt den: kompletterande färger, statusfärger, neutrala färger, nyanser, ljusa och mörka tokens, kontrastkontroller och kod att klistra in – utan att lämna webbläsaren.

En komplett palett från en enda färg

Verktyget tar fram en sekundär och en tertiär färg utifrån din huvudfärg, statusfärger (info, lyckad, varning, fara) som passar dess stil och svagt färgtonade gråtoner för bakgrunder och text.

Färdiga nyanser

Varje färg finns i elva nyanser, från den ljusaste (50) till den mörkaste (950), för bakgrunder, kanter, hovringslägen och text. Om en föreslagen färg inte passar dig kan du byta ut den mot din egen: nyanserna följer med.

Ljusa och mörka tokens

Bakgrund, yta, kant, text, hovring, fokus och bakgrunder för meddelanden: varje gränssnittsfärg pekar på en nyans i paletten, med ett värde för det ljusa temat och ett för det mörka.

Kontrollerad kontrast

Varje kombination av text och bakgrund bedöms enligt WCAG-reglerna: 4,5:1 för normal text, 3:1 för stor text och 7:1 för nivå AAA.

Exportera till CSS, Tailwind, JSON

Kopiera varje värde i HEX, RGB, HSL eller OKLCH, eller ladda ned en fil med CSS-variabler, ett Tailwind v4-tema, en Tailwind v3-konfiguration, JSON eller en enkel lista. Allt sker i din webbläsare: inget skickas eller sparas.

Relaterade verktyg