Wat is een hex-kleurcode?

Een hex-kleurcode schrijft een kleur als hexadecimale cijfers, zoals CSS en de meeste designtools dat doen. In #3b82f6 is elk paar cijfers één kanaal: 3b is rood, 82 is groen en f6 is blauw, van 00 (uit) tot ff (volledig). Met een optioneel vierde paar wordt de alpha-waarde, oftewel dekking, ingesteld. Zo is #3b82f6cc dezelfde blauwe kleur met een dekking van 80%. Codes waarbij elk paar hetzelfde cijfer herhaalt, kunnen worden verkort tot drie of vier cijfers. Zo is #ff8800 ook #f80.

Beschrijving van de tool

Met deze tool kun je een hex-kleurcode paar voor paar bewerken. Typ of plak een code, kies een kleur of plak er een in RGB, HSL of een ander formaat. Wijzig vervolgens de rode, groene, blauwe en alpha-paren of de dekking en bekijk het resultaat op een transparantieraster. De bewerkte kleur wordt weergegeven in de hex-notaties die CSS, Android en code gebruiken, en elke notatie kan direct worden gekopieerd.

Functies

  • Bewerk hex-codes met 3, 4, 6 of 8 cijfers, met of zonder #
  • Wijzig elk kanaal als een hex-paar van twee cijfers en de alpha-waarde als een hex-paar of percentage
  • Kies een kleur of plak er een in RGB, HSL of een ander formaat, waarbij de alpha-waarde behouden blijft
  • Bekijk transparante kleuren op een schaakbordpatroon
  • Verkrijg de kleur als 6-cijferige HEX, 8-cijferige HEX, korte HEX, rgb() of rgba(), #AARRGGBB en 0xAARRGGBB
  • Schakel tussen kleine letters en hoofdletters voor hex-cijfers
  • Werkt in je browser

Hoe werkt het?

Een code met 3 of 4 cijfers wordt uitgebreid door elk cijfer te verdubbelen. Een code zonder alpha-paar is volledig ondoorzichtig (ff). Eén cijfer dat in een kanaalveld wordt ingevoerd, wordt beschouwd als 0 gevolgd door dat cijfer. Zo wordt f dus 0f. Dekkingspercentages worden afgerond op de dichtstbijzijnde alpha-waarde van 0 tot 255. Zo wordt 80% cc (204). De korte notatie bestaat alleen wanneer beide cijfers van elk paar gelijk zijn; anders blijft dat veld leeg.

Tips

  • CSS leest het alpha-paar als laatste (#RRGGBBAA), maar Android-kleurresources en .NET plaatsen het vooraan (#AARRGGBB). Selecteer daarom de ARGB-velden voor deze indelingen.
  • Laat de alpha-waarde op ff staan voor een gewone code met 6 cijfers. De velden voor 8 cijfers en ARGB tonen de waarde nog steeds volledig.