Softonic

HEX-kleurkiezer

Stap 1 / 4 Hex-kleur

Kleur kiezen

Veelgebruikte voorinstellingen
Volgende: voorbeeld

Kies een kleur met het visuele kleurveld van je browser of typ een HEX-waarde van drie of zes tekens. De kiezer berekent RGB, HSL, een geschatte CMYK-waarde, relatieve luminantie en de exacte contrastverhoudingen tegen wit en zwart. De kleur wordt in deze browser verwerkt en niet aan de stappen-URL toegevoegd.

Zo kies je een kleur

  1. 1

    Begin met een voorbeeld of kleurveld

    Kies een voorbeeldkleur of open de ingebouwde kleurkiezer van je browser.

  2. 2

    Voer een exacte HEX-waarde in

    Typ drie tekens zoals #F60 of zes zoals #FF6600. De korte vorm wordt correct uitgebreid.

  3. 3

    Bekijk de berekende notaties

    Zie HEX, RGB, HSL, geschat CMYK en relatieve sRGB-luminantie bij elkaar.

  4. 4

    Controleer contrast en kopieer

    Vergelijk de kleur met wit en zwart en kopieer daarna de benodigde HEX-, RGB- of HSL-waarde.

Kleurnotaties in de praktijk

Elk kleurmodel beantwoordt een net andere vraag.

Notatie-overzicht

Notatie Onderdelen Waar je die gebruikt
HEX #RRGGBB CSS, ontwerptools, merkrichtlijnen
RGB rood 0–255, groen 0–255, blauw 0–255 CSS rgb(), beeldbewerkers
HSL kleurtoon 0–360°, verzadiging %, lichtheid % CSS hsl(), designsystemen
CMYK cyaan %, magenta %, geel %, key/zwart % Drukwerk, prepress

Toegankelijk contrast

WCAG 2.2 definieert minimale contrastverhoudingen tussen tekst en achtergrond:

  • AA voor normale tekst: ≥ 4,5:1
  • AA voor grote tekst (18 pt of 14 pt vet): ≥ 3:1
  • AAA voor normale tekst: ≥ 7:1

De kleurkiezer berekent de verhouding tegen wit en tegen zwart in real time. Als een specifieke voorgrondkleur belangrijk is, controleer dan elk kleurenpaar met een aparte contrastchecker.

Tips

  • HEX is de standaard in de meeste ontwerptools, maar de korte hex van drie tekens (#F60) staat voor #FF6600, niet voor #F06060.
  • HSL werkt prettig voor paletten: zet de kleurtoon vast en varieer de lichtheid voor tinten en schaduwen.
  • CMYK en RGB zijn niet perfect naar elkaar om te rekenen, CMYK-druk hangt af van het drukprofiel. Controleer drukwerk altijd met een proef op echt papier.
  • Ontwerp je voor moderne CSS, overweeg dan OKLCH voor stappen in lichtheid die visueel gelijkmatiger aanvoelen.

Veelgestelde vragen

Photoshop past een kleurprofiel toe, meestal sRGB voor schermen en vaak een ander profiel voor drukwerk. Browsers behandelen HEX-waarden zonder profiel als sRGB. Staat je document op Adobe RGB of ProPhoto, dan blijven de pixelwaarden gelijk, maar verschuift de waargenomen kleur.

Ja, allebei beschrijven ze puur rood: rood staat op 255 en groen en blauw staan op 0. HEX is alleen de tweecijferige hexadecimale notatie voor elke kanaalwaarde van 0 tot 255.

Kies je primaire kleur en kopieer de HSL-waarde. Houd in CSS of een ontwerpprogramma kleurtoon en verzadiging vast en pas de lichtheid aan. Controleer elk voorgrond-achtergrondpaar afzonderlijk.

De huidige kleur blijft maximaal 30 minuten in dit browsertabblad beschikbaar voor de begeleide stappen. De waarde wordt niet aan de URL toegevoegd en niet via onze servers verzonden. Opnieuw beginnen, het tabblad sluiten, browsergegevens wissen of verlopen verwijdert de kleur.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

JavaScript-obfuscator

Obfusceer JavaScript met string-array-codering, hernoemen van variabelen, control-flow-flattening en injectie van dode code ter bescherming van de front-end.

Tool beschikbaar in andere talen