I designer e lo sviluppatore web usano spesso il codice esadecimale nei loro file CSS per dire a quale colore sarà un certo elemento. Questo metodo ha i suoi meriti e difetti. Aiuta tremendamente in quanto standardizza l'intero flusso di lavoro tra i diversi sviluppatori.È possibile utilizzare diversi tipi di display con una precisione del colore variabile e ancora ad attaccarti alla tavolozza di colori originale senza alcuna confusione. Ma spesso è ingombrante usare i codici esagonali per rappresentare i colori. Il numero stesso non significa nulla per uno sviluppatore umano e questo può ostacolare la creatività.Mentre puoi usare una moltitudine di racconti a colori da Adobe al raccoglitore a colori HTML di W3Schools, passare da una volta e il tuo editor può rompere la concentrazione e rendere la tua vita molto più difficile.

Per porre rimedio a questa situazione, diamo un'occhiata a un raccoglitore a colori che puoi installare come plug -in a atom text editor rendendo l'intero processo molto più fluido. Devi avere Atom installato sul tuo sistema. Una volta installato, puoi installare questo particolare pacchetto sopra. Ha più di 1.7 milioni di download e questo lo distingue, se decidi di cercare tramite Atom Editor stesso.

Installazione del raccoglitore di colori

Apri il Impostazioni [Ctrl +,] nel tuo editor atom e nel Installare Sezione Cerca nuovi Pacchetti.

Installa il color Picker (Versione 2.3.0 o successivo) e una volta installato, ricordati di Abilitare Esso.

Una volta che tutto è finito. Puoi andare avanti e aprire un nuovo file di testo e possiamo iniziare a testarlo.

Varie opzioni di raccolta dei colori

Apri un nuovo file all'interno di Atom e con esso aperto Usa keybinding [ctrl+alt+c] se si è su Windows o Linux o utilizzare [CMD+SHIFT+C] se si utilizza Mac OSX.

Vedrai un certo numero di cursori e barre diverse a destra. Quello a destra è selezionare il colore a sinistra è la barra che determina l'opacità del colore e il quadrato al centro decide quale tonalità di un determinato colore verrà selezionato.

Puoi diventare una tonalità estremamente leggera che sembrerebbe bianca, indipendentemente dalla scelta iniziale del tuo colore o puoi scegliere una versione completamente grigiata di esso o nero. Il normale caso d'uso prevede la raccolta di qualcosa tra il quale si adatta al caso d'uso.

Ad esempio, le persone usano colori diversi per lo stesso elemento per rendere il sito un po 'più interattivo. Ai collegamenti ipertestuali possono essere assegnati a colori blu e quando si librano il mouse su di esso, il colore cambia in nero.

L'opacità è ancora un altro fattore importante che gli sviluppatori usano per nascondere elementi sotto una patch colorata e quando l'utente esegue una determinata azione, l'opacità va a zero e l'elemento sotto è reso visibile.

Standard diversi

Noterai che i colori possono essere mostrati in diversi standard, in particolare nei formati RGB (verde rosso e blu), esagonali e HSL.

Cominciamo con il formato esadecimale, dal momento che viene usato un bel po ', almeno a livello del principiante.

È semplicemente una cifra esadecimale (che è un sistema di numerazione che va da 0 a 9 e poi ha UN Rappresenta 10, B rappresentano 11 e così via, fino a 15 che è rappresentato usando F). Scegli un colore utilizzando il pacchetto di selezione color, fai clic sul pulsante esagono sotto il widget e vedrai che il codice esadecimale corrispondente per quel colore è incollato nel tuo editor.

Il prossimo standard utilizza RGB che mostra quale percentuale di un colore è rossa, quale percentuale è verde e quanto è blu.

Lo stesso colore di sopra ha la rappresentazione RGB come segue

Infine, devi sapere su HSL che sta per tonalità, saturazione e leggerezza.

Hue rappresenta di quale colore ha l'elemento. Potrebbe variare dall'estremità rossa dello spettro fino al blu e semplicemente ignora i colori come combinazioni di rosso, verde e blu (almeno dal punto di vista dello sviluppatore). Questo è spesso descritto come una ruota a colori con rosso, verde e blu a 60 gradi l'uno dall'altro, ma il raccoglitore a colori l'aveva aperto fino a una sola barra a destra.

La prossima cosa di cui preoccuparsi è la saturazione, che descrive quanto sarà intenso il colore. I colori completamente saturi non hanno sfumature di grigio, il 50% saturi sono colori più chiari e quelli 0% sono indistinguibili dal grigio. Lo spazio quadrato è perfetto per selezionare questo.

La leggerezza descrive quanto appariranno i colori luminosi. I colori chiari al 100% sono indistinguibili dai bianchi e gli 0% appaiono completamente neri. Ad esempio, se il tuo sito ha un sacco di materiale di lettura, vorresti una soluzione meno luminosa per rendere più facile per il lettore coinvolgere. Quindi questo è HSL.

Conclusione

Gli editori come Atom e Visual Studio Code hanno un intero ethos di pacchetti utili e temi costruiti intorno a loro. Il raccoglitore a colori è solo un esempio che uno sviluppatore può usare per rinunciare a viaggi inutili a W3Schools o Stack Overflow. L'uso del raccoglitore a colori richiede ancora di avere un display accurato del colore che è correttamente calibrato.

Una volta che hai deciso la tavolozza dei colori per il tuo progetto, tuttavia, puoi iniziare a costruire progetti più velocemente e più fluidi usando pacchetti come Color Picker.