Maak elke hexkleur transparant. Kies een opacity, kopieer de 8-cijferige hex, rgba, hsla of Android-waarde en bekijk hem op lichte, donkere en geblokte achtergronden. Volledige alfatabel van 0 tot 100%.
Om een hexkleur transparant te maken, voegt u twee extra hexcijfers toe voor de alfa: #RRGGBBAA. Dat paar is de opacity maal 255, in hex geschreven, dus 50% is 80, 75% is BF en 25% is 40. Kies hieronder een kleur en opacity om de 8-cijferige hex plus de bijbehorende rgba- en hsla-waarden te krijgen.
Meest gebruikte opacitywaarden
Opacity
Alfapaar
Voorbeeld op #4F98FB
BF
Kies een kleur, sleep de opacity-schuifregelaar en kopieer het formaat dat uw code nodig heeft. De preview toont de kleur op wit, zwart en een dambordpatroon, samen met de effen kleur die er op elke achtergrond uit ontstaat.
Typ of kies een basiskleur. Hex met drie, zes en acht cijfers werkt allemaal; een bestaand alfapaar zet de schuifregelaar.
Sleep de schuifregelaar of typ een percentage van 0 tot 100.
Kopieer de 8-cijferige hex, rgba(), moderne rgb() met een schuine streep, hsla() of de Android-vorm #AARRGGBB.
Controleer de gemengde kleur op wit en op zwart als u een effen fallback nodig hebt of het tekstcontrast wilt testen.
Alfaparen worden afgerond, dus een percentage komt niet altijd exact terug. 80 in hex is 128 van de 255, oftewel 50.2%, nauwkeurig genoeg voor elk scherm.
Android-kleurresources zetten de alfa vooraan (#AARRGGBB), andersom dan in CSS. Die verwisseling is een veelvoorkomende reden dat een kleur er in een app verkeerd uitziet.
Controleer bij tekst het contrast tegen de gemengde kleur, niet tegen de transparante. 60% zwart op wit leest heel anders dan 60% zwart op een foto.
Gebruik de eigenschap opacity alleen als het hele element, inclusief kinderen, moet vervagen. Voor een doorzichtige achtergrond met effen tekst zet u de alfa in de achtergrondkleur.
Veelgestelde vragen
Ondersteunen alle browsers 8-cijferige hexkleuren?
Ja. De vormen #RRGGBBAA en #RGBA komen uit CSS Color Level 4 en werken in elke actuele versie van Chrome, Edge, Firefox en Safari. Zeer oude browsers negeren ze, dus voeg alleen een rgba()-fallback toe als u die nog ondersteunt.
Hoe zet ik opacity om naar hex?
Vermenigvuldig de opacity (0 tot 1) met 255, rond af op een heel getal en schrijf het als twee hexcijfers. Voor 30%: 0.3 maal 255 is 76.5, afgerond 77, en dat is 4D in hex. De volledige tabel op deze pagina toont elke stap van 5%.
Is #RRGGBBAA hetzelfde als rgba()?
Ze beschrijven dezelfde kleur. rgba(79, 152, 251, 0.5) en #4F98FB80 worden identiek weergegeven, op de kleine afronding in de hexalfa na. Kies wat uw codebase al gebruikt.
En hoe zit het met 4-cijferige hex?
Het alfapaar lezen
Een hexpaar telt van 00 tot FF, oftewel 0 tot 255. Het alfapaar gebruikt dezelfde schaal, waarbij 00 volledig transparant is en FF volledig dekkend. Daarom zien de gangbare waarden er eerst vreemd uit: de helft van 255 is 127.5, dus 50% wordt afgerond naar 128, en dat is 80 in hex.
Ontwerpers exporteren kleuren uit een ontwerpbestand vaak met een los opacitygetal. Als u dat omzet naar één 8-cijferige waarde, zet u het eenvoudig in een design token of een Tailwind-config.
Transparante kleuren in Tailwind
Tailwind voegt opacity toe met een schuine streep na de kleurnaam, bijvoorbeeld bg-sky-500/50, wat werkt voor elke kleur in het thema. Voor een eigen kleur accepteert een arbitrary value zoals bg-[#4F98FB80] de 8-cijferige hex direct.
Onder de motorkap mengt Tailwind 4 de kleur met transparent via color-mix(), en oudere versies gebruiken rgb() met een alfa. Het resultaat op het scherm is hetzelfde als de hexwaarde die deze tool u geeft.