På en hemsida har varje färg ett jobb: bakgrund, text, knappar, länkar och varningar. De här 12 paletterna är byggda för det, med ljus eller mörk bakgrund, en läsbar textfärg och en accent för knappar. Kopiera HEX-koderna direkt till din CSS eller ditt webbverktyg.
Rent SaaS-blått
Nästan vit bakgrund, mycket mörkblå text och klarblå knappar.
Diskret företag
För advokatbyråer, konsultfirmor eller industriföretag.
Varm e-handel
Orange får köpknapparna att lysa på en varm bakgrund.
Mörkt läge med grönt
Mörka bakgrunder i lager, ljus text och en grön accent för åtgärder.
Naturligt och ekologiskt
För butiker med naturprodukter, gårdar eller välmåendevarumärken.
Vänlig pastell
Lättillgänglig; den mörkt blågrå tonen håller texten läsbar.
Redaktionellt med rött
För bloggar, tidningar och medier; rött markerar länkar och rubriker.
Tech-lila
Vanligt i digitala produkter, onlinekurser och AI-verktyg.
Turkos och korall
Två komplementära accenter: en för knappar, en för varningar.
Mörk lyx
För hotell, restauranger eller premiumvarumärken där bilderna leder.
Hälsa och välmående
Ren och lugn; bra för kliniker och terapimottagningar.
Sand och blågrönt
Varm men seriös; för resor, fastigheter eller kaféer.
Tryck på en färg för att kopiera HEX-koden. Med pennikonen öppnar du paletten i editorn för att anpassa den.
Använd 60-30-10-regeln
Använd den dominerande färgen (oftast bakgrunden) på ungefär 60 % av sidan, en sekundär färg på 30 % (sektioner, kort, sidhuvud) och accenten på resterande 10 %. Spara accenten till knappar och länkar så att besökarna vet var de ska klicka.
Kontrollera textkontrasten
Tillgänglighetsriktlinjerna WCAG kräver en kontrast på minst 4,5:1 för vanlig text. Ljusgrått på vitt ser elegant ut men är svårläst, särskilt på mobilen i solen. Kör en kontrastkontroll innan du publicerar.
Bestäm färger för lägen och varningar
Förutom varumärkets palett behöver en hemsida färger för fel (rött), lyckat (grönt) och varningar (gult eller orange). Välj varianter som passar din palett och använd dem konsekvent i formulär och meddelanden.