Färgpalettgenerator: harmoniska färgscheman från en basfärg
Med färgpalettgeneratorn skapar du en färgpalett online från en enda basfärg: Välj en färg eller ange en HEX-kod, så visas sex harmoniska färgscheman direkt, vart och ett med HEX, RGB och HSL. Gratis, utan inloggning och helt beräknat i din webbläsare.
Byggd av Justin Schuessler
Är färgpaletten klar? Publicera din webbplats med snabbt och pålitligt webbhotell.
Välj basfärg
Alla färgscheman nedan beräknas direkt utifrån den här färgen.
Komplementär
Basfärgen och dess motsats på färgcirkeln (180°) – stark kontrast, bra för accenter.
Analog
Tre intilliggande färgtoner (±30°) – harmoniskt och lugnt, vanligt i naturen.
Triadisk
Tre jämnt fördelade färgtoner (120° mellanrum) – livfullt men balanserat.
Delad komplementärfärg
Basfärgen och de två färgerna intill dess komplementfärg – kontrast med mindre spänning.
Tetradisk
Fyra nyanser i två par av komplementfärger (90° mellan dem) – en fyllig kombination som fungerar bäst med en dominerande färg.
Monokromatisk
Fem nyanser av samma färg – diskreta och garanterat harmoniska.
Fortsätt med basfärgen: Kontrollera kontrast · Visa i simulatorn för färgblindhet · Öppna i Color Picker
Inget av detta sparas eller överförs – varje färg beräknas endast i din webbläsare.
Funktioner
Det här kan färgschemageneratorn göra
En basfärg räcker: Generatorn beräknar harmoniska färgkombinationer utifrån färgteorins principer.
Sex färgscheman i en överblick
Komplementärt, analogt, triadiskt, delat komplementärt, tetradiskt och monokromatiskt visas sida vid sida och uppdateras direkt när du ändrar basfärgen, utan någon genereringsknapp.
Välj basfärg fritt
Färgfält för mättnad och ljushet, reglage för färgton, HEX-fält (sex tecken eller förkortat till tre) eller RGB-värden från 0 till 255. Du kan också börja med ”Slumpmässig färg”.
HEX, RGB och HSL för varje färg
Varje färgruta visar HEX-kod samt RGB- och HSL-värden. Klicka på en färgruta eller den stora förhandsvisningen av basfärgen för att kopiera HEX-koden till urklipp.
Dela färgpaletten via länk
Basfärgen läggs automatiskt till i webbadressen, till exempel ?color=3b82f6. Den som öppnar länken ser samma basfärg och samma sex färgscheman.
Beräknas i din webbläsare
Alla färger beräknas i din webbläsare. Du behöver inget konto, och ditt färgval sparas inte eller skickas till en server.
Vidare till kontrast och tillgänglighet
Under färgschemana kan du med ett klick skicka basfärgen till kontrastkontrollen, färgblindhetssimulatorn eller färgväljaren.
Så fungerar det
Så skapar du en färgpalett från en basfärg
Sex steg från den första färgen till en färdig färgpalett.
Steg 1
Välj basfärg
Klicka eller dra i färgfältet för att välja mättnad och ljushet, och ställ in färgtonen med reglaget under.
Steg 2
Ange HEX-kod eller RGB-värden
Du kan också ange en HEX-kod som #3B82F6 eller tre RGB-värden. Med ”Slumpmässig färg” börjar du med en slumpmässig basfärg.
Steg 3
Jämför färgscheman
De sex färgschemana (komplementärt, analogt, triadiskt, delat komplementärt, tetradiskt och monokromatiskt) uppdateras direkt.
Steg 4
Kopiera färgkod
Klicka på en färgruta för att kopiera dess HEX-kod. RGB- och HSL-värdena visas direkt under den.
Steg 5
Dela färgpalett
Kopiera adressen från adressfältet. Basfärgen finns i länken som ?color=…, så att du kan öppna paletten igen senare eller dela den med andra.
Steg 6
Kontrollera kontrast
Öppna basfärgen via ”Kontrollera kontrast” i kontrastkontrollen eller visa den i färgblindhetssimulatorn.
Färgharmoni
Översikt över de sex färgschemana
Varje färgton motsvarar en vinkel mellan 0° och 360° på färgcirkeln. Fem av de sex färgschemana skapas genom att basfärgens färgton vrids i fasta vinklar, medan mättnad och ljushet förblir desamma. Det monokromatiska schemat ändrar i stället bara ljusheten.
Komplementär
2 färger · basfärg + 180°
Basfärgen och färgen mitt emot den på färgcirkeln. Maximal färgkontrast, bra för accenter som knappar.
Analog
3 färger · −30°, basfärg, +30°
Basfärgen med sina två närmaste grannar på färgcirkeln. Ger ett lugnt och harmoniskt intryck.
Triadisk
3 färger · 0°, 120°, 240°
Tre färgtoner jämnt fördelade på färgcirkeln. Livligare än ett analogt schema men ändå balanserat.
Delad komplementärfärg
3 färger · basfärg + komplementfärg ±30°
I stället för själva komplementfärgen används dess två grannar. Nästan lika hög kontrast som ett komplementärt schema, men med mindre spänning.
Tetradisk
4 färger · 0°, 90°, 180°, 270°
Två komplementfärgpar med 90° mellanrum. Ger ett rikt uttryck och fungerar bäst med en dominerande färg.
Monokromatisk
5 färger · samma färgton, fem ljushetsnivåer
Färgton och mättnad förblir desamma; bara ljusheten ändras från mörkt till ljust. De fem nivåerna går att skilja åt även med mycket ljusa eller mörka basfärger.
Bakgrund
Hitta komplementfärger och kombinera färger
Skärmens färgcirkel i stället för målarens
Generatorn vrider färgtonen i HSL-färgcirkeln, som bygger på skärmars färgmodell. Rent grönt #00FF00 ger där magenta #FF00FF, och rent blått #0000FF ger gult #FFFF00. I måleriets klassiska färgcirkel (rött, gult, blått) är paren i stället grönt och rött respektive blått och orange. Båda svaren stämmer inom sina respektive färgmodeller.
Fördela färger i designen
En vanlig tumregel är 60-30-10-regeln: cirka 60 % huvudfärg, 30 % sekundärfärg och 10 % accentfärg. Generatorn tillämpar den inte automatiskt. Du bestämmer själv vilken roll varje färg i ett schema får, till exempel basfärgen som huvudfärg och komplementfärgen som accent.
Harmoniskt betyder inte läsbart
Ett harmoniskt färgschema ger inte automatiskt tillräcklig kontrast mellan text och bakgrund. Kontrollera därför din slutliga kombination i kontrastkontrollen innan du använder den på en webbplats eller i en app. Länken ”Kontrollera kontrast” under färgschemana skickar din basfärg direkt dit.
Upptäck mer
Fler verktyg för färg och tillgänglighet
Färgväljare
Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.
Byggd av Justin Schuessler
Kontrastkontroll
Beräkna kontrastförhållandet mellan två färger enligt WCAG i realtid och kontrollera mot AA/AAA och UI-komponenter – direkt i webbläsaren.
Byggd av Justin Schuessler
Simulator för färgblindhet
Simulera direkt hur färgpaletter och egna bilder uppfattas vid protanopi, deuteranopi, tritanopi och akromatopsi – allt beräknas i webbläsaren.
Byggd av Justin Schuessler
Färgväljare för bilder
Läs av en färgkod från en bild: färgpipett med förstoringsglas, HEX, RGB och HSL, bildens färgpalett och kontrastinformation. Bilden stannar i webbläsaren.
Byggd av Dimitri Heissler
FAQ
Vanliga frågor om Färgpalettgenerator
Korta svar om färgpaletter, färgharmoni och det här verktyget.
Välj mättnad och ljushet i färgfältet, ställ in färgtonen med reglaget eller ange en HEX-kod eller RGB-värden. Du kan också klicka på ”Slumpmässig färg”. Alla sex färgscheman uppdateras direkt, utan någon genereringsknapp. Varje färgruta visar HEX, RGB och HSL, och ett klick kopierar HEX-koden.
Ange din färg som HEX-kod eller RGB-värden och titta på schemat ”Komplementärt”: Det visar din basfärg och färgen mitt emot den på färgcirkeln (färgtonen vriden 180°). Generatorn använder skärmars HSL-färgcirkel: Rent grönt #00FF00 ger magenta #FF00FF, och rent blått #0000FF ger gult #FFFF00. I måleriets klassiska färgcirkel skulle det i stället vara rött respektive orange.
Tre färger ger tre av de sex schemana: triadiskt (tre färgtoner med 120° mellanrum, livligt och balanserat), analogt (basfärgen och dess grannar vid −30° och +30°, lugnt och harmoniskt) och delat komplementärt (basfärgen plus komplementfärgens två grannar, kontrastrikt med mindre spänning). Ange din basfärg och jämför alla tre sida vid sida.
Ett monokromatiskt färgschema behåller samma färgton och mättnad och ändrar bara ljusheten. Generatorn skapar fem ljushetsnivåer från mörkt till ljust som går att skilja åt även med mycket ljusa eller mörka basfärger. Resultatet ger ett diskret och enhetligt intryck, till exempel för bakgrunder och ytor.
Harmoniskt betyder inte automatiskt lättläst: Framför allt kan text- och bakgrundsfärger med för liten skillnad i ljushet vara problematiska. Kontrollera därför din kombination i kontrastkontrollen innan du använder den. Länken ”Kontrollera kontrast” under färgschemana skickar din basfärg direkt dit.
60-30-10-regeln är en tumregel inom design: cirka 60 % huvudfärg, 30 % sekundärfärg och 10 % accentfärg. Generatorn tillämpar den inte automatiskt. Du fördelar själv färgerna i ett schema, till exempel basfärgen som huvudfärg och komplementfärgen som accent.
Ja. Basfärgen läggs automatiskt till som parameter i webbadressen, till exempel ?color=3b82f6. Kopiera adressen från adressfältet: Den som öppnar länken ser samma basfärg och samma sex färgscheman. Du behöver inget konto för det.
Färgpalettgeneratorn är gratis och kräver ingen inloggning. Alla färger beräknas i din webbläsare, och ditt färgval sparas inte eller skickas till en server. När du stänger fliken kan du bara få tillbaka paletten om du har kopierat länken i förväg.
Fler frågor?
Kontakta supportenLetar du efter en server för ditt nästa projekt?
En VPS från ZAP-Hosting ger dig full kontroll över din egen infrastruktur – med egen SSH-åtkomst, brandvägg och full root-åtkomst.
Ingen konfigurering. Ingen risk. Online på några sekunder.
Letar du efter fler verktyg? Visa alla bild- och designverktyg
Föredragen källa hos Google
