Allemaal weten we hoe belangrijk kleuren zijn in elk onderwerp, of het nu gaat om een website layout, afbeelding, video of elk ander grafisch element. In de essentie is kleur een subjectieve ervaring die voortkomt uit de interactie tussen licht, het oog en het brein. Het toevoegen van kleuren aan de website geeft een nieuw leven aan het gehele layout en grafische elementen. Niemand heeft de voorkeur om naar webpagina’s te kijken met daarop alleen witte, zwarte en grijze kleuren. Kleuren maken de elementen voor het menselijk oog realistischer en aantrekkelijker lijken.
Niet alleen theoretisch, maar ook de psychologie komt in het spel als we kleuren gebruiken op websites. Er is wetenschappelijk aangetoond dat een specifieke set kleuren bepaalde emoties in het menselijk brein oproepen, zoals herfstkleuren zoals oranje en geel dat geluk of vreugde symboliseren, de rode kleur voor feestelijke seizoenen, en blauw als kalm en vertrouwd wordt gezien. Bovendien zult u zeker hebben gemerkt dat veel voedselbedrijven vaak rood en geel op hun websites gebruiken, farmaceutische bedrijven zich meestal aan groen voorbeelden geven op hun sites, fitnessbedrijven soms oranje gebruiken, enzovoort.
Het maken van een gebruikersinterface omvat verschillende dingen, inclusief CSS website layouts, elementen, CSS positieering, navigatie, tekst, enzovoort. Een andere factor die van belang is voor de gebruikersinterface is de HSL-kleuren in CSS. CSS-kleuren hebben ook importe in de gebruikersinterface, wat een van de factoren is die de meeste mensen vermijden.
Niet alleen webontwikkelaars, maar ook professionele fotografen en videoeditors gebruiken deze kleurenspelletjes veel. Het maken van een perfecte afbeelding is hun taak, en voor dat doel gebruiken ze veel kleurcontrast. Daarom is het kiezen van de ideale set kleuren voor elementen erg belangrijk.
CSS heeft veel eigenschappen, inclusief background-color, color, linear-gradient enzovoort, die gebruikers toestaan om de gewenste kleur toe te voegen of op de elementen in te vullen. Al deze eigenschappen helpen de gebruikers ook om de lettertype kleurrijk te maken of zelfs een mooi kleurpatroon aan de tekst en elementen toe te voegen.
Alle CSS-kleureigenschappen vereisen een kleurmethode om de kleur te definiëren en daarna deze kleur in het gespecificeerde element in te vullen. CSS heeft enkele ingebouwde kleurmethodes, zoals HSL, RGB, HSLA, Hexadecimaal enzovoort. Toch vereisen deze kleurmethodes een verzameling van gehele getallen in verschillende eenheden om de kleur te krijgen.
Hoewel veel blogs en handleidingen zich focusken op de RGB– en Hexadecimaal-methodes, is er een behoefte om de integrale aspecten van de HSL-methode te behandelen. In dit blog zal hij diep ingaan op de rol van HSL-kleuren in CSS, en zal alle details rondom de HSL-methode behandelen en hoe die verschilt van andere methodes.
Voordat we direct aan de HSL-methode gaan, laten we even kijken naar de andere twee CSS-kleurmethodes – RGB en Hexadecimaal, en waarom we HSL-kleuren in CSS nodig hebben.
Verschil Tussen RGB en Hex
De RGB-methode werkt door te假设en dat elke kleur een mengsel is van Rood, Groen en Blauw. Deze methode vereist drie decimale waarden binnen het bereik 0 – 255 in de functie rgb(). Deze waarden specificeren de intensiteitsniveau voor elk van de drie kleuren, waarbij 0 de laagste intensiteit en 255 de hoogste intensiteit vertegenwoordigt.
Hier zijn enkele voorbeelden van RGB-kleurencombinaties op verschillende intensiteiten:
Nu neem ons een voorbeeld om het werking van het RGB-systeem te begrijpen.
.container {
background-color: rgb(0, 200, 120);
width: 100%;
height: 100px;
}Uitvoer:
Nu gaande naar het Hexadecimaal systeem. Het werkt ook op het concept dat elke kleur een mengsel is van Rood, Groen en Blauw. Het Hexadecimaal systeem vereist drie twee-cijferige HEX-getallen en begint met een ‘#’ teken. Deze drie Hex-waarden geven respectievelijk de intensiteitsniveaus van Rood, Groen en Blauw aan.
Omdat er invoorkomt van Hexadecimaal waarden, en de basis van Hexadecimaal ligt tussen de waarden 0-15, waar de waarden binnen het bereik van 10-15 worden weergegeven door de letters A-F. Daarom geeft 00 de kleur met de laagste intensiteit, en FF resulteert in het hoogste intensiteitsniveau.
Hier zijn enkele algemene Hex-kleuren met codes:
Nu neem ons een voorbeeld om de werking van het Hex-systeem te begrijpen.
.container1{
background-color:#91D8E4;
}Uitvoer:
Werken met RGB en Hexadecimaal methoden is gemakkelijk en geeft ons alles wat we willen. Maar dat is niet waar. Werken met deze twee methoden is niet zo gemakkelijk als het lijkt. Laat ons zien hoe dat is.
Problemen geassocieerd met RGB en Hex-kleurcodes.
Een van de significante problemen die deze twee methodes brengen is dat ze niet intuitief zijn. Dat betekent dat ze niet op de manier werken waarop het menselijke brein kleuren herkent. Wanneer iemand een kleur ziet, zal het menselijke brein deze kleur niet in rood, groen en blauw verdelen. Daarom is het moeilijk voor ons om kleuren te herkennen via hun RGB-getal en hexadecimaal nummer.
Binnen deze moeilijkheden kan een voorbeeld voor ontwikkelaars of testers in de dagelijkse omgeving zijn het behoeft om RGB naar Hexadecimaal om te zetten of andersom voor een betere menselijke verstrekkingskracht en communicatie.
Bij het maken van een gebruikersinterface moeten UI-ontwerpers en webontwikkelaars verschillende tinten van een bepaalde kleur gebruiken om een constant thema door de interface heen te houden. Bijvoorbeeld, 30 tinten blauw, 20 tinten groen, 10 tinten oranje, enzovoort, afhankelijk van de vereisten. Dat kan een mengelmoes opleveren als we CSS-variabelen gebruiken om deze veelvuldige kleurvariaties op te slaan. Wanneer we merken dat de RGB-waarden van alle deze varianten niet met elkaar samenhangen, wordt de situatie verergerd.
Maar de nadelen van de RGB- en hexadecimaalmethodes kunnen worden verwijderd met de HSL-kleuren in CSS. Laat ons nu de rol van HSL-kleuren in CSS begrijpen door te beginnen met het bespreken wat de HSL-methode betekent, hoe ze werkt en hoe ze de nadelen van de RGB- en hexadecimaalmethodes overwint.
Wat is HSL?
HSL staat voor Hue, Saturation, en Lightness. Met andere woorden, HSL bestaat uit drie meetfactoren – Hue, Saturation en Lightness. Net zoals de andere twee bovenbesproken methodes werkt het HSL-systeem ook op het观察 dat elke kleur een mengsel is van Rood, Groen en Blauw.
Omdat de primaire kleuren in de HSL-indeling Rood, Groen en Blauw zijn, is de RGB-kleurenwiel de centrale concept achter de HSL-kleuren in CSS.
Het RGB (Rood Groen Blauw) kleurenwiel representeert voornamelijk kleuren die ingevuld zijn binnen een cirkel. Dit wiel toont de relatie tussen primaire, secundaire en tertiaire kleuren. Echter, er zijn drie typen kleurenwielen – RGB (Rood Groen Blauw), CMY (Cyaan Magenta Geel) en RYB (Rood Geel Blauw).
Het bovenstaande gekleurde plaatje representeert het RGB-kleurenwiel. U kunt zien dat rood op 0 graden, groen op 120 graden en blauw op 240 graden staat. Laten we diepgaan in deze drie kenmerken en begrijpen wat er achter de schermen gebeurt als we HSL-kleuren in CSS gebruiken.
Hue
Hue is de eerste waarde die wordt toegekend in deze methode bij het gebruik van HSL-kleuren in CSS. Het is de meet van de kleurhoek op het kleurenwiel. Het gedefinieerde hoekwaarde wordt berekend vanaf de positieve x-as in de anti-horizontale richting, en de kleur op die hoek wordt teruggegeven. Omdat het een meet van een hoek is, is zijn standaard waarde in graden. Echter, deze methode laat ons de hoekwaarden in andere eenheden definiëren, inclusief rad, grad en ommekeerbaarheid.
De waarde van de hoekeenheid valt binnen een bereik van 0–360 graden. Rood op 0 graden, groen op 120 graden, en blauw op 240 graden. Voor rad is het bereik van waarden 0–6,28 rad. De meest gebruikte eenheden voor de waarden in de HSL-kleuren in CSS zijn de gradenwaarden.
Laten we een voorbeeld nemen om te begrijpen hoe de toon werkt.
div {
border: 2px solid;
height: 100px;
background-color: hsl(123deg, 39%, 49%);
}Uitvoer:
Alhoewel de hoekwaarden tussen 0-360 zijn beperkt, kan het waarden aannemen die minder zijn dan 0 graden en groter zijn dan 360 graden. Wanneer de waarde boven de 360 is, wordt de waarde omgezet naar een waarde binnen het bereik door er 360 vanaf af te trekken. Bij waarden minder dan 0 of negatieve waarden, wordt de waarde toegevoegd aan 360, en de resulterende waarde wordt dan gebruikt om de kleur te verkrijgen.
background-color: hsl(400deg, 39%, 49%);Uitvoer:
background-color: hsl(-120deg, 39%, 49%);Uitvoer:
<div class="container1">Container 1</div>
<div class="container2">Container 2</div>
div {
border: 2px solid;
height: 100px;
text-align: center;
font-size: 80px;
margin-bottom: 10px;
}
.container1 {
background-color: hsl(60, 39%, 49%);
}
.container2 {
background-color: hsl(420, 39%, 49%);
}Uitvoer:
Als we het in termen van hoekwaarden overwegen, zijn dan 60 graden en 420 graden (420 – 360 = 60) beide dezelfde waarden. Daarom krijgen we dezelfde achtergrondkleur in beide containers, zoals we in het voorbeeld observeren.
.container1 {
background-color: hsl(90, 39%, 49%);
}
.container2 {
background-color: hsl(-270, 39%, 49%);
}Uitvoer:
Hier kunnen we ook observeren dat 90 graden en -270 graden ons dezelfde resultaat geven, voor hetzelfde reden als in het voorgaande voorbeeld. 90 graden en -270 graden zijn beide dezelfde waarden als we ze in hoekwaarden nemen.
Nu gaan we verder met de 2e eigenschap van de HSL-methode, namelijk de saturatie.
Saturatie
Verzadiging bepaalt de zuiverheidsgraad van de kleur en hoeveel de kleur verzadigd of onverzadigd is. Met andere woorden, de verzadigingskenmerk bewerkt de intensiteitsniveau van de kleur. Het verzadigingsmeting accepteert een geheel getal in procentuele eenheden om de verzadiging van de kleur te defineren.
Laat ons een voorbeeld nemen om te begrijpen hoe verzadiging werkt.
.container{
background-color:hsl(60, 45%,49%);
}Uitvoer:
Als de waarde van de verzadigingskenmerk hoog is, dan is de kleurintensiteit ook hoog, en de hoeveelheid grijsgebied in die kleur zal minder zijn. Daarom geeft een 100% waarde van de verzadiging ons een zuivere kleur, een 50% waarde zal resulteren in half kleur en half grijsgebied, en 0% zal resulteren in volledig grijsgebied.
.container1{
background-color:hsl(60, 0%,49%);
}
.container2{
background-color:hsl(420, 25%,49%);
}
.container3{
background-color:hsl(420, 50%,49%);
}
.container4{
background-color:hsl(420, 75%,49%);
}
.container5{
background-color:hsl(420, 100%,49%);
}Uitvoer:
In het bovenstaande voorbeeld zie je de verschillen die we krijgen in de achtergrondkleur van de containers door de waarde van de verzadigingskenmerk van 0% naar 100% toe te laten stijgen. Op de 0% waarde krijgen we in container 1 volledig grijsgebied, en als de waarde toeneemt, neemt ook de kleurintensiteit toe. Uiteindelijk is de intensiteit het hoogst op 100% in container 5.
Omdat de verzadigingskenmerk een procentuele waarde accepteert, valt de verkregen waarde onder het 0% – 100% bereik. Op een of andere manier kan de gebruiker ook waarden hoger dan 100% en lager dan 0% in de verzadigingskenmerk doorgeven.
Maar net zoals bij de hoekkenmerk, is er geen nut in waarden buiten de grenzen doorgeven omdat als de gebruiker een waarde hoger dan 100% doorgeeft, blijft de kleurintensiteit gelijk aan 100%. Bij waarden onder de 0% (negatieve waarden) blijft de intensiteit gelijk aan 0%.
.container1 {
background-color: hsl(60, 0%, 49%);
}
.container2 {
background-color: hsl(420, -25%, 49%);
}Uitvoer:
Hier kan u zien dat we waarden van 0% en -25% hebben toegewezen aan de saturatiekenmerk en in beide containers krijgen we dezelfde achtergrondkleur.
.container1 {
background-color: hsl(60, 100%, 49%);
}
.container2 {
background-color: hsl(420, 200%, 49%);
}Uitvoer:
In dit voorbeeld hebben we de waarden 100% en 200% geinitialiseerd voor de saturatiekenmerk en voor deze twee verschillende waarden krijgen we dezelfde achtergrondkleur in beide containers.
Nu is het de tijd voor de laatste kenmerk van de HSL-methode die wordt gebruikt in HSL-kleuren in CSS, namelijk Helderheid.
Helderheid
Zoals de naam suggereert, regelt de Helderheidkenmerk de hoeveelheid licht in de kleur. Met andere woorden, helderheid kan ook worden beschreven als de eigenschap die bepaalt hoe donker of licht de kleur uiteindelijk wordt. Net als de saturatiekenmerk vereist de helderheidkenmerk ook een geheel getal in procentuele eenheden.
Bekijk ons een voorbeeld om te begrijpen hoe de Helderheid werkt.
.container {
background-color: hsl(60, 39%, 49%);
}Uitvoer:
.container1 {
background-color: hsl(60, 39%, 0%);
color: white;
}
.container2 {
background-color: hsl(420, 39%, 25%);
}
.container3 {
background-color: hsl(420, 39%, 50%);
}
.container4 {
background-color: hsl(420, 39%, 75%);
}
.container5 {
background-color: hsl(420, 39%, 100%);
}
Uitvoer:
Hier kan u zien dat bij 0% helderheid de achtergrondkleur in Container 1 zwart is, en als de waarde van de helderheid toeneemt, wordt de helderheid van de kleur hoger, en bij 100% helderheid is de kleur volledig; dus is de achtergrondkleur in Container 5 volledig wit.
Net als de saturatiekenmerk accepteert de helderheidkenmerk waarden boven de 100% en onder de 0%. Maar waarden boven de 100% werken hetzelfde als 100%, en waarden onder de 0% (negatieve waarden) werken hetzelfde als 0%. Laat ons dit zien.
.container1 {
background-color: hsl(60, 39%, 0%);
}
.container2 {
background-color: hsl(420, 39%, -25%);
}Uitvoer:
.container1 {
background-color: hsl(60, 39%, 100%);
}
.container2 {
background-color: hsl(420, 39%, 250%);
}Uitvoer:
In dit voorbeeld kunnen we zien dat, hoewel we een 100% helderheidswaarde hebben toegewezen aan Container 1 en een 200% waarde aan Container 2, hetzelfde resultaat op de achtergrondkleur krijgt.
We hebben de drie kenmerken van HSL-kleuren in CSS besproken, maar dat is niet alles. Een andere eigenschap onder HSL-kleuren in CSS is “A,” afkorting van “alpha.” Het is het vierde kenmerk. Het alfa-kenmerk specificeert de doorschijnendheid van de kleur. In andere woorden, het alfa-kenmerk stelt simpelweg de transparantiegraad van de kleur in. In HSL wordt het alfa-kenmerk met de HSLA-methode gebruikt.
Hoewel andere kenmerken van de HSL-kleuren in CSS een waarde vereisen bestaande uit eenheden, vereist het alfa-kenmerk geenheidswaarden. Het alfa-kenmerk vereist een waarde zonder eenheid die varieert van 0 tot 1. Bij 0 is de kleur onzichtbaar of verborgen; bij 1 is het alfa-kenmerk op zijn hoogtepunt en is de kleur volledig zichtbaar.
.container{
background-color:hsla(60, 39%,49%, 0);
}Uitvoer:
.container{
background-color:hsla(60, 39%,49%, 1);
}Uitvoer:
Hier hebben we het alfa-kenmerk toegekend met de waarde 1, de achtergrondkleur van de container verschijnt en we kunnen de achtergrondkleur beginnen.
Het vereisen van geenheidswaarden is niet het enige dat de alfa-kenmerken van elkaar onderscheidt. Een alfa-kenmerk kan elke waarde tussen 0 en 1 accepteren, inclusief decimale waarden (0.1, 0.2, 0.01), die niet werken bij de andere kenmerken van de HSL-kleuren in CSS.
.container {
background-color: hsla(60, 39%, 49%, 0.5);
}Uitvoer:
In dit voorbeeld zie je dat we een waarde van 0.5 (半, half) aan de alpha-eigenschap toegewezen hebben. Daardoor krijgen we een achtergrondkleur met半 doorzichtigheid in de container. Niet alleen eenheden met één decimaal, alpha-eigenschappen accepteren ook twee decimalen. Dit geeft volledige controle over de doorzichtigheidsgraad van de kleur.
Hier is een voorbeeld dat dit illustreert.
.container {
background-color: hsla(60, 39%, 49%, 0.25);
}Uitvoer:
Hier hebben we een waarde van 0.25 overgegeven, wat een tweedecimale waarde is voor de alpha-eigenschap.
Voordelen van het gebruik van HSL-kleuren in CSS
HSL-kleuren (Hoek, Verzadiging, Helderheid) zijn een relatief nieuwe toevoeging aan het CSS-kleurenmodule, en bieden een intuïtievere en flexibelere manier om kleuren in webontwikkeling te specificeren. Vergeleken met traditionele RGB- of hexadecimale kleurcodes bieden HSL-kleuren in CSS een reeks voordelen aan ontwerpers en ontwikkelaars.
In dit gedeelte zullen we de voordelen van het gebruik van HSL-kleuren in CSS in detail verkennen en bespreken hoe ze kunnen worden gebruikt om visueel aantrekkelijke en toegankelijke ontwerpen te maken voor webpagina’s en applicaties.
Inzake praktische toepassing worden HSL-kleuren in CSS door veel professionele niveaus behandeld voor hun voordelen.
Er zijn verschillende voordelen van het gebruik van HSL-kleuren, zoals beschreven hieronder:
- Verbetert de algehele workflow door deze veel smoother te maken
- Extreem handig als we verschillende kleuren krijgen door de standaard basiskleur te behouden
- Een krachtige en eenvoudige methode die een uitzonderlijk breed scala aan kleuren biedt.
- Werkt op de praktische manier waarop mensen kleuren observeren en is gemakkelijk te leren en snel te lezen
- Kleuren die worden gegenereerd door de HSL-methode zijn duidelijk uitgedrukt, en men kan gemakkelijk de resultaten voorstellen.
Een ander belangrijk voordeel van het gebruik van HSL-kleuren in CSS is dat het ook een alternatief is voor RGB en gemakkelijk kan worden geconverteerd naar RGB. Aangezien beide de RGB- en HSL-methodes een verzameling numerieke waarden vereisen om te werken, kunnen we gebruik maken van methodes die de numerieke waarden van de HSL-kleuren gemakkelijk kunnen converteren naar de fractiewaarden voor de RGB-methode.
Om dingen nog gemakkelijker te maken, bieden verschillende online kleurconverters de mogelijkheid kleurmethodes van een naar de andere te converteren. Al deze voordelen maken van de HSL-kleuren in CSS een voorkeursmethode om kleuren in projecten te definiëren. En er zijn nog vele andere redenen waarom steeds meer ontwikkelaars kiezen om de HSL-kleuren in CSS te gebruiken in plaats van andere methodes. Alhoewel de meeste CSS-experts nog steeds HEX of RGB-methodes voor HSL favorieren, wordt HSL dagelijks meer aandacht verkrijgen.
Toepassingen van het gebruik van HSL-kleuren in CSS
HSL-kleuren in CSS bieden een veelzijdige en intuitieve manier om kleuren te specificeren en hebben vele toepassingen in webontwikkeling. Hier zijn enkele van de sleuteltoepassingen van het gebruik van HSL-kleuren in CSS:
Gevlekte Kleuren
op een professioneel niveau, om een consistent thema door de interface heen te maken, wordt de website thema ontworpen door verschillende schaduwen van een bepaalde kleur te gebruiken in de verschillende secties van de interface. De HSL-methode is in dergelijke scenario’s erg handig.
In dit voorbeeld hebben we twee basiswebsiteindelingen in aandacht gehouden. In beide gevallen is de kopsectie opgevuld met een achtergrondkleur, en de contentsectie heeft dezelfde achtergrondkleur, maar een veel lichtere tint. Om dit effect te behalen, hebben we in de kopsectie de helderheidscijfer laag gehouden en in de contentsectie hoog.
Door met de helderheidscijfers verschillende waarden uit te proberen, kunnen we donkere en lichtere tinten van dezelfde kleur verkrijgen die we kunnen gebruiken in website thema’s.
Donkere Tinten Op Hover
U zou kunnen hebben gemerkt dat sommige elementen in de gebruikersinterface van de website van kleur veranderen als de gebruiker over ze hovert. hun kleur verandert van lichte tint naar donkere tint. Hier komt HSL-kleuren in CSS in beeld om de lichtere en donkere tinten van een gemeenschappelijke kleur te geven.
button {
padding: 10px;
border-radius: 20px;
background-color: hsl(240, 39%, 70%);
color: white;
font-size: 20px;
}
button:hover {
background-color: hsl(240, 39%, 50%);
cursor: pointer;
}
Hier zie je dat de kleur van de bovenste knop een lichte tint is, voor dat hebben we de waarde van de helderheidscijfers op 70% gehouden. En nadat er over wordt gehoverd, krijgt de knopkleur een donkere tint, zoals u kunt zien bij de onderste knop. Om dit effect te behalen, hebben we een waarde van 50% toegekend aan de helderheidscijfers, die lager is dan de bovenste knop.
Tinten van Wit
Meestal moeten we wit gebruiken als letterkleur om de tekst iets anders uit te zien dan de hele websiteinterface. Maar het gebruik van dezelfde wittige tint voor elke tekst maakt de gebruikerservaring langzaam sappig. Om dit te voorkomen, kunnen we verschillende tinten van wit gebruiken om de tekst uit te laten steken en het interessant te houden.
De HSL-kleuren in CSS kunnen ons helpen verschillende schaduwen van de witte kleur te krijgen. We kunnen verschillende waarden toevoegen aan de helderheidseigenschap in de HSL-methode om de verschillende schaduwen van de witte kleur te krijgen.
.container1 {
color: hsl(30, 49%, 100%);
}
.container2 {
color: hsl(30, 49%, 90%);
}
.container3 {
color: hsl(30, 49%, 95%);
}
.container4 {
color: hsl(30, 49%, 85%);
}Uitvoer:
In dit voorbeeld kunt u zien dat in alle vier de containers de tekst niet de basiswitte kleur is. We hebben verschillende schaduwen van wit gebruikt om het een spannende look te geven en het wit te houden. Om dit te bereiken, hebben we de waarde van de helderheidseigenschap voor de letterkleur aangepast.
Knoppentypen
De HSL-kleuren in CSS zijn ook erg handig wanneer we twee verschillende schaduwen van dezelfde kleur voor knoppen hebben. Het toewijzen van verschillende schaduwen van een gemeenschappelijke kleur maakt het gemakkelijker voor de gebruiker om snel te identificeren welke de primaire en welke de secundaire knop is.
In het dagelijks leven worden donkere schaduwkleuren gebruikt voor primaire knoppen, en schaduwkleuren voor secundaire kleuren. Om de lichte en donkere schaduwen van een gemeenschappelijke kleur te krijgen, geven we hoog en laag waarden aan de helderheidseigenschap in de HSL-methode.
Laten we dit aan de hand van een voorbeeld zien.
.primary {
color: white;
background-color: hsl(10, 49%, 55%);
}
.secondary {
background-color: hsl(10, 49%, 80%);
}Uitvoer:
In het bovenstaande voorbeeld is de bovenste knop de primaire en de onderste knop de secundaire. De donkere schaduwkleur is gebruikt voor de primaire knop met een laag helderheidswaarden, en de lichte schaduwkleur is gebruikt voor de secundaire knop met een hoog helderheidswaarden.
Donkere themakleuren
Gebruik van correct kleurcontrast is essentieel in de gebruikersinterface. Met name als de gebruiker de donker thema ingeschakeld heeft op de website. Volgens studies uit 2022 gebruiken 81,9% van de gebruikers het donker thema op hun smartphones. Hiervan kan u denken hoe belangrijk kleurcontrast is in donker thema gebruikersinterfaces.
Volgens de toegankelijkheidsstandaard van WCAG moet minimaal 4:5:1 voor body tekst tegen donkere oppervlakken worden gehouden. Om deze regel nakijken, wordt het gebruik van gekleurde kleuren vermeden in donker thema’s. Het gebruik van gekleurde kleuren verhoogt ook de oogbelasting als ze worden gebruikt met een donkere achtergrond.
In het bovenstaande figuur is het duidelijk dat het veel gemakkelijker is om tekst te lezen met een lage saturatie waarde dan met een hoge saturatie waarde. Daarom wordt altijd aangeraden om ongesaturde kleuren te gebruiken tegen donkere achtergronden.
Hoe kies je de beste kleur specificatie
De drie besproken methodes hebben hun voor- en nadelen. Het hangt af van het gebruiksgeval welke kleur specificatie er het beste voor past. Er is geen algemeen factor waarop we alle drie de kleur specificaties kunnen vergelijken, maar laten we elke van deze bekijken.
Hexadecimaal
Als je niet in een vakgebied van ontwerp en projecten voor persoonlijk gebruik bent, dan moet je misschien een hexadecimaal systeem gebruiken om kleuren te specificeren. Veel ontwikkelaars vinden de hexadecimaal methode eenvoudig, die geen te grote complexiteit bevat, anders dan RGB en HSL kleuren in CSS.
Kopieer het hexadecimale code van uw gekozen kleur en plak hem in uw programma. Vrijwel direct ontstaan echter uitdagingen wanneer het gaat om de transparantie van de kleur te beheren. Het hexadecimale systeem biedt de gebruikers geen controle over de transparantie van de kleur.
RGB
Nu voor het kiezen van het RGB-systeem: dit systeem is handig voor alle professionele ontwikkelaars en ontwerpers in de fotobewerking en ontwerpbranche. Een andere reden is dat het RGB-systeem de meest gebruikte kleurspecificatie is in veel populaire ontwerpsoftware, inclusief CorelDraw, PhotoShop en Illustrator. Maar het RGB-systeem is mislukt als het gaat om verschillende tinten van dezelfde kleur te verkrijgen zonder te complex te worden.
HSL
Nu over het HSL-systeem. Professionele webontwikkelaars en gebruiksinterfaceontwikkelaars proberen vaak een doorlopend thema door de interface te houden. In deze situatie biedt het gebruik van HSL-kleuren in CSS een handje aan door zijn mogelijkheid om de tint van de kleur te veranderen door de waarden van de saturatie en helderheid te wijzigen. Uiteindelijk komt het allemaal neer op persoonlijke voorkeur. U kunt kiezen uit deze drie specificaties om uw werk uit te voeren.
Browsercompatibiliteit
Het is nutteloos om kleuren te specificeren als de gedefinieerde kleuren geen gewenste uitvoering geven in browsers. Om dergelijke situaties te vermijden, moet de kleurspecificatie die wordt gebruikt voor het ontwerpen van de gebruikersinterface compatible zijn met elke browser.
Lukkelijk voor ons is dat de werking van de HSL-kleuren in CSS volledig onafhankelijk is van de browser. Het HSL-systeem is volledig browsercompatibel. Dus, ongeacht welke browser de gebruiker gebruikt, zal hij altijd dezelfde kleuren op de website zien die correct zijn gedefinieerd.
Echter, u kunt kruisbrowsertesten uitvoeren om te zorgen dat de HSL-kleuren in CSS het gewenste resultaat geeft in elke browser. Continuïteit kwaliteits测试platformen (d.w.z. LambdaTest) helpen u cross-browsercompatibiliteitstesten uit te voeren over verschillende echte browsers, apparaten en OS-combinaties. Het controleert of de gespecificeerde CSS-kleuren correct werken in browsers en apparaten.
Afsluitend!
Dit bloggedicht heeft ons geleerd over het belang van HSL-kleuren in CSS en hoe ze verschillen van andere kleurmethodes. We hebben ook de toepassingen van HSL-kleuren in CSS besproken en hun voordelen. We hebben ook geleerd hoe HSL-kleuren in CSS meer flexibiliteit en nauwkeurigheid bieden bij het specificeren van kleuren in webdesign.
door HSL-kleuren in CSS te gebruiken, kunnen ontwerpers meer controle hebben over de saturatie en helderheid van kleuren, resulterend in een bredere palet van tinten en schakeringen voor gebruik in websites en applicaties om een merkidentiteit of esthetische visie te matchen.
HSL-kleuren in CSS bieden meer toegankelijkheid aan mensen met speciale behoeften; door eenvoudig de helderheid en saturatie van kleuren aan te passen, wordt meer contrast en leesbaarheid voor tekst en andere ontwerpelementen gecreëerd, wat het makkelijker maakt voor gebruikers om te navigeren en het content te begrijpen. Overall, bieden de HSL-kleuren in CSS een krachtige tool aan webontwerpers en ontwikkelaars om vrolijke en toegankelijke kleurenschema’s te creëren in hun webontwerpen.
Source:
https://dzone.com/articles/create-cohesive-ux-using-hsl-colors-in-css