Hoe het werkt
Klem elk kanaal vast op 0-255, rond het af en schrijf vervolgens twee hexadecimale cijfers per kanaal achter #. HSL is afgeleid van de RGB-verhoudingen: tint van het dominante kanaal, verzadiging van de afstand tussen max en min, lichtheid van hun gemiddelde.
- HEX accepteert 3 of 6 cijfers; waarden worden vastgeklemd op 0–255.
Waarom het ertoe doet
Ontwerptools exporteren verschillende formaten en CSS verwacht specifieke formaten. Handmatig converteren leidt tot afrondingsfouten, en dezelfde kleur die op drie manieren is geschreven, is gemakkelijk te verifiëren zodra u alle representaties naast elkaar ziet.
Een uitgewerkt voorbeeld
rgb(99, 91, 255) is #635BFF en hsl(244, 100%, 68%). De HEX-vorm is wat CSS-auteurs het vaakst plakken; HSL is gemakkelijker te verduisteren of te desatureren zonder nieuwe kanalen te raden.
Veel voorkomende fouten
- Ervan uitgaande dat dezelfde HEX er overal identiek uitziet zonder kleurbeheer.
- Als je die driecijferige HEX vergeet, wordt elke knabbel twee keer groter.
- RGB-kanalen bewerken terwijl u de lichtheid wilde aanpassen.
Praktische tips
Ontwerp in HSL als je systematische tinten en schakeringen nodig hebt: behoud tint en verzadiging, varieer lichtheid in stappen. Bewaar de HEX voor uitvoer, maar bewaar HSL-aantekeningen in het ontwerpbestand voor toekomstige aanpassingen.
Hoe het te gebruiken
- Open het gereedschap. Alles draait op uw browsertabblad.
- Plak of typ uw invoer en kies vervolgens de gewenste actie.
- Controleer het resultaat en kopieer het met één klik.
Veelgestelde vragen
Waarom is mijn HEX-waarde anders in een andere tool?
Waarden worden vastgezet op 0-255 en afgerond, en vervolgens geschreven als HEX in hoofdletters. Sommige tools behouden kleine letters of ongeldige invoer.
Wat is HSL?
Een alternatieve weergave: tint in graden, verzadiging en lichtheid in procenten. Dit is handig voor het aanpassen van kleuren.
Controleert het het contrast?
Nee. Hiermee worden kleurformaten geconverteerd; Contrastcontrole is een ander hulpmiddel.
Is deze tool echt gratis?
Ja. Er is geen account, geen betaalmuur en geen gebruikslimiet. Tools App wordt gefinancierd door aumenso, de studio erachter.
Is er iets dat ik invoer geüpload?
Nee. De tool wordt uitgevoerd op uw browsertabblad; wat u invoert, wordt nooit naar ons verzonden en nooit opgeslagen.