Färgpalett & kontrast

Användningsområde: när är verktyget användbart?

Färg är ett av de första intrycken en besökare får av en webbplats eller ett spel, och det påverkar både känsla och förtroende på bråkdelar av en sekund. Det här verktyget hjälper dig att snabbt ta fram en genomtänkt palett när du startar ett nytt projekt, gör om en befintlig webbplats eller behöver ett startförslag att visa för en kund. I stället för att slumpa fram färger får du en uppsättning som hänger ihop och som utgår från vad du vill att besökaren ska känna.

Säg att du bygger en svensk e-handel inom hälsa och vill förmedla lugn och pålitlighet. Du väljer bransch och känsla, och får direkt en primärfärg, en sekundärfärg, en accentfärg samt färdiga text- och bakgrundsfärger. Driver du i stället en spelsajt som ska kännas energisk kan du välja den inriktningen och få en mer mättad palett. Varje färg visas som en ruta du kan klicka för att kopiera, och hela paletten finns även som CSS-variabler redo att klistra in i din kod.

Verktyget riktar sig till webbutvecklare, formgivare och företagare som vill ha en stabil utgångspunkt snarare än en färdig slutprodukt. Det är särskilt användbart i ett tidigt skede, när du snabbt vill jämföra olika riktningar innan du låser designen. Eftersom paletten alltid levereras med en läsbarhetskontroll slipper du dessutom den vanliga fällan att välja vackra färger som blir svåra att läsa i praktiken.

Allt körs lokalt, så du kan experimentera fritt utan att något sparas eller skickas iväg. Generera så många paletter du vill, kopiera de färger som fungerar och bygg vidare i ditt eget verktyg. Syftet är att ge dig en snabb, genomtänkt och tillgänglig start – inte att ersätta det designarbete som gör en produkt unik.

Så fungerar verktyget – och varför svensk designlogik är inbyggd

Verktyget översätter först din valda känsla till ett grundfärgton enligt vedertagen färgpsykologi: blått för förtroende, blågrönt för lugn, orangerött för energi, och så vidare. Utifrån det grundtonet beräknas resten av paletten med harmoniregler i HSL-rymden – sekundärfärgen ligger nära grundtonen, medan accentfärgen placeras längre bort på färgcirkeln för att ge tydlig kontrast åt knappar och uppmaningar.

Därefter läggs ett lager av svensk designlogik ovanpå. Skandinavisk formgivning präglas av funktion, dämpad mättnad och mycket ljus – tänk rena ytor och luft snarare än starka, skrikiga färgblock. Verktyget sänker därför mättnaden och höjer ljusheten på bakgrunden, mer för en finans- eller hälsosajt och mindre för en spelsajt där starkare färger ofta är önskvärda. Det är skillnaden mot en generisk palettgenerator: resultatet är kalibrerat efter en estetik som känns rätt på den svenska marknaden, inte bara matematiskt korrekt.

Till sist kontrolleras kontrasten mellan text och bakgrund med samma formel som tillgänglighetsstandarden WCAG använder. Du får ett konkret kontrastvärde och ett betyg – AA eller AAA – så att du vet att paletten inte bara är vacker utan också läsbar för så många som möjligt. Tillgänglighet är inte en eftertanke här, utan en del av själva genereringen.