Hoppa till innehåll
100% lokalt

Färgpalettgenerator

Gör en basfärg till en helt palett med färgharmoniregler.

Inmatning
0
0
Utmatning

Färgpalettgenerator

Klistra in en basfärg som hex-kod, rgb() eller hsl()-värde och det här verktyget bygger en fullständig palett runt den med hjälp av färgharmoniregler, inte bara genom att ljusna samma nyans. Välj Komplementär för en enda motsatt färg, Delad komplementär eller Triadisk för balanserad kontrast, Tetradic för en fyrafärgsrektangel, Analog för intilliggande nyanser som passar naturligt tillsammans, eller Monokrom för toner och skuggor av en nyans.

Harmoniinställningen bestämmer hur många färger som kommer ut — Komplementär ger alltid två, Triadisk och Delad komplementär ger tre, Tetradic ger fyra — medan färgantalet och nyansstegsvinken bara gäller för Analog och Monokrom, där du väljer hur många färger och hur långt isär. Beräkna i HSL för klassisk färghjuljämväxtik, eller byt till OKLCH, som bibehåller samma uppfattad ljushet över varje nyans så att en palett inte av misstag kommer ut med en färgruta som ser mörkare eller tvättad ut bredvid resten. Mättnad- och ljusstyrkeregulatorer finjusterar hela paletten efter att harmonin är byggd, och färgformatinställningen skriver ut varje resultat som hex, rgb(), hsl() eller oklch().

Varje färgruta kontrolleras mot WCAG AA (4.5:1) som text på vit och svart bakgrund, markerad med en bockmark eller kryss bredvid varje förhållande — användbar för att välja vilka färger i en genererad palett som är säkra för brödtext jämfört med enbart dekoration. Exportera resultatet som en enkel lista, ett block CSS-anpassade egenskaper redo att klistra in i ett formatmalleark, eller ett Tailwind config-färgobjekt.

Allt körs lokalt i din webbläsare — färgen du anger laddas aldrig upp någonstans. Kopiera utmatningen, ladda ner den som en .txt-fil, eller skicka den till en annat verktygs inmatning för att fortsätta arbeta med den.

FAQ

Vilka indataformat accepterar det för basfärgen?
Hex-koder (#3b82f6, #38f, med eller utan #), rgb()/rgba() och hsl()/hsla(). Klistra in en av dem och paletten uppdateras omedelbar.
Vad är skillnaden mellan HSL och OKLCH för beräkningen?
HSL är den klassiska färghjuljämväxtiken och är snabb och förutsägbar. OKLCH är ett perceptuellt enhetligt utrymme, så en palett som är byggd i den behåller en mer jämn uppfattad ljushet över nyanser i stället för att vissa färger ser ut att se mörkare eller ljusare ut än andra av misstag.
Varför påverkar ändring av "färger i palett" bara vissa harmonier?
Komplementär, Delad komplementär, Triadisk och Tetradic är per definition fixerade — två, tre, tre och fyra färger. Räkningen kontrollerar endast Analog och Monokrom, som rimligen kan ha valfritt antal färger.
Vad betyder AA-bocken/korset bredvid varje färg?
Det är WCAG-kontrastförhållandet för den färgen som användes som text på vit och svart bakgrund, med en bockmark när den uppfyller AA-tröskeln på 4.5:1 och ett kryss när det inte gör det.
Laddas min färg upp någonstans?
Nej. Paletten genereras helt i din webbläsare — ingenting du anger skickas till en server.