HedgieTools

Kleurenpaletgenerator

Begin met je hoofdkleur en je krijgt een compleet kleurenpalet voor je interface: secundair, tertiair, succes, waarschuwing, gevaar en neutrale kleuren, met hun tinten en contrastcontroles.

Je hoofdkleur

Typ een waarde of kies een kleur: de rest van het kleurenpalet wordt eromheen opgebouwd.

Secundair en tertiair
Notatie

Typ een HEX-waarde, zoals #2563EB, of klik op het vierkantje om de kleur te kiezen.

Je kleurenpalet

Klik op een waarde of een tint (50 tot 950) om die te kopiëren. Met het potlood vervang je een voorgestelde kleur door je eigen kleur: die blijft behouden als je de hoofdkleur wijzigt.

  • —

    Primair

    je kleur
  • —

    Secundair

    complementair
  • —

    Tertiair

    bijna complementair
  • —

    Info

    blauw
  • —

    Succes

    groen
  • —

    Waarschuwing

    oranje
  • —

    Gevaar

    rood
  • —

    Neutraal

    getint grijs

Tokens voor licht en donker

De functionele kleuren van je interface, klaar voor het lichte en het donkere thema. Elke kleur verwijst naar een tint van het kleurenpalet. Klik om te kopiëren.

  • --backgroundPagina-achtergrond
  • --surfaceKaarten en panelen
  • --surface-mutedSecundaire vlakken
  • --borderRanden en scheidingslijnen
  • --textHoofdtekst
  • --text-mutedSecundaire tekst
  • --primaryKnoppen en links
  • --primary-hoverHovertoestand
  • --on-primaryTekst op primaire kleur
  • --focus-ringFocusrand
  • --secondarySecundair accent
  • --tertiaryTertiair accent
  • --infoInformatie
  • --info-softAchtergrond voor informatie
  • --successSucces
  • --success-softAchtergrond voor succes
  • --warningWaarschuwing
  • --warning-softAchtergrond voor waarschuwingen
  • --dangerGevaar, fout
  • --danger-softAchtergrond voor fouten

Bijpassende kleuren

De klassieke kleurharmonieën rond je hoofdkleur, voor illustraties, grafieken of accenten.

  • Complementair

    de tegenovergestelde kleur

  • Gesplitst complementair

    zachter dan de tegenovergestelde kleur

  • Analoog

    de aangrenzende kleuren

  • Triade

    drie kleuren in evenwicht

  • Tetrade

    vier kleuren in een vierkant

  • Monochroom

    één kleurtoon, verschillende intensiteiten

Voorbeeld en contrast

Het kleurenpalet toegepast op een paar interface-elementen, en hoe leesbaar elke combinatie is volgens de WCAG-richtlijnen.

Thema van het voorbeeld
PaginatitelSecundaire tekst, minder belangrijk, onder de titel.
Een kaart met een link en knoppen.
PrimairSecundairTertiair
Info · Er is een update beschikbaar.
Succes · Je wijzigingen zijn opgeslagen.
Waarschuwing · Je abonnement verloopt binnenkort.
Fout · De betaling is mislukt.
  • Tekst op achtergrond
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Secundaire tekst op achtergrond
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Link op achtergrond
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Primaire knop
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Secundaire knop
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Tertiaire tekst op achtergrond
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Infomelding
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Succesmelding
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Waarschuwingsmelding
    Verhouding—Normale tekst—Grote tekst—AAA—
  • Foutmelding
    Verhouding—Normale tekst—Grote tekst—AAA—

Exporteren

Het kleurenpalet in het formaat dat je hierboven hebt gekozen (HEX).

Voer een hoofdkleur in om de code te genereren.

CSS-variabelen voor het kleurenpalet (--color-primary-500…). De tokens verwijzen naar deze variabelen; zet het donkere thema aan met data-theme="dark" op het html-element.

Over de kleurenpaletgenerator

Kies de hoofdkleur van je merk en krijg alles wat een interface eromheen nodig heeft: bijpassende kleuren, statuskleuren, neutrale kleuren, tinten, tokens voor licht en donker, contrastcontroles en code om te plakken, allemaal zonder je browser te verlaten.

Een volledig kleurenpalet uit één kleur

De tool berekent op basis van je hoofdkleur een secundaire en een tertiaire kleur, statuskleuren (info, succes, waarschuwing, gevaar) die bij de stijl ervan passen, en licht getinte grijzen voor achtergronden en tekst.

Kant-en-klare tinten

Elke kleur heeft elf tinten, van de lichtste (50) tot de donkerste (950), voor achtergronden, randen, hovertoestanden en tekst. Bevalt een voorgestelde kleur je niet? Vervang die door je eigen kleur: de tinten passen zich vanzelf aan.

Tokens voor licht en donker

Achtergrond, oppervlak, rand, tekst, hover, focus en achtergronden van meldingen: elke functionele kleur verwijst naar een tint van het kleurenpalet, met één waarde voor het lichte thema en één voor het donkere thema.

Gecontroleerd contrast

Elke combinatie van tekst en achtergrond wordt getoetst aan de WCAG-richtlijnen: 4,5:1 voor normale tekst, 3:1 voor grote tekst en 7:1 voor niveau AAA.

Exporteren naar CSS, Tailwind, JSON

Kopieer elke waarde in HEX, RGB, HSL of OKLCH, of download een bestand met CSS-variabelen, een Tailwind v4-thema, een Tailwind v3-configuratie, JSON of een gewone lijst. Alles gebeurt in je browser: er wordt niets verzonden of opgeslagen.

Gerelateerde tools