Kleurconverter

Hoe te gebruiken

Een kleur op het web wordt meestal in een van drie formaten geschreven: HEX, RGB of HSL. HEX verpakt een kleur in één string — een # gevolgd door zes hexadecimale cijfers, in paren voor rood, groen en blauw, waarbij elk paar oploopt van 00 (geen) tot FF (vol). RGB spelt dezelfde drie kanalen uit als gewone getallen in plaats van hex-paren, met rood, groen en blauw elk lopend van 0 tot 255. HSL neemt een ander perspectief: in plaats van kanaalintensiteiten, beschrijft het tint als een positie rond een 360° kleurwiel, vervolgens verzadiging en lichtheid als percentages, die veel natuurlijker aansluiten op hoe mensen eigenlijk over kleur denken. Elk formaat blijft bestaan omdat het beter geschikt is voor een ander doel, niet omdat het ene het andere verving. HEX is compact en gemakkelijk om in CSS of een ontwerptool in te plakken — zes tekens leggen een exacte kleur vast zonder enige dubbelzinnigheid. RGB wordt direct toegewezen aan hoe schermen eigenlijk kleur produceren, door rood, groen en blauw licht op pixelniveau te mengen, en het strekt zich netjes uit naar rgba() door een vierde alfakanaal voor transparantie toe te voegen. HSL is degene waarnaar mensen grijpen wanneer ze een kleur aanpassen in plaats van deze helemaal op te geven: het verhogen of verlagen van lichtheid geeft een voorspelbare lichter of donkerder tint, en het verschuiven van tint beweegt soepel rond het kleurwiel om een overeenkomend palet samen te stellen. Een concreet voorbeeld maakt de relatie duidelijk. Neem een middelblauw: als HEX is het #3B82F6. Gesplitst in paren, 3B, 82 en F6 converteren van hexadecimaal naar decimaal als 59, 130 en 246 — exact dezelfde kleur geschreven als rgb(59, 130, 246). Converteer dezelfde rood-, groen- en blauwwaarden naar tint, verzadiging en lichtheid en u krijgt hsl(217°, 91%, 60%): een tint van 217° zit in het blauwe segment van het kleurwiel, 91% verzadiging betekent dat het een levendige, verzadigde blauwe kleur is, en 60% lichtheid plaatst het ruwweg in het midden van het zwart-tot-wit lichtheidsdomein. Alle drie de strings beschrijven dezelfde pixelkleur. Om de convertor te gebruiken, typt u een kleur in de invoer in een van de drie formaten — een HEX-code, een rgb()-waarde of een hsl()-waarde — of klikt u op de kleurkiezer en kiest u visueel. Zodra een geldige kleur wordt herkend, worden de andere twee formaten direct bijgewerkt naast een live voorbeeldswatch, zodat u kunt bevestigen dat het resultaat overeenkomt met uw verwachting voordat u het kopieert. Klik op het kopieerpictogram naast een waarde om het in dat exacte formaat op te halen voor plakken in CSS, een ontwerptool of code. Het converteren tussen formaten komt constant voor in echt werk: het afstemmen van een merk's exacte kleur wanneer een klant een HEX-code aangeeft maar uw ontwerptool HSL-schuivers wil, het bouwen van een CSS-thema waar u consistente RGB-waarden nodig hebt voor rgba()-overlays, het aanpassen van de lichtheid van een basiskleur omhoog of omlaag enkele procenten om een overtuigende zoemp- of actieve toestand te creëren, en het controleren dat tekst- en achtergrondkleurvens genoeg contrast hebben voor toegankelijkheid door hun lichtingswaarden te vergelijken.

Veelgestelde vragen

Wat is een HEX-kleurcode?

Een HEX-kleurcode is een haksymbool gevolgd door zes hexadecimale cijfers, zoals #3B82F6. De zes cijfers vormen drie paren, waarbij elk paar de intensiteit van rood, groen en blauw instelt op een schaal van 00 (geen) tot FF (vol, 255 in decimaal). Omdat het compact en ondubbelzinnig is, is HEX de meest voorkomende manier om exacte kleurvens in CSS en ontwerphulpmiddelen op te geven.

Wat is het verschil tussen RGB en HSL?

RGB beschrijft een kleur als drie kanaalintensiteiten — rood, groen en blauw, elk van 0 tot 255 — aansluitend op hoe schermen licht mengen om kleur te produceren. HSL beschrijft dezelfde kleur als tint (zijn positie op een 360° kleurwiel), verzadiging (hoe levendig of gedoofd het is) en lichtheid (hoe dicht bij zwart of wit). RGB is nauwkeurig voor schermen; HSL is gemakkelijker voor mensen om intuïtief aan te passen.

Hoe converteer ik HEX naar RGB?

Splits de zes HEX-cijfers in drie paren — de eerste voor rood, de tweede voor groen, de derde voor blauw — en converteer elk paar van hexadecimaal naar decimaal om een getal van 0 tot 255 te krijgen. Bijvoorbeeld, #3B82F6 splits in 3B, 82 en F6, die converteren naar 59, 130 en 246, wat rgb(59, 130, 246) oplevert. Deze convertor doet de wiskunde direct terwijl u typt.

Wat doet het alfakanaal?

Het alfakanaal regelt transparantie, toegevoegd als een vierde waarde naast rood, groen en blauw in rgba() of hsla(), variërend van 0 (volledig doorzichtig) tot 1 (volledig ondoorzichtig). Hiermee kan een kleur zich mengen met wat erachter zit — nuttig voor overlays, subtiele randen, of het dimmen van een element zonder de onderliggende kleur te veranderen. HEX ondersteunt het ook, als een optioneel 4de of 8ste paar cijfers.