Softonic

Generator voor monochromatische paletten

Stap 1 / 3 Schaal maken

Kleuren en paletten worden in deze browser gemaakt. In de stappenmodus blijft het project maximaal 30 minuten in de sessieopslag van dit tabblad; geen kleurwaarde gaat naar onze servers of de URL.

Maak een monochromatische schaal

Voer één kleur in en kies de bewerking, interpolatieruimte en het aantal kleurstappen.

Toegestaan: #RGB, #RRGGBB, rgb(0–255) en hsl() met percentages. Alfakanalen worden niet geaccepteerd.

Wordt gebruikt in exports voor CSS-variabelen, Tailwind, SCSS en designtokens.

Kies een basiskleur en de generator bouwt er een monochromatisch palet omheen: tinten (stapsgewijs met wit gemengd voor een lichtere reeks), schaduwen (stapsgewijs met zwart gemengd voor een donkerdere reeks) en tonen (met grijs gemengd om de verzadiging te verlagen). Handig voor ontwerpsystemen die een samenhangende reeks nodig hebben vanuit één merkkleur, zoals de 50–950-schaal van Tailwind, maar dan afstelbaar, of om hover- en actieve toestanden te kiezen zonder het palet te verlaten.

Hoe het palet wordt gegenereerd

  1. 1

    Voer een basiskleur in

    Gebruik #RGB, #RRGGBB, gehele rgb()-kanalen of hsl()-percentages.

  2. 2

    Kies het palettype

    Kies een volledige lichte en donkere schaal, tinten naar wit, schaduwen naar zwart of tonen naar neutraal.

  3. 3

    Kies het aantal stappen

    5, 9 of 11 stappen. Negen gebruikt de gangbare labels 100–900 in Material-stijl; 11 voegt 50 en 950 toe voor een schaal in Tailwind-stijl.

  4. 4

    Kopiëren of exporteren

    Kopieer HEX-, RGB-, HSL- of OkLCH-waarden of exporteer CSS, Tailwind, SCSS en Design Tokens Community Group JSON.

Tinten vs. schaduwen vs. tonen

  • Tint = basiskleur + wit. Lichter, meer pastel. mix(base, #fff, p%), waarbij p het percentage wit is.
  • Schaduw = basiskleur + zwart. Donkerder, ingetogener. mix(base, #000, p%).
  • Toon = basiskleur + grijs. Zelfde lichtheid, lagere verzadiging, gedempter.

De drie bewerkingen leveren verschillende visuele karakters op: tinten voelen luchtig en optimistisch, schaduwen voelen degelijk en serieus, tonen voelen ingetogen en verfijnd.

Een reeks van 9 stappen vanuit één basis

Stap Beschrijving Typische toepassing
100 Zeer licht Oppervlakken, chip-achtergronden
200 Licht Uitgeschakelde toestanden
300 Middellicht Randen, scheidingslijnen
400 Licht gedempt Secundaire tekst (lichte achtergrond)
500 Basiskleur Standaardmerk, je uitgangspunt
600 Middeldonker Hover-toestanden bij primaire acties
700 Donker Actieve toestanden, koppen
800 Zeer donker Sterke tekst op lichte achtergrond
900 Donkerste schaduw Tekst met maximaal contrast

De cijferlabels zijn geïnspireerd op gangbare tokenconventies; de gemaakte kleuren zijn geen officiële Material- of Tailwind-waarden.

Waarom monochromatisch werkt voor interfaces

  • Herkenbaarheid. Elk element oogt onmiskenbaar verwant.
  • Samenhang. Eén terugkerende kleurtoon maakt relaties herkenbaar, maar maakt een interface op zichzelf niet toegankelijk voor kleurenblinden.
  • Eenvoud. Eén beslissing, de basiskleur, bepaalt het hele palet.

Combineren met neutralen

Een monochromatisch palet heeft ook grijzen nodig. Veelvoorkomend patroon:

  • Primaire reeks vanuit je merkkleur (9 stappen).
  • Neutrale reeks vanuit een ontzadigde versie van de primaire kleur (9 stappen).
  • Misschien één accentkleur (één goed gekozen stap voor waarschuwingen en CTA’s).

Zie dit als een beginstructuur, niet als vaste regel. Het aantal paletten hangt af van statussen, datavisualisatie, semantische kleuren en toegankelijkheidseisen van het product.

Controlepunten voor contrast

Voor tekst op een achtergrond vereist WCAG 4.5:1 voor normale tekst en 3:1 voor grote tekst. Labels als 100, 500 en 900 zeggen niets over een vaste contrastverhouding; het resultaat hangt af van de basiskleur, het palettype en de interpolatieruimte.

Controleer altijd de specifieke combinaties die je wilt gebruiken met een contrastchecker.

Exporteren naar je ontwerpsysteem

Uitvoerformaten:

  • CSS-custom-properties: --primary-50: #f0f9ff; --primary-100: ...
  • Tailwind-configuratie: JS-object klaar om te plakken in tailwind.config.js → theme.extend.colors.
  • SCSS-map voor Sass-projecten.
  • Designtokens als JSON met de $type/$value-structuur van de Design Tokens Community Group.

Veelgestelde vragen

Tinten bewegen bewust naar wit, waardoor een sterk verzadigde basis snel pastel kan worden. Vergelijk HSL en OkLCH, gebruik minder stappen of kies een minder verzadigde basiskleur.

Je kunt HSL of OkLCH kiezen. HSL verandert de assen voor lichtheid en verzadiging; OkLCH verandert perceptuele lichtheid en chroma en verlaagt chroma zo nodig om het resultaat binnen sRGB te houden.

In de volledige schaal is de basiskleur het middelste 500-token. De tintenschaal eindigt bij de basis, de schaduwschaal begint daar en de tonenschaal eindigt daar. Labels garanderen geen vaste lichtheid.

Er is geen directe Figma-integratie. Kopieer losse waarden of gebruik de CSS-, Tailwind-, SCSS- of Design Tokens Community Group JSON-tekst als beginpunt voor je eigen werkwijze.

Gerelateerde tools

PNG naar SVG vectoriseren

Trek PNG-rasterafbeeldingen in de browser over als SVG-paden. Ideaal voor logo’s, iconen en lijntekeningen. Regel drempelwaarde, aantal kleuren en afvlakking.

WebP naar PNG

Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.

GIF-maker

Zet een reeks afbeeldingen of een korte video om in een geanimeerde GIF. Stel beeldsnelheid, herhalingen en afmetingen in voor het exporteren.

Foto-editor

Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.

QR-codegenerator

Maak in uw browser een QR-code van tekst of een URL en download deze als PNG.

Barcodegenerator

Maak in de browser een 1D-barcode in Code 128, EAN, UPC, ITF-14 en andere ondersteunde formaten en download deze als SVG of PNG.