Färgpalettgenerator med harmonier
Färgpalettgeneratorn skapar flera relaterade färger från en basfärg. Du väljer en HEX-kod eller använder färgväljaren och väljer harmoni: komplementär, analog, triadisk, split-komplementär, tetradisk eller monokrom. Resultatet visas som klickbara färgrutor med HEX och RGB. Du kan kopiera en enskild färg, alla färger som lista eller CSS-variabler i formatet --color-1, --color-2 och så vidare. Verktyget passar designers, utvecklare och marknadsförare som snabbt behöver en konsekvent palett.
Hur harmonierna räknas
Sidan konverterar basfärgen från HEX till RGB och vidare till HSL. Därefter roteras färgvinkeln enligt vald harmoni. Komplementär använder basfärgen och motsatt färg på 180 grader. Analog använder närliggande färger runt basen, till exempel minus och plus 30-60 grader. Triadisk använder tre färger med 120 graders avstånd. Split-komplementär tar två färger runt komplementet, tetradisk använder fyra färger runt färghjulet och monokrom behåller färgvinkeln men varierar ljusheten från mörkare till ljusare steg.
Från palett till designsystem
En palett är mest användbar när varje färg får en roll. Bestäm vilken färg som är primär, vilken som används för accent, vilka som är bakgrunder och vilka som bara ska användas i illustrationer eller diagram. Kopiera CSS-variablerna till projektets :root eller tema-fil och byt sedan namn till semantiska tokens som --color-primary eller --color-warning. Då blir det lättare att uppdatera varumärket senare utan att söka efter råa HEX-värden i hela kodbasen.
Tillgänglighet och balans
Färgharmoni betyder inte automatiskt tillgänglighet. En analog palett kan bli vacker men för lågkontrast, medan en komplementär palett kan bli intensiv och svår att använda i stora ytor. Kontrollera alltid textkontrast och se till att statusfärger också har text eller ikon. Monokroma paletter behöver ofta extra neutrala gråtoner för tabeller, gränser och inaktiva element. För diagram bör färgerna vara särskiljbara även för användare med färgseendedefekter.
Praktiska tips
Börja med en färg som redan finns i logotypen eller produkten. Testa flera harmonier och välj inte bara den mest färgstarka varianten; en bra webbpalett behöver ofta lugna bakgrunder, tydliga knappar och tillräckligt neutrala textfärger. Spara paletten tillsammans med exempel på knappar, länkar, felmeddelanden och diagram. Då blir det tydligt om färgerna fungerar i verkliga gränssnitt, inte bara som fristående rutor.
Export och vidare arbete
När du kopierar alla färger som CSS-variabler får du en bra startpunkt, men namnen bör anpassas efter funktion. En palett blir lättare att underhålla när variabler beskriver användning, inte bara ordning.
Kontrollera paletten i både ljus och mörk vy.
Bygg en användbar palett
En bra färgpalett innehåller inte bara accentfärger utan också neutrala färger, bakgrunder och kontraster för text. Kontrollera läsbarhet och använd färgerna konsekvent för status, varningar och primära åtgärder.
Kommentarer