Share
I codici colore HTML sono un elemento comune e cruciale del web design moderno. Mentre la maggior parte dei siti al giorno d'oggi sono progettati in gran parte in parte con le immagini, i colori sono particolarmente importanti quando è necessario trovare un valore esadecimale colore al volo durante la codifica. In questa guida impareremo i fondamenti dietro la codifica dei colori, in definitiva fornendoti il potere di inventare i colori senza l'uso di un selettore di colori.
Come forse saprai, ci sono due modi comuni per definire un colore nel web design:
Entrambi questi sono spesso implementati usando CSS o HTML, come puoi vedere qui sotto:
Testo quì Testo quì
.foo color: rgb (111,222,111);
Nel primo esempio di codice, ogni testo "Testo qui" appare come un colore grigio chiaro. Andremo oltre perché è più tardi; tuttavia, notate come anche se i metodi di colore sembrano essere abbastanza diversi, in realtà, sono esattamente dello stesso colore.
Nel secondo esempio, abbiamo solo un rapido codice CSS. È abbastanza semplice - qualsiasi cosa con una classe di "pippo" avrà un colore del testo di rgb (111.222.111). Per i più curiosi, sarebbe un colore verde lime.
Finora, la maggior parte di questo dovrebbe avere senso per te. Entriamo ora esattamente nel modo in cui passiamo da quei codici relativamente criptici a qualcosa di un po 'più concreto.
In RGB, ogni valore tra le virgole può essere un numero compreso tra 0 e 255. Ad esempio:
rgb (10,137,29)
Poiché RGB sta per "Rosso verde blu", significa che c'è un valore di 10 per il rosso, 137 per il verde e 29 per il blu. Inevitabilmente si tratta di una specie di frazione irriducibile. Così:
Più alto è il numero, maggiore sarà il colore che ci sarà nel risultato finale.
Quando è impostato su zero, non c'è nessuno di quel colore particolare. A 255, il contrario ovviamente si dimostra vero. Perciò:
Questo è vero perché il sistema di colori RGB si basa sul colore luce. Questo è molto diverso da come normalmente creeresti i colori, ad esempio con la vernice o i pastelli. Se avessi una combinazione di rgb (255,255,255) con la vernice, probabilmente verrai fuori con qualcosa di simile al marrone scuro, ma certamente non bianco!
Il colore esadecimale è generalmente più difficile da spiegare rispetto all'RGB. Fondamentalmente, sono gli stessi. Tuttavia, il funzionamento interno degli esadecimali è indubbiamente più complicato.
Per spiegare il colore esadecimale, dovremo prima ricorrere in qualche binario e nel sistema di numeri di sedici base per capire cosa qualcosa di simile stia davvero cercando di "dire":
# 554BFF
Per quelli di voi che non sanno come uno di questi lavori, o quale sia l'uno o l'altro, ecco una breve guida:
Se questo era un po 'confuso, suggerisco di leggerlo di nuovo. Se ancora non ha senso dopo, va benissimo - i seguenti esempi aiuteranno a rafforzare la tua comprensione.
Esadecimale, come suggerisce il nome, fornisce sedici "valori" utilizzabili per un numero da assumere. Come avrai notato prima, un "nibble" può darti qualsiasi numero compreso tra 0 e 15: sedici valori in totale!
Supponendo di avere il seguente:
1111
E sapendo che i valori binari di ogni bit diventeranno i seguenti:
8 4 2 1
Il valore binario di 1111 diventerà:
8 + 4 + 2 + 1
che è…
15
Allo stesso modo, se il numero binario fosse stato 0000, il risultato finale sarebbe stato zero, perché 0 + 0 + 0 + 0 è uguale a 0.
binario: 0101
I valori per ogni bit sono 8,4,2 e 1 (in ordine). Aggiungi insieme i valori binari di quelli:
0 + 4 + 0 + 1
Uguale a 5.
Speriamo che questi rapidi esempi siano utili. Vi incoraggio a provare alcuni altri rapidamente da soli. Ne darò anche uno:
Converti da binario a decimale: 1010
Suggerimento: è tra 9 e 11.
Questo potrebbe sembrare che non sta andando da nessuna parte in relazione allo sviluppo del web, ma credimi, siamo quasi arrivati.
In esadecimale, ci sono sedici diverse rappresentazioni per una sequenza binaria: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, e F. Questi, a sua volta , rappresentano i numeri 0-15 (16 numeri in totale). Entrambi rappresentano lo stesso numero binario. Ma velocemente - fermati e pensa - #FFFFFF produce bianco, giusto? E non puoi mai avere una lettera più alta di F in un codice colore HTML. Tienilo a mente.
Ecco un grafico veloce che mappa la relazione tra binario, decimale ed esadecimale:
Ciò significa che, se si desidera creare il numero 15, è possibile scrivere F in esadecimale o 1111 in binario. Inoltre, se si voleva fare, ad esempio, 10, si scriverebbe A in esadecimale o 1010 in binario.
Ora, siamo un po 'più vicini a capire esattamente come funziona l'esadecimale. Presto immaginiamo un esempio di codice colore HTML diviso in tre parti:
# 006699 a -> # 00,66,99
Ora sembra un po 'familiare; se stai pensando a quello che sto pensando, hai ragione. Esadecimale è organizzato esattamente allo stesso modo di RGB: ha un valore per ogni rosso, verde e blu. La differenza principale è:
Ora esamineremo come è possibile creare un valore fino a 255, poiché finora abbiamo solo imparato a creare numeri fino a 15.
Binario: 0110 Valori di bit: 128 64 32 16 Aggiungere insieme tutto ciò che è vero: 0 + 64 + 32 + 0 Rendimenti: 96
Abbiamo scoperto che il primo nibble a destra equivale a sei. E ora, abbiamo scoperto che il secondo nibble a sinistra è uguale a 96. Allora, cosa fai con questi? Basta aggiungerli! 96 + 6 = 102. Pertanto, il valore esadecimale di 66 è 102 nel normale sistema decimale.
Ciò significa che, in esadecimale, l'equivalente RGB di 66 (in hex) è 102. Di conseguenza, # 666666 è uguale a rgb (102,102,102).
Facciamo un altro esagono in conversione decimale:
Esadecimale: FF Binario: 1111 1111 Valori bit: 128 64 32 16 8 4 2 1 Aggiungi: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Rendimenti: 255
255 è il valore massimo per qualsiasi colore. Quindi, se avessimo #FFFFFF, che tutti sappiamo essere bianchi, sarebbe rgb (255,255,255), che è anche bianco.
Per la comprensione, facciamo una conversione finale. Questa volta, convertiremo un intero colore esadecimale in RGB. Il nostro colore è # 6AB4FF.
6A ------ Binaria: 0110 1010 Aggiungi: 64 + 32 + 8 + 2 96 + 10 Rendimenti: 106 ------ B4 ------ Binario: 1011 0100 Aggiungi: 128 + 32 + 16 + 4 176 + 4 Rese: 180 ------ FF ------ (Abbiamo già fatto questo, quindi sappiamo che è 255)
Conclusione: # 6AB4FF è equivalente a rgb (106,180,255).
Ora, ti starai chiedendo come possiamo ottenere da questi valori un colore reale che possiamo immaginare nella nostra testa. La prossima sezione aiuterà a coprirlo. Quindi, ora che sappiamo come sono correlati esadecimali e RGB, e ora che sappiamo come funziona effettivamente l'esadecimale, ora esamineremo come creare un colore al volo nel tuo codice e aiutarti a creare qualsiasi colore senza mai usare un selettore di colori.
Fatto divertente rapido: Poiché ci sono 8 bit in ogni valore di rosso, verde e blu, ciò significa che ci sono 24 bit totali in un colore RGB (8 * 3 = 24). Qui è dove viene il termine colore a 24 bit, spesso definito come "True Color".
Con il colore a 24 bit, siamo in grado di creare fino a 16.777.216 - oltre sedici milioni di colori. Questo è in genere più che soddisfacente per qualsiasi progetto. Il colore a 32 bit, tuttavia, ha iniziato a diventare più importante, ma non necessariamente nell'area del web design. Puoi leggere ulteriori informazioni sulla profondità del colore su Wikipedia.org in questo articolo. Inoltre, puoi visualizzare un'immagine di tutti i ~ 16 milioni di colori in una sola immagine qui (David Naylor Blog). È piuttosto affascinante, davvero! Le dimensioni dell'immagine di 4096x4096 hanno senso poiché 4096 è la radice quadrata di 16.777.216.
Affinché questa conoscenza sia di qualche utilità per noi, avrai bisogno di imparare a creare i tuoi colori in modo rapido e semplice. Cominceremo nel modo più semplice possibile, per poi passare a colori più difficili da articolare.
Diciamo che vogliamo fare un colore grigio al volo. I colori in scala di grigi sono comuni e tendono a essere i più utili in molti casi. Finora sappiamo quanto segue: # 000000 è uguale al nero,
e #FFFFFF è uguale al bianco. Pertanto, il più comune dei colori della scala di grigi sta per essere incrementi tra questi due valori. Per creare una sfumatura di grigio, dovremmo stabilire correttamente i valori tra bianco e nero.
Logicamente, un valore più vicino a #FFFFFF sarà un tono più chiaro di grigio e un valore più vicino a # 000000 sarà più scuro. Con questo in mente, facciamo un colore grigio abbastanza chiaro. Alcune riflessioni ci danno la seguente risoluzione: #DDDDDD è abbastanza lontano dal bianco, quindi chiaramente per noi sarà un bel grigio chiaro.
Più tardi, vogliamo fare un grigio più scuro. Ancora una volta, semplice. Basta fare qualcosa come # 333333. Come puoi vedere, i valori di grigio sono molto semplice. Se trovi che hai bisogno di una tonalità di grigio ancora più specifica, ricorda che, come regola generale,
se ogni valore per rosso, verde e blu sono tutti uguali o quasi simili, apparirà grigio. Un esempio di questo è il colore "Gainsboro" che ha un codice colore di #DCDCDC. Ciò significa che è solo uno in meno rispetto al nostro colore #DDDDDD in ciascun valore di rosso, verde e blu. Probabilmente non sarai in grado di distinguere tra i due, ma l'incremento o il decremento di 1 ti darà un po 'più di "precisione grigia".
Il secondo set di colori più semplice che puoi creare sono rosso, verde e blu (ovviamente). Usiamo il rosso come esempio. Se vogliamo creare un rosso RGB puro, daremo il valore del colore
il valore massimo di rosso, con 0 verde e 0 blu. Questo ha senso, no? Per fare il rosso in esadecimale, metteremmo # FF0000. Ora abbiamo il rosso.
La creazione di verde e blu segue esattamente lo stesso principio. Per rendere verde puro: # 00FF00 (tutto verde, nient'altro). Per rendere il blu puro: # 0000FF (tutto blu, nient'altro).
Abbastanza semplice; tuttavia, questi colori sono, nella maggior parte dei casi, assolutamente orribili se utilizzati in un web design. Pertanto, per utilizzare questi colori, dovremo ombreggerli di conseguenza.
Fortunatamente anche l'ombreggiatura è facile. Usiamo il blu per questo esempio. Abbiamo già impostato # 0000FF per noi. Per cambiare l'ombra del nostro valore blu, abbiamo semplicemente bisogno di cambiare gli ultimi due caratteri del codice colore esadecimale. Dato che FF è il blu più alto possibile, a questo punto possiamo davvero renderlo solo più scuro. In quanto tale, facciamo proprio questo:
Cambiando # 0000FF con # 000055 (diminuendo la quantità di nero, spostando quindi il blu più vicino al nero) si otterrà un blu più scuro.
Come puoi vedere, l'ombreggiatura di rosso, verde e blu è tutt'altro che difficile, si tratta semplicemente di diminuire la quantità di un determinato colore. La stessa regola si applica al rosso e al verde, non solo al nero, quindi # 005500 è una tonalità di verde più scura e # 550000 è una tonalità di rosso più scuro. (Certo, puoi andare più in basso o più in alto di 55 se lo desideri).
Suppongo che tu stia probabilmente pensando: quindi che ne è del giallo, del viola e di tutti gli altri colori? Beh, per fortuna è solo un po 'più complesso dei tre grandi RGB. Iniziamo con il giallo.
Per creare il giallo, dovremo prima pensare in termini di spettro dei colori. Un piccolo mnemonico che la gente ama usare è "Roy G. Biv", che sta per "rosso, arancione, giallo, verde, blu, indaco, viola." Ora la logica in questo è un po 'confusa, ma cerca di restare con me. Per diventare gialli, usiamo i due colori principali da rosso, verde e blu su entrambi i lati di dove sarebbe il giallo, in questo caso sarebbe rosso e verde, quindi, se scrivessimo # FFFF00, avremmo il giallo. Fantastico!
Esistono solo poche altre combinazioni possibili che utilizzano questo metodo, quindi le esamineremo rapidamente. Tra il rosso e il blu su una ruota dei colori, il codice sarebbe # FF00FF, e otterremmo il rosa, o il magenta come viene tradizionalmente chiamato, Successivo, tra il verde e il blu (# 00FFFF), abbiamo il ciano. E ora, purtroppo, questo è in realtà tutte le semplici combinazioni che possiamo fare. Il resto richiede qualche riflessione, che esamineremo tra un minuto. Per prima cosa, scopriamo come sfumare questi colori.
Semplicemente, inizieremo a ombreggiare ciano questa volta, che, come ricordiamo, è # 00FFFF. E ... probabilmente lo hai indovinato, ma per sfumare in giallo, ciano o rosa, tutto ciò che devi fare è cambiare i valori FF in uno più piccolo. In questo esempio, sfumando il ciano in una varietà molto più scura, potremmo fare qualcosa come # 005555. Uno dei nomi di colore HTML ufficiali, DarkCyan, è # 008B8B, in modo che uno sia un po 'più leggero di quello che abbiamo appena creato. Quindi ce l'abbiamo: come sfumare giallo, ciano e rosa.
Per rendere un colore più chiaro, è semplice come fare i valori bassi (i valori 00, in genere) maggiore e lasciando il FF (o altri colori principali) da solo. Ad esempio, se avessimo il verde e avremmo voluto renderlo più leggero, avremmo iniziato con # 00FF00. Quindi, per alleggerirlo, dovremmo semplicemente aumentare i valori di 00. #AAFFAA produce un bel colore verde primaverile.
Inoltre, per rendere più leggero # FF00FF (rosa), è lo stesso processo. Aumentare i valori bassi: #FFAAFF. Questo produce un colore rosa chiaro. Funziona come un fascino!
Finora, abbiamo imparato a creare il più semplice dei colori, ma nella maggior parte delle applicazioni questa conoscenza non sarà utile per un progetto. È qui che entra in gioco questa seconda parte.
Per creare un bel colore, dovremo lavorare su ciò che sappiamo già, e pensare a quello che stiamo cercando di creare in modo logico. Creiamo uno scenario; vogliamo creare un colore arancione che si adatta alle nostre esigenze, una specie di tonalità leggermente più scura di aranciata.
Inizieremo con ciò che sappiamo già come fare, e questo è il giallo: # FFFF00. Abbiamo bisogno di spostarlo un po 'più vicino all'arancia, quindi per fare ciò, alleghiamo un po' del "pull" verde, come mi piace chiamarlo. Facendo così aumenta la quantità di rosso. Ho scelto di cambiarlo in # FF5500. Questo esempio rapido e semplice ti dà un'idea di come andresti sulla creazione di un colore. L'ultima cosa che vorrei menzionare è che ti starai chiedendo perché non ho iniziato ad aggiungere alla quantità blu, che abbiamo lasciato ad un valore di 00. Il motivo è perché, quando inizi ad aggiungere blu lentamente con incrementi di 11, 22, 33, eccetera, sembra ancora abbastanza arancione. Tuttavia, una volta che hai superato i 55, vedrai alcuni problemi. Soprattutto, se lo aumentiamo fino a qualcosa come # FF5599. Quello che succede è che si trasforma in un colore davvero rosa. Perchè è questo? Beh, ripensa a quando abbiamo originariamente creato il rosa. Il codice era # FF00FF. Il rosso è al massimo e il blu è al massimo. Quindi, nel nostro colore arancione, quando inizi a cambiare # FF5500 con # FF5599, i nostri valori rosso e verde non sono più i valori di rilievo. Invece, è rosso e blu, che produce rosa. In questo modo, il valore 55 per il verde sarebbe semplicemente schiarire la nostra tonalità di rosa, invece di spostarlo verso l'area arancione.
Nota per il lettore: la creazione di codici colore complessi, ammettiamolo, è piuttosto poco pratica. Nel tempo necessario per creare un colore sufficiente, è possibile ottenere facilmente diversi colori buoni da un selettore di colori. Per un colore complesso, sarebbe meglio non provare a crearlo da solo. Invece, lascia che sia provato e vero, e risparmia tempo prezioso. tu volontà, tuttavia, vuoi usare le tue abilità per eseguire un compito semplice come scurire o schiarire un colore rapidamente mentre sei in movimento.
Quindi vedi questo bel codice colore, ti fissa in faccia, ma non hai idea di che colore sia veramente. Grande! Questo è probabilmente il posto più divertente. Il modo migliore per insegnarti a farlo è eseguire un semplice test. Una volta ho chiesto le seguenti domande su un test in una delle mie lezioni sulla tecnologia dell'informazione.
Spero che tu sia riuscito a capire tutto questo! Soprattutto i primi due. Avresti dovuto essere in grado di capire che la risposta al numero uno era nera, o B. Per la seconda domanda, la risposta era anche abbastanza semplice. Seguendo lo schema di rosso, verde, blu, sappiamo che dal momento che ogni valore ad eccezione del verde è impostato su 00, che il colore sarà di qualche sfumatura di verde. Inoltre, poiché il valore per il verde è FF (o 255), sappiamo che questo colore sarà verde puro. Quindi, la risposta sarà A.
Sembra che l'unico colore difficile da decifrare qui sarà il numero tre, # FFCC66. Questo è comprensibile. Poiché il valore blu (che è 66) è molto più piccolo degli altri due numeri, potrebbe essere considerato relativamente irrilevante. Pertanto, è possibile confrontarlo con il colore per il giallo, # FFFF00. Tra questi due, sembrano in qualche modo simili. Con questo metodo, puoi rispondere alle prime tre risposte, poiché nessuna di esse è lontanamente vicina al giallo. Quindi la risposta è D. Il valore verde diminuito di CC ombreggia leggermente il colore, e l'aumento del blu spingerà il colore ad essere molto più simile all'oro.
Il processo di decodifica dei codici colore include principalmente il pensiero attraverso di esso e il confronto con i colori che già conosci!
Ecco un ultimo consiglio rapido su come è possibile velocizzare la creazione di un colore usando il sistema esadecimale. Utilizzando questo metodo, puoi ridurre alcuni codici colore da sette caratteri fino a quattro (ad esempio #_ _ _ _ _ _ a # _ _ _). Questo metodo è chiamato stenografia del colore e l'idea alla base è che prenderà il valore di ciascuno dei tre personaggi principali e li duplicherà in modo invisibile. Ciò che intendo è questo: se avessi il codice colore # 123, sarebbe l'equivalente di # 112233. Puoi farlo per qualsiasi codice colore in cui ogni valore esadecimale per rosso, verde e blu è esattamente lo stesso carattere. Alcuni abbreviazioni più comuni sono:
Speriamo che questo articolo ti abbia aiutato a capire come funzionano davvero i codici colore. In molti programmi, come Photoshop, sarà certamente più facile usare i selettori di colori incorporati. L'area principale in cui questa abilità sarà utile è quando si guarda attraverso il codice sorgente CSS e si vuole semplicemente capire che tipo di colore è senza dover ricorrere a un'altra risorsa. Indipendentemente dal metodo più veloce, come sviluppatori web e designer, queste sono cose che dovremmo sapere! Grazie mille per la lettura. Questo è un argomento comprensibilmente difficile, quindi parliamo di più nei commenti!
Accentsconagua