Softonic

Monokromatisk palettgenerator

Steg 1 / 3 Skapa skalan

Färger och paletter skapas i den här webbläsaren. I stegläget sparas projektet i flikens sessionslagring i högst 30 minuter; inga färgvärden skickas till våra servrar eller läggs i webbadressen.

Skapa en monokromatisk skala

Ange en färg och välj sedan omvandling, interpoleringsrymd och antal färgsteg.

Godkända format: #RGB, #RRGGBB, rgb(0–255) och hsl() med procenttal. Alfakanaler godkänns inte.

Används i exporter för CSS-variabler, Tailwind, SCSS och designtokens.

Välj en grundfärg så bygger generatorn en monokromatisk palett runt den: ljusningar (gradvis blandade med vitt för en ljusare skala), skuggningar (gradvis blandade med svart för en mörkare skala) och toner (blandade med grått för att sänka mättnaden). Användbart för designsystem som behöver en sammanhängande skala från en enda varumärkesfärg – som Tailwinds 50–950-skala, fast justerbar – eller för att välja hover- och aktiva tillstånd utan att lämna paletten.

Så genereras paletten

  1. 1

    Ange en grundfärg

    Använd #RGB, #RRGGBB, heltalskanaler i rgb() eller procentvärden i hsl().

  2. 2

    Välj palettyp

    Välj en fullständig ljus och mörk skala, ljusningar mot vitt, mörkningar mot svart eller toner mot neutralt.

  3. 3

    Välj antal steg

    5, 9 eller 11 steg. Nio använder de vanliga etiketterna 100–900 i Material-stil; 11 lägger till 50 och 950 för en skala i Tailwind-stil.

  4. 4

    Kopiera eller exportera

    Kopiera HEX, RGB, HSL eller OkLCH eller exportera CSS, Tailwind, SCSS och Design Tokens Community Group JSON.

Ljusningar vs. skuggningar vs. toner

  • Ljusning = grundfärg + vitt. Ljusare, mer pastellig. mix(base, #fff, p%), där p är andelen vitt.
  • Skuggning = grundfärg + svart. Mörkare, mer dämpad. mix(base, #000, p%).
  • Ton = grundfärg + grått. Samma ljushet, lägre mättnad, mer nedtonad.

De tre omvandlingarna ger olika visuella karaktärer: ljusningar känns luftiga och optimistiska, skuggningar känns jordnära och allvarliga, toner känns återhållsamma och sofistikerade.

En skala i 9 steg från en grundfärg

Steg Beskrivning Typisk användning
100 Mycket ljus Ytor, chip-bakgrunder
200 Ljus Inaktiverade tillstånd
300 Mellanljus Kantlinjer, avgränsare
400 Lätt nedtonad Sekundär text (ljus bakgrund)
500 Grundfärg Standardvarumärke, din utgångspunkt
600 Mellanmörk Hover-tillstånd för primära åtgärder
700 Mörk Aktiva tillstånd, rubriker
800 Mycket mörk Stark text på ljus bakgrund
900 Mörkaste skuggning Text med maximal kontrast

Sifferetiketterna är inspirerade av vanliga tokenkonventioner; de skapade färgerna är inte officiella Material- eller Tailwind-värden.

Varför monokromatiskt fungerar för gränssnitt

  • Igenkänning. Varje element ser omisskännligt besläktat ut.
  • Sammanhang. En återkommande kulör gör relationer lätta att känna igen, men gör inte i sig ett gränssnitt tillgängligt för personer med nedsatt färgseende.
  • Enkelhet. Ett enda beslut, grundfärgen, styr hela paletten.

Att para ihop med neutraler

En monokromatisk palett behöver även gråtoner. Vanligt mönster:

  • Primär skala från din varumärkesfärg (9 steg).
  • Neutral skala från en avmättad version av primärfärgen (9 steg).
  • Kanske en accentfärg (ett väl valt steg för varningar och CTA:er).

Se detta som en startstruktur, inte en fast regel. Antalet paletter beror på produktens tillstånd, datavisualisering, semantiska färger och tillgänglighetskrav.

Kontrollpunkter för kontrast

För text på en bakgrund kräver WCAG 4.5:1 för normal text och 3:1 för stor text. Etiketter som 100, 500 och 900 innebär inte ett visst kontrastförhållande; resultatet beror på grundfärg, palettyp och interpoleringsrymd.

Kontrollera alltid de specifika kombinationer du tänker använda med ett kontrastverktyg.

Exportera till ditt designsystem

Utdataformat:

  • CSS-anpassade egenskaper: --primary-50: #f0f9ff; --primary-100: ...
  • Tailwind-konfiguration: JS-objekt redo att klistra in i tailwind.config.js → theme.extend.colors.
  • SCSS-map för Sass-projekt.
  • Designtokens som JSON med Design Tokens Community Groups $type/$value-struktur.

Vanliga frågor

Ljusningar rör sig medvetet mot vitt, så en starkt mättad grundfärg kan snabbt bli pastell. Jämför HSL och OkLCH, använd färre steg eller välj en mindre mättad grundfärg.

Du kan välja HSL eller OkLCH. HSL ändrar axlarna för ljushet och mättnad; OkLCH ändrar perceptuell ljushet och chroma och minskar chroma vid behov så att resultatet håller sig inom sRGB.

I den fullständiga skalan är grundfärgen det mittersta 500-tokenet. Ljusningsskalan slutar vid basen, mörkningsskalan börjar där och tonskalan slutar där. Etiketterna garanterar ingen viss ljushet.

Det finns ingen direkt Figma-integration. Kopiera enskilda värden eller använd texten för CSS, Tailwind, SCSS eller Design Tokens Community Group JSON som startpunkt för ditt eget arbetsflöde.

Relaterade verktyg

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

GIF-skapare

Gör en bildsekvens eller en kort video till en animerad GIF. Ställ in bildfrekvens, loopar och storlek före export.

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Bildstorleksändrare för sociala medier

Ändra storlek på en bild till inbyggda sociala medie-presets för Instagram, Facebook, X, LinkedIn, YouTube, Pinterest och TikTok. Förhandsgranska varje PNG och ladda ned de storlekar du behöver.

Ändra bildstorlek

Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.

Bilduppskalare

Förstora lågupplösta bilder 2×, 3× eller 4× med AI-baserad superupplösning eller klassisk interpolering och behåll viktiga detaljer.