Generera ett komplett register av toner och nyanser från en enda färg — välj din mörknings-/ljusningssteg och antalet nyanser, kopiera sedan vilket värde som helst direkt.

Basfärg
Steg
%
Hur mycket ljusare/mörkare varje nyans blir per steg (1–25 %).
Antal nyanser
Hur många toner och nyanser som ska genereras på varje sida om basfärgen.
Gradient
Genererade nyanser

Välj en basfärg, ett stegprocenttal och ett antal — varje ton och nyans beräknas direkt i din webbläsare.


Om Nyansgenerator

Nyansgeneratorn utökar en enda färg till ett komplett spann av toner och nyanser. Ge den en basfärg så tar den fram progressivt ljusare toner på ena sidan och progressivt mörkare nyanser på den andra — den klassiska 50-till-900-stegskalan som används i moderna designsystem.

Två inställningar formar resultatet: stegprocenten anger hur mycket ljusare eller mörkare varje nyans blir (1–25 % per steg), och antalet anger hur många toner och nyanser som visas på vardera sidan av basfärgen, upp till tio. En gradientremsa förhandsvisar hela skalan på en gång.

Genereringen sker direkt i din webbläsare medan du skriver — inget skickas till en server. Kopiera valfritt enskilt värde, hela listan, eller hela skalan som CSS-variabler, redo att släppa in i en designtoken-fil eller en Tailwind-liknande färgskala.

Så använder du Nyansgenerator

  1. Välj en basfärg med väljaren eller skriv in ett värde; klicka på "Slumpmässig färg" för inspiration.
  2. Ange stegprocenten för att styra hur kraftigt varje nyans ljusnar eller mörknar.
  3. Välj antalet nyanser för att avgöra hur många toner och nyanser som visas på vardera sidan.
  4. Klicka på en kulör för att kopiera den, eller använd "Kopiera alla" och "Kopiera CSS-variabler" för hela skalan.

Vanliga frågor

Ja, helt gratis. Alla toner och nyanser beräknas i realtid i din webbläsare, så det finns ingen kostnad, inget konto och ingen gräns för hur många skalor du genererar.

En ton är din basfärg blandad mot vitt (ljusare), medan en nyans är basfärgen blandad mot svart (mörkare). Generatorn tar fram båda riktningarna samtidigt, märkta "Toner (ljusare)" och "Nyanser (mörkare)" runt din basfärg.

Ange antalet till 4 eller 5 per sida så får du nio till elva kulörer totalt, med din basfärg i mitten. Ett steg på ungefär 8–10 % ger vanligtvis ett avstånd som liknar de 50–900-skalor som används av populära ramverk.

Små steg (3–6 %) ger subtila hover- och kantvariationer; medelstora steg (8–12 %) passar för fullständiga designsystem-skalor; stora steg (15–25 %) skapar högkontrastiga, posterliknande set. Håll koll på gradientförhandsvisningen — en bra skala bör mörkna jämnt utan bandning.

Ja. "Kopiera CSS-variabler" ger ut hela skalan som namngivna CSS-anpassade egenskaper, och "Kopiera alla" ger dig en enkel lista med värden som du kan klistra in var som helst, från SCSS-mappar till JavaScript-temaobjekt.


Populära sökningar
generator för färgnyanser toner och nyanser ljusa och mörka färgen nyanser av en färg generator för färgtoner skapa färgnyanser
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.
Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.