Softonic

Triadisk färggenerator

Steg 1 / 2
Nästa

En triadisk palett använder tre färger placerade 120° från varandra på färghjulet; rött, gult och blått är skolboksexemplet. Resultatet är naturligt balanserat och energiskt utan att bli kaotiskt. Välj valfri basfärg med färgväljaren: generatorn omvandlar den till HSL, roterar nyansen exakt +120° och +240° medan mättnad och ljushet lämnas orörda, och visar de tre färgproverna med sina HEX-koder. Klicka på ett färgprov för att kopiera koden.

Så byggs paletten

  1. 1

    Välj en basfärg

    Använd färgväljaren för att bestämma nyansen som paletten byggs kring.

  2. 2

    Två partner beräknas

    Verktyget roterar nyansen +120° och +240° i HSL-rymden; mättnad och ljushet hålls identiska för en sammanhållen triad.

  3. 3

    Läs av HEX-koderna

    Base, Triadic +120° och Triadic +240° visas sida vid sida, var och en märkt med sitt sexsiffriga HEX-värde.

  4. 4

    Klicka för att kopiera

    Ett klick på ett färgprov kopierar dess HEX-kod till urklipp, redo att klistras in i CSS, en Tailwind-konfig eller ditt designverktyg.

Varför triadiska paletter känns balanserade

Tre färger på jämna avstånd runt färghjulet delar ingen nyansgrannskap: de kontrasterar kraftigt, samtidigt som 120°-avståndet undviker frontalkrocken som uppstår med direkta komplementfärger (180° isär). Ögat läser dem som distinkta men harmoniska.

Matematiken bakom färgproverna

Generatorn omvandlar din HEX-färg till HSL, adderar 120° och 240° till nyansen och räknar tillbaka. Eftersom bara nyansen flyttas delar de tre färgerna alltid samma mättnad och ljushet. En rolig bieffekt: en rotation på exakt 120° motsvarar att rotera de röda, gröna och blå kanalvärdena, så partnerna till #6366F1 (standardfärgen) är #F16366 och #66F163, samma tre bytepar i annan ordning.

Exempel på triader som verktyget producerar:

Bas Triadic +120° Triadic +240°
#FF0000 (rött) #00FF00 #0000FF
#6366F1 (indigo) #F16366 #66F163
#E67E22 (orange) #22E67E #7E22E6
#0EA5E9 (himmelsblått) #E90EA5 #A5E90E
#2ECC71 (smaragdgrönt) #712ECC #CC712E

Använd triaden utan att överväldiga

Tre livfulla nyanser i full mättnad är mycket. Beprövad praxis:

  • En dominant (60 %) för huvudgränssnittet.
  • En sekundär (30 %) för accenter och sektioner.
  • En accentfärg (10 %) för viktiga interaktiva element.

Den andra spaken är att utgå från en dämpad bas: de två partnerna ärver dess mättnad, så en mjuk bas ger en mjuk triad.

Triadiskt kontra andra harmonier

Harmoni Struktur Känsla
Komplementär 2 färger, 180° isär Hög kontrast, slagkraftig
Analog 3 färger, intilliggande Lugn, sammanhållen
Triadisk 3 färger, 120° isär Balanserad, energisk
Tetradisk 4 färger, rektangel Rik, svårare att balansera
Delad komp. Bas + 2 nära komplement Stark utan att krocka

Tips för UI-design

  • Kontrastkontrollera varje par. Triadiska paletter garanterar inte WCAG AA-kontrast på text; verifiera varje kombination.
  • Välj en färg för uppmaningsknappar och håll fast vid den. Knappar som växlar mellan triadens färger förvirrar användarna.
  • Använd toningar och skuggningar för att utöka paletten utan att lägga till en fjärde nyans.
  • Testa i mörkt läge. En triad som fungerar på vitt kan tappa särskiljbarhet på mörka bakgrunder; justera ljusheten.

Vanliga frågor

Tre lika delar av det 360° stora färghjulet ger maximalt avstånd mellan nyanserna utan att någon dominerar. Mindre avstånd ger analog harmoni; större avstånd bryter de lika avstånden och kollapsar oftast till ett delat komplementschema.

Ja, men ofta i uppmjukad form. Många varumärken utgår från en triadisk bas och sänker sedan mättnaden eller tonar ner två av de tre färgerna för en mognare känsla. En fullt mättad triad läses som lekfull eller energisk, så matcha den mot varumärkets personlighet.

Ja. Generatorn behåller basfärgens mättnad och ljushet hos båda partnerna, så en avmättad bas ger en lika mjuk triad. Det är en vanlig strategi i professionell och redaktionell design.

Ren grå har noll mättnad: det finns ingen nyans att rotera och de tre proverna blir likadana. Skjut basen mot valfri nyans så separerar de tre proverna direkt.

Ingen registrering behövs och inget sparas. Färgen används bara för att beräkna och visa paletten, och i steg-för-steg-vyn finns den även i sidans URL, vilket gör paletten lätt att bokmärka eller dela.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Invertera färger i bilden

Vänd varje RGB-kanal i en bild om för att få en negativbild – användbart vid kreativa redigeringar och när du ska titta på filmskanningar.

Verktyget finns på andra språk