HSL naar HEX

Vergelijk HSL met HEX

CSS 3 introduceert een andere manier om kleur te definiëren met behulp van HSL (uit het Engels. Hue, Saturation, Lightness). is een model waarin kleur wordt bepaald door drie parameters: tint, verzadiging en lichtheid. Laten we elke parameter afzonderlijk bekijken. Het belangrijkste voordeel van HSL is de mogelijkheid om kleurkenmerken onafhankelijk van elkaar te specificeren. Dit biedt enorme kansen voor jou. U kunt de kleur eenvoudig helderder, donkerder, meer verzadigd of onverzadigd maken. En met behoud van zijn schaduw. Of omgekeerd - verander de tinten zonder hun verzadiging of helderheid te veranderen. Vaak worden preprocessors gebruikt om dergelijke functies te gebruiken, maar het is mogelijk zonder deze. De functie hsl () wordt gebruikt om HSL-kleuren op te geven. De functie heeft drie waarden, gescheiden door een komma: tint, verzadiging en lichtheid. Door de waarden van verzadiging en helderheid te wijzigen, kunt u aangrenzende tinten voor een bepaalde kleur krijgen.

In de meeste gevallen is het mogelijk om een kleur te herkennen aan een hexadecimale code, waarbij alleen rekening wordt gehouden met de eerste cijfers van de paren. In het onderstaande voorbeeld is het duidelijk dat de kleur is gemengd met veel rood, een beetje blauw en helemaal geen groen. Door kleur te begrijpen met hexadecimale code kan een webdesigner sneller door de paginacode navigeren, en bovendien kun je altijd indruk maken op collega's of klanten door te zeggen Ah, wat een prachtige bordeauxrode tint. U kunt ook gemakkelijk de helderheid, tint of verzadiging van een kleur wijzigen door alleen de hexadecimale code te bewerken. In het eerste voorbeeld hieronder wordt een van de paren gewijzigd in stappen van 10%, terwijl de kleurhelderheid toeneemt. In het tweede voorbeeld stijgt de helderheid, maar daalt de verzadiging. RGB-waarden kunnen ook worden opgegeven met hexadecimale (HEX) kleurwaarden in de vorm: #RRGGBB, waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale waarden zijn van 00 tot FF (hetzelfde als decimale 0- 255). Het hexadecimale systeem is, in tegenstelling tot het decimale systeem, gebaseerd, zoals de naam suggereert, op het getal 16.