Varför en bra färgpalett bär en hel design
Välj fel färger och folk känner det innan de kan sätta ord på det. En sida känns billig, en logotyp ser lerig ut, ett diagram blir till brus. Välj rätt och arbetet bara klickar: det känns avsiktligt, lugnt, lätt att skumma av. Färg gör mycket tyst arbete, sätter stämning, styr blicken och talar om för en läsare vad som är viktigast. Så en palett är inte dekoration du skruvar fast i slutet. Det är ett beslut du tar tidigt, och nästan allt annat lutar sig mot det.
Den goda nyheten är att du inte behöver en konstexamen för att landa i ett bra schema. Du behöver en handfull regler från färglära och ett snabbt sätt att pröva idéer. Det är exakt vad en generator är till för: den låter dig snurra igenom dussintals kombinationer på den tid det tidigare tog att pyssla med en enda.
Färglära, utan fikonspråk
De flesta harmonier kommer från en enkel idé: var färger sitter på hjulet i förhållande till varandra. Lär dig fyra mönster så kan du läsa eller bygga nästan vilket schema som helst.
- Komplementär använder två färger rakt motsatta varandra, som blått och orange. Den är högenergisk och bra för att fånga uppmärksamhet, även om för mycket av båda konkurrerar om fokus, så låt en leda och använd den andra som accent.
- Analog använder tre färger som sitter bredvid varandra, som rött, orange och gult. Den har låg kontrast, är lugn och den typ av harmoni du ser överallt i naturen. Skonsam för ögonen, men du kan behöva lägga till kontrast någonstans så att det inte blir platt.
- Triadisk använder tre färger jämnt utspridda runt hjulet, som rött, gult och blått. Ljus och balanserad, den fungerar bäst när en färg dominerar och de andra två stöttar.
- Monokromatisk håller sig till en nyans och varierar dess ljushet och mättnad. Det är det mest idiotsäkra schema som finns, rent och sammanhållet, och ett bra reservval när inget annat känns rätt.
En slumpgenerator är kul för inspiration, men det är i harmonilägena det verkliga värdet finns. De håller dina färger matematiskt relaterade, så de ser ut att höra ihop redan innan du justerar något.
HEX, RGB och HSL i klartext
Varje färg du kopierar kommer i ett par notationer, och de beskriver alla samma sak på olika sätt.
HEX är den sexteckenskod du ser oftast, som #3A7BD5. Det är helt enkelt rött, grönt och blått packat i en enda sträng, två tecken vardera. Den är kompakt och det är den du klistrar in i CSS eller ett designverktyg.
RGB skriver ut samma tre kanaler som tal från 0 till 255, som rgb(58, 123, 213). Samma färg, mer lättläst, och praktisk när du vill ha en alfakanal för transparens.
HSL beskriver färg på det sätt människor faktiskt tänker: hue (vilken färg, 0 till 360 grader runt hjulet), saturation (hur mättad) och lightness (hur ljus). Det är det enklaste formatet att justera för hand, eftersom att knuffa ljushet eller mättnad gör exakt det du förväntar dig utan gissningslek. Om du någonsin behöver flytta mellan format gör en snabb HEX till RGB-konvertering det smärtfritt.
Glöm inte kontrast och tillgänglighet
En palett kan se fantastisk ut och ändå misslyckas i samma stund någon försöker läsa text på den. Kontrast är där snyggt möter användbart. Web Content Accessibility Guidelines sätter en tydlig gräns: vanlig brödtext bör nå en kontrastkvot på minst 4,5:1 mot bakgrunden, och stor text minst 3:1. Det är inte byråkrati, det är skillnaden mellan en läsare som glider genom din sida och en som kisar, ger upp och lämnar.
Det praktiska greppet är att testa dina förgrunds- och bakgrundspar medan du bygger, inte efteråt. Ljusgrått på vitt kan se elegant ut i en mockup och bli osynligt på en mobil i dagsljus. När en kombination misslyckas behöver du oftast bara knuffa en färg mörkare eller ljusare, inte kasta hela schemat. Spara dina ljusa accentfärger till knappar, länkar och highlights snarare än långa textstycken, så undviker du de flesta kontrastproblem innan de börjar.
Ett praktiskt arbetsflöde
Här är ett flöde som håller över projekt. Börja med en ankarfärg du är säker på, ofta en varumärkesfärg eller en nyans som matchar stämningen du vill ha. Lås den, och låt sedan generatorn bygga en harmoni runt den. Rotera igenom komplementär, analog och triadisk tills något känns rätt, och övertänk inte första försöket; du letar efter en riktning, inte det slutgiltiga svaret.
När du har en kandidat, tilldela roller. Välj en dominant färg för bakgrunder och stora ytor, en sekundär för struktur, och en stark accent för de bitar som behöver sticka ut. En lös fördelning på 60-30-10, dominant till sekundär till accent, håller allt balanserat utan att kännas stelt. Kontrollera sedan kontrasten på varje textpar, kopiera hexkoderna, och du är klar. Spara de som fungerar, eftersom en palett du fick till för ett projekt ofta blir fröet till nästa. När du är redo att fortsätta bygga kan resten av vår samling av generatorer ta hand om de andra bitarna.
Vanliga frågor
Är den här färgpalettgeneratorn gratis att använda?
Ja. Den körs helt i din webbläsare, det finns ingen registrering, och du kan generera så många paletter du vill utan kostnad.
Vad är skillnaden mellan en slumpmässig palett och en harmonisk?
En slumpmässig palett ger dig fem orelaterade färger som inspiration. Ett harmoniskt schema, som komplementärt eller triadiskt, håller färgerna matematiskt relaterade på färghjulet, så de ser balanserade och avsiktliga ut tillsammans.
Hur kopierar jag en färgkod?
Klicka på hexkoden under valfri färgruta så kopieras den till urklipp. Du kan sedan klistra in den direkt i CSS, ett designverktyg, eller var du än behöver den.
Vad betyder WCAG-kontrast och varför bör jag bry mig?
WCAG är webbens tillgänglighetsstandard. Den kräver en kontrastkvot på minst 4,5:1 mellan vanlig text och dess bakgrund så att folk kan läsa ditt innehåll bekvämt, inklusive de med nedsatt syn.
Vilken färgharmoni bör jag välja?
Det beror på stämningen. Komplementär är djärv och högenergisk, analog är lugn och naturlig, triadisk är levande och balanserad, och monokromatisk är ren och idiotsäker. Testa några och se vad som passar ditt projekt.
Kan jag konvertera färgerna till RGB eller HSL?
Ja. Varje färg mappas till HEX, RGB och HSL eftersom de alla beskriver samma värde. Använd vårt HEX till RGB-verktyg om du snabbt behöver byta format.