Kleuren spelen een cruciale rol bij het non-verbaal overbrengen van informatie. Een website met interactieve kleuren wordt gezien als aantrekkelijk en visueel aantrekkelijk. Er zijn verschillende methoden om kleuren toe te passen op de HTML-elementen: RGB, RGBA, HEX-code, HSLA en HSL. U kunt echter kleurcodes vinden door de pagina te inspecteren, kleuren te selecteren in de kleurkiezer of de pipetfunctie te gebruiken in het deelvenster Developers Tool.
In deze studie bespreken we de methoden voor het vinden van kleurcode in HTML
Methode 1: Zoek een kleurcode in HTML door de webpagina te inspecteren
Hieronder volgen de stappen om de kleurcode te vinden door de pagina te inspecteren.
Stap 1: Open de webpagina
Open eerst de gewenste webpagina:
Stap 2: Selecteer optie Inspecteren
Klik met de rechtermuisknop op de pagina en selecteer de ' Inspecteren ' optie uit het menu, die toegang geeft tot de ' Hulpprogramma's voor ontwikkelaars ” paneel:
Het resultaat is dat de “ Elementen Het tabblad ” wordt onderaan de browser weergegeven:
Stap 3: Pas de plaats van het Developer Tool Panel aan
Door op de drie stippen in de hoek te klikken, kunt u de plaatsing van het paneel selecteren. We hebben bijvoorbeeld het groen gemarkeerde pictogram geselecteerd. Bovendien kan de grootte van het inspectievenster worden gewijzigd door de hoeken te slepen:
Stap 4: Selecteer het te inspecteren element
Klik vervolgens op het gemarkeerde pictogram om het element te selecteren dat u wilt inspecteren:
Stap 5: Kies het element
Plaats de muisaanwijzer op het element waarvan de kleurcode moet worden gevonden en klik erop. Het resultaat is dat de “ stijlen Het tabblad ” wordt geopend en toont de stijleigenschappen van het geselecteerde element, van waaruit u de kleur moet selecteren zoals aangegeven door het groen gemarkeerde vak:
Stap 6: Kies kleur uit kleurkiezer
Kopieer de kleurcode uit het geopende kleurkiezervenster:
De onderstaande afbeelding geeft aan dat we ook kleuren kunnen selecteren door op de kleine kleurvakken te klikken die met rode kleur zijn gemarkeerd. Terwijl het gele vak een aanwijzer vertegenwoordigt die geleidelijk verandert om de kleur van het geselecteerde element te zien:
Stap 7: pas de kleurdekking aan
U kunt ook de kleurdekking aanpassen, zoals gedemonstreerd in de onderstaande GIF:
Methode 2: zoek een kleurcode in HTML met behulp van de functie Eye Dropper
De oogdruppelfunctie kan ook worden gebruikt om elke kleur van de webpagina te kiezen. Deze functie is erg handig omdat het overal in het weergegeven venster een kleur kan selecteren.
Opmerking: De functie Pipet wordt weergegeven door het rood gemarkeerde vak in de onderstaande afbeelding:
Hier is een demonstratie van de werking van het gereedschap Pipet:
Na het selecteren van de kleur voor uw element, kopieert u de kleurcode en plakt u deze in de CSS van uw project.
Conclusie
Er zijn verschillende methoden om kleuren toe te passen op de HTML-elementen: RGB, RGBA, HEX-code, HSLA en HSL. U kunt kleurcodes vinden door ' Inspecteren ' elke webpagina of door kleuren te selecteren uit de ' kleur kiezer ” en met behulp van de “ Oogdruppelaar ' voorzien zijn van. Dit artikel heeft de procedure voor het vinden van kleurcodes in HTML gedemonstreerd met gedetailleerde voorbeelden.