Phenquestions
Om deze situatie te verhelpen, laten we eens kijken naar een kleurenkiezer die u kunt installeren als een plug-in voor Atom Text Editor, waardoor het hele proces veel soepeler verloopt. U moet Atom op uw systeem hebben geïnstalleerd. Als je dat eenmaal hebt geïnstalleerd, kun je dit specifieke pakket er bovenop installeren. Het heeft meer dan 1.7 miljoen downloads en dat maakt het opvallend, als je besluit om via Atom Editor zelf te zoeken.
Kleurkiezer installeren
Open de Instellingen [CTRL + ,] in je Atom Editor, en in de Installeren sectie zoeken naar nieuwe pakketjes.
Installeer de kleur kiezer (versie 2.3.0 of hoger) en als het eenmaal is geïnstalleerd, vergeet dan niet om Inschakelen het.
Als alles klaar is. U kunt doorgaan en een nieuw tekstbestand openen en we kunnen het gaan testen testing.
Verschillende opties voor het kiezen van kleuren
Open een nieuw bestand in Atom en gebruik de toetsbinding [CTRL+ALT+C] als u Windows of Linux gebruikt of gebruik [CMD+SHIFT+C] als u Mac OSX gebruikt.
Rechts ziet u een aantal schuifregelaars en verschillende balken. De meest rechtse is om de kleur links te selecteren. Het is de balk die de dekking van je kleur bepaalt en het vierkant in het midden bepaalt welke tint van een bepaalde kleur wordt geselecteerd.
Je kunt een extreem lichte tint gaan die er wit uitziet, ongeacht de oorspronkelijke keuze van je kleur of je kunt een volledig vergrijsde versie ervan of zwart kiezen. De normale use-case houdt in dat je iets kiest dat bij je use-case past.
Mensen gebruiken bijvoorbeeld verschillende kleuren voor hetzelfde element om de site een beetje interactiever te maken. De hyperlinks kunnen de kleur blauw krijgen en als je er met je muis overheen beweegt, verandert de kleur in zwart.
Dekking is nog een andere belangrijke factor die ontwikkelaars gebruiken om elementen onder een gekleurde patch te verbergen, en wanneer de gebruiker een bepaalde actie uitvoert, gaat de dekking naar nul en wordt het onderliggende element zichtbaar gemaakt.
Verschillende normen
U zult merken dat de kleuren in verschillende standaarden kunnen worden weergegeven, met name in RGB (Rood Groen en Blauw), HEX en HSL-formaten.
Laten we beginnen met het HEX-formaat, omdat het nogal wat wordt gebruikt, althans op het beginnersniveau.
Het is gewoon een hexadecimaal cijfer (dat is een nummeringssysteem dat van 0 tot 9 gaat en dan heeft een vertegenwoordigen 10, b vertegenwoordigen 11 enzovoort, tot 15 die wordt weergegeven met behulp van f). Kies een kleur met behulp van het kleurenkiezerpakket, klik op de HEX-knop onder de widget en je zult zien dat de bijbehorende hexadecimale code voor die kleur in je editor wordt geplakt.
De volgende standaard gebruikt RGB, wat aangeeft welk percentage van een kleur rood is, welk percentage groen is en hoeveel blauw.
Dezelfde kleur als hierboven heeft de RGB-weergave als volgt:
Ten slotte moet u iets weten over HSL, wat staat voor Hue, Saturation en Lightness.
Tint geeft aan welke kleur het element heeft. Het kan variëren van het rode einde van het spectrum helemaal tot blauw en het negeert gewoon de kleuren als combinaties van rood, groen en blauw (tenminste vanuit het oogpunt van de ontwikkelaar). Dit wordt vaak beschreven als een kleurenwiel met rood, groen en blauw 60 graden uit elkaar, maar de kleurenkiezer had het geopend tot een enkele balk aan de rechterkant.
Het volgende waar u zich zorgen over moet maken, is verzadiging, die beschrijft hoe intens de kleur zal zijn. Volledig verzadigde kleuren hebben geen grijstinten, 50% verzadigde kleuren zijn lichtere kleuren en 0% zijn niet van grijs te onderscheiden. De vierkante ruimte is perfect om dit te selecteren.
Lichtheid beschrijft hoe helder de kleuren zullen verschijnen. 100% lichte kleuren zijn niet te onderscheiden van wit en 0% kleuren lijken helemaal zwart. Als uw site bijvoorbeeld veel leesmateriaal bevat, wilt u een minder heldere oplossing om het voor de lezer gemakkelijker te maken om deel te nemen. Dus dat is HSL.
Conclusie
Editors zoals Atom- en Visual Studio-code hebben een hele reeks handige pakketten en thema's eromheen gebouwd. Kleurkiezer is maar één voorbeeld dat een ontwikkelaar kan gebruiken om onnodige uitstapjes naar W3Schools of Stack Overflow te vermijden. Als u de kleurkiezer gebruikt, moet u nog steeds een kleurnauwkeurige weergave hebben die correct is gekalibreerd.
Zodra u echter het kleurenpalet voor uw project hebt bepaald, kunt u sneller en soepeler projecten gaan bouwen met behulp van pakketten zoals Color picker.
