Softonic

Färgpalettgenerator

Steg 1 / 4 Palette builder

Börja med en färg — din varumärkesprimärfärg, en accent du plockat ur ett foto, eller ett slumpmässigt förslag — så bygger generatorn en palett med 4-8 färger utifrån klassiska harmoniregler: komplementär, analog, triadisk, tetradisk, delad komplement, monokromatisk. Exportera som CSS-variabler, Tailwind-konfiguration, Figma-tokens, eller bara en CSV med hex-koder.

Så genereras färgpaletter

  1. 1

    Ange eller välj en basfärg

    Hex, RGB, HSL, eller använd "slump"-knappen för en ny utgångspunkt.

  2. 2

    Välj ett harmonischema

    Komplementär (2 färger 180° isär), analog (3 grannar 30°), triadisk (3 på 120°), tetradisk (4 på 90°), delad komplement (bas + 2 nära komplementet), monokromatisk (samma kulör, olika ljushet/mättnad).

  3. 3

    Paletten renderas live

    4-8 färgprover dyker upp med hex, RGB och HSL. Justera reglagen för mättnad och ljushet för att finjustera.

  4. 4

    Exportera

    CSS-variabler, Tailwind `extend.colors`-konfiguration, Figma JSON-tokens, Sass-variabler eller CSV.

Harmonischemana

Palettstruktur för riktigt arbete

Designsystem behöver vanligtvis:

En harmonipalett ger dig primär + sekundär + accent. Neutraler och semantiker kommer vanligtvis från separata konventioner (avmättade nära-gråtoner; standardiserade semantiska kulörer).

Exportformat

CSS custom properties:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Tailwind-konfiguration:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Kontrast och tillgänglighet

Harmonischeman garanterar inte tillgänglighet. Kontrollera palettparningar mot WCAG:s kontrastkrav:

Para generatorn med kontrastkontrollen för att hitta godkända kombinationer.

Tips

Vanliga frågor

Komplementär för energiska varumärken. Analog för en lugn, sammanhållen känsla (välmående, lyx, friluftsliv). Triadisk för lekfulla, balanserade varumärken. Monokromatisk för ultraminimala, redaktionella estetiker. När du är osäker är analog förlåtande.

Ja. Fäst de färger du vill behålla och regenerera de andra runt harmonin. Användbart när din primära varumärkesfärg är fast och du utforskar accenter.

3-5 kärnfärger är den optimala punkten för de flesta varumärken. Lägg till nyanser/skuggor för en fullständig skala i ett designsystem. Bortom 8 kärnfärger blir sammanhanget svårt att upprätthålla.

Du kan generera en palett för ljust läge och sedan begära “invertera för mörkt läge” för att få motsvarande version för mörkt läge med justerad mättnad och ljushet — en solid utgångspunkt som fortfarande behöver manuell finjustering.

Relaterade verktyg

Generatör för slumpmässig färgpalett

Skapa femfärgspaljer baserade på en slumpmässig grundfärg, med komplementära, analoga och triadiska varianter.

slumpmässig taljare

Generera en slumpmässig RGB-färg, se hex-, HSL- och RGB-värdena och kopiera vilket format som helst med ett klick.

HEX-färgväljare

Välj valfri färg visuellt och få dess HEX-, RGB-, HSL-, HSV- och CMYK-värden, plus tillgänglighetskontrast mot vitt och svart.

slumpmässig littergenerator

Generera slumpmässiga bokstäver från det engelska alfabetet. Välj skriftstil, inkludera duplikater eller unika val och ange antalet.

JSON-formaterare

Formatera och snyggt utskriv JSON med justerbar indragning, sorterade nycklar och inline-validering som markerar fel på exakt position.

Anagramgenerator

Ange ett ord eller en fras så returnerar generatorn giltiga anagram med samma bokstäver, filtrerade efter längd och ordbok.