Softonic

Färgpalettgenerator

Steg 1 / 4 Palettbyggare

Välj en HEX-basfärg, välj ett harmonischema och skapa en palett som kan kopieras direkt till en UI-skiss, landningssida, graf eller ett designsystem. Verktyget normaliserar korta och fullständiga HEX-värden, bygger paletten med HSL-förskjutningar av kulör och ljushet och ger klickbara färgprover plus CSS custom properties.

Så fungerar palettgeneratorn

  1. 1

    Ange en HEX-basfärg

    Använd färgväljaren eller skriv ett värde som #6366F1. Treställig shorthand expanderas automatiskt.

  2. 2

    Välj ett harmonischema

    Välj monokromatiskt, analogt, komplementärt, triadiskt eller tetradiskt beroende på om du behöver en lugn skala, närliggande kulörer eller tydligare accenter.

  3. 3

    Generera och granska proverna

    Paletten visas som kopierbara HEX-färgprover. Kontrollera färgerna i det riktiga gränssnittet innan du använder dem slutgiltigt.

  4. 4

    Kopiera resultatet

    I exportsteget kan du kopiera HEX-listan eller CSS-variabler som --palette-1, --palette-2 och vidare.

Välj rätt schema

Schema Resultat Passar bäst för Kontrollera före publicering
Monokromatiskt 5 ljusa och mörka varianter av en kulör Varumärkesskalor, kort, bakgrunder Lägg till accent eller neutral om allt känns för platt
Analogt 5 närliggande kulörer Gradienter, illustrationer, lugna produktskärmar Se till att intilliggande färger går att skilja åt
Komplementärt Basfärger plus motsatt kulör CTA-accenter, badges, energiska visuella ytor Testa kontrast för text och ikoner noggrant
Triadiskt 3 jämnt fördelade kulörer Lekfull branding, diagram, kategorifärger Välj en dominant färg så att gränssnittet inte blir rörigt
Tetradiskt 4 kulörer runt färghjulet Dashboards, taggar, bredare visuella system Sänk mättnaden när paletten täcker stora ytor

Praktisk palettstruktur

En genererad harmoni är en startpunkt, inte ett komplett designsystem. För produktions-UI bör färger namnges efter roll i stället för utseende: primary, secondary, accent, surface, border, text, success, warning och error. Lägg till neutrala gråskalor separat, eftersom de oftast kräver mer precision än en kulörbaserad generator kan ge.

Använd de genererade HEX-färgerna direkt i en prototyp och behåll bara de färger som fungerar på riktiga skärmar, ljusa och mörka bakgrunder samt hover- och disabled-lägen.

Export till CSS-variabler

Exportsteget använder enkla custom properties:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Byt namn på variablerna till ditt eget systems namn när du klistrar in dem i CSS, Tailwind theme tokens eller en design token-fil.

HEX, RGB och HSL

Inmatning och synligt resultat är HEX, eftersom det är snabbast att kopiera mellan CSS, designverktyg och ärendekommentarer. Internt räknas basfärgen om till HSL, kulör eller ljushet flyttas och resultatet konverteras tillbaka till HEX. Behöver du RGB eller HSL kan du köra de genererade HEX-värdena genom en färgkodskonverterare.

Kontrast och tillgänglighet

Harmonischeman garanterar inte tillgänglighet. Innan du använder ett färgpar för text, kontroller eller diagram bör du testa det med en kontrastkontroll:

  • Normal text mot bakgrund: minst 4,5:1 för WCAG AA.
  • Stor text: minst 3:1.
  • Viktiga icke-textdelar i UI, som knappkanter, ikoner, fokusringar och diagramkanter: minst 3:1 mot intilliggande färger.

Lita inte heller enbart på kulör. Två färger kan se olika ut som prover men ändå misslyckas i liten text, tunna ikoner eller statusetiketter.

Tips

  • Börja med en meningsfull basfärg, till exempel en befintlig varumärkes-, produkt- eller kampanjfärg.
  • Välj en dominant färg och låt resten vara stöd. Lika vikt gör ofta gränssnittet för upptaget.
  • Sänk mättnaden på stora ytor, som appbakgrunder, paneler och hero-sektioner.
  • Testa igen efter tematisering. En palett som fungerar på vitt kan fallera i mörkt läge eller i täta diagram.

Vanliga frågor

Nej. Den skapar färgharmonier. Viktiga förgrunds- och bakgrundspar bör testas i en kontrastkontroll före publicering.

Varje schema följer en annan relation på färghjulet. Triadiskt ger tre kulörer, tetradiskt fyra, medan monokromatiskt, analogt och komplementärt ger fem prover som en mer praktisk arbetsuppsättning.

Nuvarande inmatning är HEX. Konvertera först RGB eller HSL till HEX och använd resultatet som basfärg.

Monokromatiska och analoga paletter är oftast enklast för lugna UI-ytor. Komplementära, triadiska och tetradiska paletter passar bättre för accenter, kategorifärger och visuella kampanjer.

Relaterade verktyg

Binär till oktal-konverterare

Konvertera binärt till oktalt genom att gruppera bitar tre och tre. Användbart för Unix-rättigheter, äldre system och kompakt numerisk visning.

Base64 till Hex-konverterare

Konvertera en Base64-sträng till dess underliggande bytes uttryckta som hexadecimal. Användbart för att inspektera tokens, nycklar, certifikat och JWT:er.

Slumpgenerator för bokstäver

Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.

BBCode till HTML-konverterare

Konvertera BBCode (bulletin board-markup) till ren HTML. Hanterar formateringstaggar, listor, citat, kod, bilder, länkar och tabeller.

Binär till ASCII-konverterare

Klistra in binärdata (mellanslagsseparerade bytes eller en lång bitström) och få ASCII-texten den representerar. Hanterar 7-bitars och 8-bitars kodningar.

Binär till hex-konverterare

Konvertera binär inmatning till ett vanligt hexadecimalt värde med versaler. Icke-binära tecken ignoreras och inledande nollor bevaras inte.