Färgerna är det första en besökare lägger märke till på din webbplats. De sätter tonen, styr blicken och avgör om sidan känns proffsig eller rörig. Men hur väljer du färger som både ser bra ut och fungerar i praktiken? Här är en steg-för-steg-guide från första nyansen till färdig palett i din CSS.
1. Börja med en huvudfärg
Nästan varje bra palett utgår från en enda tydlig huvudfärg – ofta varumärkets färg eller en ton som fångar känslan du vill förmedla. Blått signalerar förtroende och lugn, grönt hälsa och hållbarhet, orange energi och värme. Har du ingen given färg? Prova dig fram i färgväljaren på startsidan tills något känns rätt, och notera dess HEX- och RGB-värden.
2. Bygg ut till en hel palett
En huvudfärg räcker inte långt. Du behöver också en accentfärg för knappar och länkar, samt neutrala toner för bakgrunder och text. Istället för att gissa kan du mata in din huvudfärg i vår färgpalettgenerator, som direkt föreslår harmoniska färger baserade på beprövade färgscheman. Vill du förstå varför vissa kombinationer fungerar bättre än andra hittar du grunderna i vår genomgång av färgteori och i det interaktiva färghjulet.
3. Håll dig till en stram palett
Ett vanligt nybörjarmisstag är att använda för många färger. En stark webbdesign klarar sig oftast med:
- En primärfärg för identiteten.
- En accentfärg som drar blicken till det viktigaste, som knappar.
- Två-tre neutraler – en mörk för text, en ljus för bakgrund och kanske en grå för kort och kanter.
Med 60-30-10-regeln fördelar du dem snyggt: cirka 60 procent neutral bakgrund, 30 procent primärfärg och 10 procent accent. Det ger lugn med en tydlig blickfångare.
4. Säkra kontrast och läsbarhet
Snygga färger är värdelösa om texten inte går att läsa. Här är kontrast avgörande, både för intrycket och för tillgängligheten. Riktlinjerna WCAG rekommenderar ett kontrastförhållande på minst 4,5:1 mellan brödtext och bakgrund. Ljusgrå text på vitt kan se elegant ut i din design, men bli oläslig för många besökare. Testa alltid dina viktigaste text-mot-bakgrund-par innan du bestämmer dig, och tänk på att accentfärgen på en knapp också behöver tillräcklig kontrast mot knappens text.
5. Tänk på både ljust och mörkt läge
Allt fler besökare använder mörkt läge. En färg som lyser fint mot vitt kan bli skrikig mot en mörk bakgrund, och tvärtom. Bestäm tidigt om din sida ska stödja båda lägena, och testa i så fall paletten i bägge. Ofta behöver du en aning ljusare, mindre mättade toner i mörkt läge för att det ska kännas behagligt.
6. Gör färgerna till variabler i CSS
När paletten sitter, lägg in färgerna som CSS-variabler istället för att upprepa HEX-koder överallt. Då byter du enkelt en nyans på ett ställe och håller allt konsekvent:
--primar: #3498db;--accent: #e67e22;--text: #1f2937;--bakgrund: #ffffff;
Namnge variablerna efter deras roll (primär, accent, text) snarare
än efter färgen. Byter du en dag ut det blå mot grönt slipper du en variabel
som heter --bla men innehåller grönt.
7. Testa i verkligheten
Till sist: se paletten i sitt riktiga sammanhang, inte som lösa färgrutor. Bygg en enkel testsida med rubrik, brödtext, en knapp och ett kort, och titta på helheten. Behöver du inspiration från namngivna färger kan du bläddra bland alla HTML-färgnamn och deras koder. En genomtänkt, stram och läsbar palett gör mer för intrycket än någon enskild trendfärg – ta dig tiden att få den rätt.