Gratis tool

Kleurenpalet generator

Sleep een foto erin. Krijg de hoofdkleuren met HEX- en RGB-codes, een contrastcontrole met witte en zwarte tekst en een voorbeeld van een link-in-bio-pagina in die kleuren.

Je foto

Aantal kleuren
Volgorde

Je palet

    Voorbeeld op een link-in-bio-pagina

    Ana Ruiz

    Keramiek en pottenbakkerslessen

    Bekijk nieuwe mokkenBoek een lesNieuwste video

      Wat een kleurenpalet-generator doet

      Een kleurenpalet-generator vindt de hoofdkleuren in een afbeelding en geeft je hun codes. Deze leest je foto in je browser, groepeert vergelijkbare pixels en geeft de 5, 6 of 8 kleuren die het grootste deel van de afbeelding beslaan. Bij elke kleur hoort een HEX- en RGB-code en een contrastcontrole voor tekst.

      Creators gebruiken een palet uit hun eigen foto's zodat hun profiel, posts en link-in-bio-pagina als één geheel ogen. De contrastcontrole laat zien welke kleuren tekst kunnen dragen en welke beter werken als achtergrond of accent.

      Je foto verlaat je apparaat nooit. De tool tekent hem op een canvas in je browser, dus er is geen upload, geen account en geen limiet.

      Zo maak je een palet van een foto

      1. Sleep een foto erin

        Gebruik een foto die je vaak post, zoals je profielfoto of een productfoto. JPG-, PNG- en WebP-bestanden werken.

      2. Kies hoeveel kleuren

        Kies 5, 6 of 8 kleuren. Sorteer ze op hoeveel van de foto ze beslaan, of van licht naar donker.

      3. Controleer het contrast

        Elke kleur toont het contrast met witte en zwarte tekst. Gebruik de kleuren die slagen voor knoppen met tekst.

      4. Kopieer de codes

        Kopieer één HEX-code, de hele lijst of het palet als CSS-variabelen voor je website.

      Contrastregels voor tekst op je kleuren

      De Web Content Accessibility Guidelines (WCAG 2.2) bepalen het minimale contrast tussen tekst en achtergrond. De labels in de tool gebruiken deze getallen.

      Wat je controleertMinimale verhoudingWCAG-regel
      Gewone tekst op een kleur4.5:11.4.3 Contrast (Minimum), niveau AA
      Grote tekst: 24px, of 18,5px vet3:11.4.3 Contrast (Minimum), niveau AA
      Gewone tekst, strenger niveau7:11.4.6 Contrast (Enhanced), niveau AAA
      Grote tekst, strenger niveau4.5:11.4.6 Contrast (Enhanced), niveau AAA
      Een knop of icoon tegen de pagina3:11.4.11 Non-text Contrast, niveau AA

      Bronnen: W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Gecontroleerd op 11 november 2026.

      Op je More.You-pagina

      Je kleuren op je link-in-bio-pagina

      Op een More.You-pagina stel je de achtergrond, knoppen, lettertypes en kleuren zelf in. Elke wijziging komt in een concept met ongedaan maken, zodat je live pagina nooit een half afgemaakt ontwerp toont.

      more.you/

      • Thema's en kleuren in Free

        Kies een thema en pas dan de achtergrond, knopstijl, lettertypes en kleuren aan. Schud de themagalerij door elkaar als je ideeën wilt.

        Thema's en ontwerp

      • Begin met een template

        Templates per beroep geven je een kant-en-klare eerste pagina. Pas er een toe en vervang dan de kleuren door die uit je foto.

        Link-in-bio-templates

      • Vijf header-indelingen

        Klassieke, hero-, banner-, uitgesneden en vormheaders zetten je foto op de plek waar hij het best bij je palet past.

      Vragen over kleurenpaletten

      Hoe kiest de kleurenpalet-generator de kleuren?

      Hij verkleint je foto tot een kleine kopie, leest elke pixel en sorteert de pixels in groepen van vergelijkbare kleuren met een methode die median cut heet. Hij neemt van elke groep het gemiddelde, laat bijna identieke kleuren vallen en houdt de kleuren over die het grootste deel van de foto beslaan.

      Wordt mijn foto ergens geüpload?

      Nee. De tool opent je foto in je browser en leest hem op een canvas-element op je apparaat. Er wordt niets naar More.You of een andere server gestuurd en niets opgeslagen. Sluit het tabblad en de foto en het palet zijn weg.

      Wat betekenen HEX- en RGB-codes?

      Beide beschrijven dezelfde kleur. RGB geeft de hoeveelheid rood, groen en blauw van 0 tot 255, bijvoorbeeld rgb(178, 246, 227). HEX schrijft dezelfde drie getallen in grondtal 16 achter een hekje, bijvoorbeeld #B2F6E3. De meeste ontwerp-apps en websitebouwers accepteren beide.

      Hoeveel contrast heeft tekst nodig om leesbaar te zijn?

      WCAG 2.2, de webstandaard voor toegankelijkheid, vraagt op niveau AA om een contrastverhouding van minimaal 4,5:1 voor gewone tekst en 3:1 voor grote tekst. Grote tekst is 24px, of 18,5px in vet. De labels naast elke kleur tonen de verhouding met witte en met zwarte tekst.

      Hoe gebruik ik het palet op mijn link-in-bio-pagina?

      Gebruik de lichtste kleur als paginaachtergrond en een sterkere kleur voor de knoppen. Controleer dan of de knoptekst 4,5:1 haalt op de knopkleur. Het voorbeeld in de tool toont deze opzet en vertelt welke combinaties slagen.

      Welke bestandstypen kan ik gebruiken?

      Elke afbeelding die je browser kan openen, zoals JPG, PNG, WebP en GIF. Bij een GIF leest de tool het eerste frame. Opent een bestand niet, sla het dan op je telefoon of computer op als JPG of PNG en probeer het opnieuw.

      Kan ik het palet als CSS kopiëren?

      Ja. Kies Kopieer als CSS-variabelen voor een :root-blok met één variabele per kleur, bijvoorbeeld --color-1: #B2F6E3. Plak het bovenaan je stylesheet en gebruik var(--color-1) overal waar je de kleur nodig hebt. De variabelen volgen de volgorde die je koos, dus --color-1 is de meest gebruikte of de lichtste kleur.

      Meer gratis tools

      Gratis, zonder account. Wat je typt, wordt niet opgeslagen op onze servers.

      Lettertype generator

      Zet je tekst om in 24 stijlen, van vet en cursief tot script en bubbels. Kopieer en plak overal.

      Tool openen →

      Bio generator

      Krijg 12 bio-ideeën voor Instagram, TikTok, X of YouTube, met een live tekenteller.

      Tool openen →

      QR-code generator

      Maak van elke link een QR-code. Kies kleuren, download PNG of SVG. Hij verloopt nooit.

      Tool openen →

      Bekijk alle gratis tools

      Gidsen: Ontwerpgids voor je bio-pagina: indelingen, thema's, knoppen, Link-in-bio-thema's: zo kies je er een die converteert.

      Gerelateerde pagina's
      Bronnen
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Bronnen gecontroleerd op 11 november 2026.

      Je kleuren, op je eigen pagina

      Claim je gratis More.You-pagina en geef de achtergrond, knoppen en lettertypes de kleuren uit je foto.

      more.you/

      Taal