Readdy logo

HEX-kleurenpaletgenerator

Begin met één HEX-kleur en maak een palet met tonen, harmonieën, semantische tokens en CSS-variabelen.

Basiskleur (HEX)
Ondersteunt #RGB en #RRGGBB, bijvoorbeeld #0EA5E9

Snelle voorinstellingen

Paletoverzicht
Bekijk kleurrelaties en bouw sneller een consistent systeem.

Basiskleur (HEX)

#2563EB

Tint: 221Verzadiging: 83%Helderheid: 53%

Harmoniekleuren

Analoog A
#45C7E4
Analoog B
#6345E4
Complementair
#E6AB2A
Triadisch A
#E2386D
Triadisch B
#6DE238
Toonschaal (50-900)
Tinten van licht tot donker voor achtergronden, randen, statussen en contrast.
50
#F4F6FB
100
#D1DBF1
200
#ABBFEB
300
#82A2E7
400
#5583E8
500
#2563EB
600
#124BC7
700
#0D3794
800
#082462
900
#04112F
Semantische tokens
Gebruik deze rollen voor een consistente interface en merkstijl.
Primair

Primair

Hoofdkleur voor merk en CTA

#2563EB
Secundair

Secundair

Ondersteunende merkkleur

#6C59D5
Accent

Accent

Accenten met hoog contrast

#E3AA2D
Achtergrond

Achtergrond

Achtergrondkleur van de pagina

#F7F7F8
Oppervlak

Oppervlak

Kaarten en oppervlaktecontainers

#E8E9EE
Tekst

Tekst

Standaardkleur van lopende tekst

#1B212C
CSS-variabelen
Kopieer ze naar je stylesheet.
:root {
  --color-primary: #2563EB;
  --color-secondary: #6C59D5;
  --color-accent: #E3AA2D;
  --color-background: #F7F7F8;
  --color-surface: #E8E9EE;
  --color-text: #1B212C;
  --color-primary-50: #F4F6FB;
  --color-primary-100: #D1DBF1;
  --color-primary-200: #ABBFEB;
  --color-primary-300: #82A2E7;
  --color-primary-400: #5583E8;
  --color-primary-500: #2563EB;
  --color-primary-600: #124BC7;
  --color-primary-700: #0D3794;
  --color-primary-800: #082462;
  --color-primary-900: #04112F;
}

Bouw een compleet kleursysteem vanuit één HEX-code

Deze tool zet een HEX-basiskleur realtime om in een gestructureerd palet. Voer een waarde in, kies een kleur of genereer een willekeurige kleur en bekijk harmoniekleuren, toonschalen, tokens en CSS-variabelen.

1

Stap 1: Voer een basiskleur in

Typ een HEX-code, kies een kleur of klik op ‘Willekeurige kleur’.

2

Stap 2: Bekijk het palet

Zie je basiskleur naast automatisch gemaakte harmoniekleuren die je ontwerp aanvullen.

3

Stap 3: Verken toonschaal en tokens

Bekijk tinten van 50–900 voor achtergronden, randen, statussen en tekstcontrast, plus praktische UI-tokens.

4

Stap 4: Kopieer CSS-variabelen of tokens

Kopieer met één klik CSS-variabelen of semantische rollen naar je stylesheet.

Gestructureerde kleurenpaletten voor echte projecten

Deze generator gaat verder dan kleurstalen en maakt direct bruikbare paletten voor interfaces, ontwerpsystemen en branding.

  • Kleuren op basis van harmonie

    Genereer automatisch aanvullende kleuren met visuele balans en contrast.

  • Toonschaal (50–900)

    Lichte tot donkere tinten voor UI-lagen, statussen, achtergronden en leesbaar contrast.

  • Semantische tokens voor consistente UI

    Vooraf ingestelde rollen houden primaire acties, succes, waarschuwingen en neutrale elementen consistent.

  • Kopieerklare CSS-variabelen

    Exporteer je hele palet met één klik als CSS-variabelen.

Veelgestelde vragen

Een tool die vanuit één HEX-kleur een compleet palet maakt, inclusief toonvariaties en harmoniekleuren.
Ja. Voer elke geldige HEX-kleur in, kies er een of genereer een willekeurige kleur.
De schaal 50–900 biedt tinten voor achtergronden, randen, hoverstatussen en toegankelijk tekstcontrast.
Kopieer ze en plak ze in je CSS-bestand of configuratie van je ontwerpsysteem.

Maak binnen seconden een schaalbaar kleurenpalet