Kortversionen
- En färgpalettgenerator tar fram en uppsättning färger utifrån en regel, ett slumpfrö, ett foto eller en textprompt, men den avgör inte vilken färg som gör vilket jobb.
- De flesta genererade paletter ger varje färg lika tyngd och liknande mättnad, vilket ser bra ut som färgprover och högljutt i en riktig design.
- En användbar palett behöver en ljus eller mörk bakgrund, en bläckfärg för text, en eller två huvudfärger och en liten accent.
- Kontrollera att paletten spänner över ett brett ljushetsspann, eftersom färger med liknande ljushet flyter ihop och faller på kontrastkontroller.
- Testa alltid en genererad palett på en riktig layout med riktiga ord innan du bestämmer dig.
På den här sidan
En färgpalettgenerator är ett verktyg som föreslår en uppsättning färger som ser bra ut tillsammans, med hjälp av färgteoretiska regler, slump, ett foto eller en skriven prompt. Använd en för att komma loss, redigera sedan resultatet: lägg till en neutral bakgrund och en textfärg, ge varje färg ett jobb och testa den på en riktig design. Generatorns fem färgprover är en startpunkt. Paletten som fungerar är den du formar av dem.
De viktigaste typerna av palettgeneratorer
Varje generator gör en av fyra saker under huven. Att veta vilken sort du använder säger vad den är bra på och vad du måste rätta till.
Så fungerar den
Bra för
Se upp med
Så fungerar den
Bra för
Se upp med
Så fungerar den
Bra för
Se upp med
Så fungerar den
Bra för
Se upp med
Om du vill förstå reglerna bakom harmonihjul, läs färgharmoni. För fotometoden förklarar färgpalett från en bild hur du väljer bättre prover, och AI-färgpalettgeneratorer tar upp prompting.
Varför genererade paletter ofta misslyckas i riktiga designs
En generator visar färger som fem lika breda ränder. Riktiga designs är inte alls så: en färg täcker det mesta av ytan, en bär orden och resten syns i små mängder. Här är ett typiskt slumpresultat bredvid samma idé efter redigering.
Fem justeringar som gör vilken genererad palett som helst användbar
- 1
Behåll den enda färgen du faktiskt gillar
Lås den och behandla den som huvudfärg. Allt annat finns för att stödja den. Om inget sticker ut, generera igen i stället för att nöja dig.
- 2
Lägg till en bakgrund och ett bläck
Generatorer tar sällan med dem. Välj en ljus bakgrund (en varm eller sval benvit) eller en mörk, och en bläckfärg för text som kontrasterar starkt mot den. Tona båda svagt mot din huvudfärg så att de hör ihop.
- 3
Sprid ljusheten
Gör färgproverna gråa i tanken eller på skärmen. Du vill ha ljusa, mellan- och mörka värden, inte fem mellantoner. Justera ljusheten tills varje färg är tydligt skild.
- 4
Sänk mättnaden på alla utom en
Låt accenten förbli levande och lugna de andra. En stödfärg som är mjukare än huvudfärgen får huvudfärgen att se rikare ut.
- 5
Tilldela proportioner
En bra utgångsfördelning är 60-30-10-regeln: bakgrund omkring 60 %, huvudfärg omkring 30 %, accent omkring 10 %. Justera med ögat när du ser det i en layout.
För att göra de här justeringarna exakt, arbeta i ett färgformat som skiljer ljushet från nyans. HSL är lätt att läsa; OKLCH är bättre på att hålla ljusheten ärlig över olika nyanser.
Testa paletten på en riktig layout
Färgprover döljer problem som dyker upp så fort orden kommer. Lägg din palett på något du verkligen skulle göra, som ett inlägg, en meny eller en hero-sektion, och titta på den i den storlek folk kommer att se den. Kontrollera sedan varje textpar med en kontrastkontroll.
En palett förtjänar sin plats i ett riktigt format med riktiga ord. Om rubriken kämpar här, byt paletten, inte rubriken.
En gradient är ett snabbt extra test. Blanda bakgrunden, huvudfärgen och stödfärgen: om blandningen blir grå i mitten slåss två av färgerna, vilket förklaras i leriga gradienter.
linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)Spara den som tokens, inte som skärmdump
När paletten fungerar, namnge färger efter deras uppgift snarare än deras nyans, så att du kan ändra det blågröna senare utan att döpa om allt. I kod betyder det CSS-variabler; i designverktyg namngivna stilar; i Gradiently varumärkeskitet, där paletter, typsnitt och röst bor tillsammans och Designer tillämpar dem på det den gör.
:root {
--color-ground: #f7f3ec;
--color-ink: #1c2321;
--color-main: #2a6f68;
--color-support: #a8c5b8;
--color-accent: #e07a5f;
}
.button {
background: var(--color-main);
color: var(--color-ground);
}Söka på färg i stället för att generera
Ibland vill du egentligen inte ha fem koder utan en färdig bakgrund i en färgfamilj. Marknaden i Gradiently låter dig söka Marks på färgord som "djupt blågrönt" eller "varm persika" och filtrera efter utseende. Varje Mark är en levande gradient- och materialbakgrund med egen palett och typografisk röst, kontrollerad mot alla andra så att inga två ser likadana ut, och du kan designa med vilken oreserverad som helst gratis. Det är en annan väg till samma mål: färger som hör ihop, redan med sina uppgifter.
Vanliga frågor
Vilken är den bästa färgpalettgeneratorn?
Det beror på hur du arbetar: harmonihjul passar för att bygga kring en färg, slumpgeneratorer med lås passar för upptäckter och bildprovtagare passar för att matcha ett foto. Alla behöver redigeras efteråt.
Hur många färger ska en palett ha?
De flesta varumärken fungerar bra med en bakgrund, ett bläck, en eller två huvudfärger och en accent, alltså fyra eller fem totalt. Fler än så är svårt att hålla enhetligt.
Varför ser min genererade palett dålig ut i min design?
Oftast har färgerna liknande ljushet och mättnad och inga tydliga roller. Lägg till en neutral bakgrund och en textfärg, sprid ljusheten och behåll bara en levande accent.
Hur kontrollerar jag en palett för tillgänglighet?
Testa varje par av text och bakgrund med en kontrastkontroll, med minst 4,5:1 som mål för brödtext, och se paletten i gråskala för att försäkra dig om att färgerna är åtskilda.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil