Att gissa sig till vilka färger som passar ihop tar tid från designarbetet. Den här generatorn bygger på de klassiska harmonierna i färghjulet - samma nyansförhållanden som lärs ut i färglära - så att varje palett blir matematiskt samordnad istället för uppskattad på känn. Klicka på ett färgprov för att kopiera hexkoden, eller kopiera hela paletten som färdiga CSS-variabler. Allt sker helt i din webbläsare: inget konto, ingen uppladdning, ingen spårning av dina varumärkesfärger.
Gratis Färgpalett Generator
Körs helt i din webbläsare - inget laddas upp, ingen registrering.
Harmoni
CSS-variabler
Vad är en färgpalett generator?
En färgpalett generator bygger ett matchande färgschema utifrån en basfärg med hjälp av färghjulets teori. Välj eller skriv in en hexfärg, välj en harmoni som komplementär, analog, triadisk eller monokrom, så räknas de samordnade färgerna fram direkt - var och en med en kopieringsbar hexkod. Allt körs i din webbläsare.
Så använder du verktyget
- 1Ställ in din basfärg. Klicka på färgrutan för att välja visuellt, skriv en hexkod som #6366f1, eller tryck på Slumpa för en ny startpunkt.
- 2Välj en harmoni. Växla mellan komplementär, delvis komplementär, analog, triadisk, tetradisk, monokrom, nyanser och toner. Paletten räknas om direkt.
- 3Kopiera färgerna. Klicka på ett färgprov för att kopiera den hexkoden, eller använd kopieringsknappen för att hämta hela paletten som CSS-variabler.
Vem passar det för
- Webbdesigners som startar en sajt utifrån en enda varumärkesfärg: skapa analoga eller delvis komplementära färger för bakgrunder, knappar och accenter.
- Frontend-utvecklare som behöver en startpunkt för design-tokens: kopiera paletten som CSS-variabler och klistra in den direkt i en stilmall.
- Marknadsförare och den som bygger presentationer och vill matcha diagram, sociala medier-bilder eller bildspel med en logotypfärg utan ett designverktyg.
- Illustratörer och hobbyister som utforskar nyanser och toner av en färg för att bygga djup, highlights och skuggor i ett verk.
Vanliga frågor
Är den här färgpalett generatorn gratis?
Ja - helt gratis utan konto, utan vattenstämplar och utan begränsningar. Skapa och kopiera hur många paletter du vill, för privata eller kommersiella projekt.
Laddas mina färguppgifter upp någonstans?
Nej. Paletten beräknas helt i din webbläsare med vanlig JavaScript. Dina varumärkesfärger, inmatningar och klick skickas aldrig till en server.
Vad är en komplementärfärg?
Komplementärfärgen ligger rakt motsatt din basfärg på färghjulet - en rotation på 180 grader. Komplementära par som blått och orange ger den starkaste kontrasten, vilket gör dem populära för call-to-action-knappar mot en varumärkesbakgrund.
Vad är skillnaden mellan en analog och en triadisk palett?
Analoga paletter använder näraliggande nyanser (inom ungefär 30 grader från basfärgen), vilket ger ett lugnt och sammanhängande intryck. Triadiska paletter tar tre nyanser med 120 graders mellanrum, vilket ger ett levande och balanserat schema med mer kontrast mellan färgerna.
Vad är nyanser och toner?
Nyanser (shades) mörkar din basfärg genom att flytta ljusheten mot svart; toner (tints) ljusar upp den mot vitt. Båda behåller samma nyans och mättnad, vilket gör dem perfekta för hover-lägen, kantlinjer och bakgrundslager av en varumärkesfärg.
Hur många färger bör en webbplatspalett ha?
En vanlig tumregel är 60-30-10: en dominant färg för ungefär 60% av gränssnittet, en sekundär färg för 30% och en accentfärg för 10%. Börja med en harmoni på 3-5 färger här och lägg sedan till nyanser och toner av varje för olika tillstånd och ytor.
Varför förändras paletten knappt för grått eller svart?
Grått, svart och vitt har ingen mättnad, så det finns ingen nyans för harmonirotationerna att verka på - att rotera ingenting ger samma neutrala färg tillbaka. Bygg istället en neutral skala med ljushetslägena: toner för svart eller mörkgrått, nyanser för vitt eller ljusgrått, och monokrom för mellangrått.