Färgpalettgenerator
Färgpalettgeneratorn bygger en palett med 5 färger från valfri basfärg med harmonier från färglära – komplementär, triadisk, analog, delad komplementär, tetradisk eller monokrom – och exporterar den som CSS custom properties.
Om verktyget
Färgpalettgeneratorn bygger en palett med 5 färger från valfri basfärg med harmonier från färglära – komplementär, triadisk, analog, delad komplementär, tetradisk eller monokrom – och exporterar den som CSS custom properties.
Så använder du det
- Välj en basfärg med färgväljaren.
- Välj typ av harmoni, till exempel komplementär eller triadisk.
- Titta på de fem färgrutorna som skapats.
- Klicka på Copy as CSS Variables för att klistra in paletten i din stilmall.
Bra att veta
- Komplementfärger ligger 180° isär på färgcirkeln; triadiska färger ligger 120° isär.
- Analoga paletter använder närliggande nyanser (ungefär 30° isär) och upplevs ofta lugna och sammanhållna.
- Delad komplementär kombinerar en basnyans med de två nyanserna på var sida om dess komplementfärg (±30°), vilket ger kontrast med mindre spänning.
- Monokroma paletter behåller en nyans och varierar bara mättnad och ljushet.
- Generatorn arbetar i HSL, som roterar nyansen utan att ändra färgens ljushet.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Vad är en komplementär färgpalett?
En komplementär palett kombinerar en nyans med den som ligger mittemot på färgcirkeln (180° bort), som blått och orange. Den ger starkast kontrast av alla harmonier.
Hur många färger bör en webbplats palett ha?
De flesta gränssnitt använder en primärfärg, en eller två accentfärger och ett antal neutrala färger. En harmoni med fem färger är en bra utgångspunkt som du kan skala ner eller bygga ut med ljusare och mörkare toner.
Vad är skillnaden mellan triadisk och tetradisk?
Triadisk använder tre nyanser jämnt fördelade 120° isär. Tetradisk använder fyra nyanser 90° isär som bildar en kvadrat på cirkeln, vilket blir rikare men svårare att balansera.
Kan jag använda paletten i CSS eller Tailwind?
Ja. Kopiera paletten som CSS custom properties och använd dem med var(), eller klistra in hex-värdena bland färgerna i ditt Tailwind-tema.