Visualizzazione post con etichetta colori. Mostra tutti i post
Visualizzazione post con etichetta colori. Mostra tutti i post

Pubblicato il 21/04/22 - aggiornato il  | Nessun commento :

Tool per trovare i codici dei colori con tonalità più chiare e più scure

Forse il titolo dell'articolo non è correttissimo però non ne ho trovato uno migliore per denotare l'argomento che mi accingo a illustrare. Quando si visualizza un colore si può pensare che sia troppo chiaro o troppo scuro per quello che intendiamo fare ma che per il resto soddisfi in pieno le nostre esigenze. Ogni colore è associato a un codice che può essere RGB o HEX o anche indicato con altro metodo. Trovare il codice di un colore che sia più chiaro o più scuro di un altro non è immediato. Ci sono però degli strumenti che aiutano a farlo dentro editor grafici e di video.

Un dato colore diventa più chiaro o più scuro in funzione della quantità di bianco o di nero che presenta in percentuale. Schiarendo progressivamente un colore si arriva alla percentuale del 100% di bianco con un codice #FFF mentre scurendo lo stesso colore si arriverà a una percentuale di bianco dello 0% con un codice di #000.

La ricerca di colori più chiari o più scuri è importante in molte circostanze. Tra le altre ricordo quella di creare un gradiente p.e. per la realizzazione di un pulsante con la parte bassa dello stesso più scura di quella alta, in modo da creare un effetto luminosità in alto. Un altro esempio è quello di un bordo di una forma con una tonalità più scura.



Pubblicato il 30/08/21 - aggiornato il  | Nessun commento :

Come trovare i codici dei colori in HEX, RGB, HSL e come convertirli

L'inserimento dei colori nelle pagine web avviene mediante codici associati agli stessi colori. Nei primi anni di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4 bit. Successivamente la Profondità di colore aumentò a 8 bit con 256 colori rappresentabili, che diventarono più di 65.000 con i colori a 16 bit. La rivoluzione si ebbe con il TrueColor a 24 bit che consente di riprodurre i colori in modo molto fedele alla realtà con circa 16,7 milioni di colori rappresentabili. Si possono quindi creare delle sfumature di colore in numero superiore a quelle che l'occhio umano riesce a percepire. La rappresentazione TrueColor parte da 3 colori primari: rosso, verde e blu. Ciascuno dei quali è rappresentato da 8 bit per un numero complessivo di 2^8=256 colori. Il totale è quindi di 256x256x256 con un numero totale di 16.777.216.

Uno standard per indicare il colore è quello RGB, (Red, Green, Blue), che si basa appunto su tali colori primari.

In tempi più recenti l'introduzione dei colori a 32 bit portò alla creazione del cosiddetto Canale Alfa che non è obbligatorio utilizzare e che descrive il grado di trasparenza o opacità. I formati di immagini che supportano il Canale Alfa, e quindi la trasparenza, sono PNG, TIFF e GIF mentre p.e. il JPG non lo supporta. Il Canale Alfa della trasparenza può essere applicato anche ai video come abbiamo visto con DaVinci Resolve e con Shotcut.



Pubblicato il 17/10/18 - aggiornato il  | Nessun commento :

Come trovare i codici dei colori

L'esigenza di rappresentare i colori in modo sistematico si è avuta ben prima dell'avvento dell'informatica. Già l'industria tipografica aveva creato un modello con cui rappresentare tutti i colori. Tale modello fu chiamato RGB (Red, Green, Blue) che partiva da questi tre colori primari per creare tutti gli altri, mischiandoli in proporzioni variabili. Oltre al Rosso, Verde e Blu del modello RGB è stato proposto, dai produttori di stampanti, il modello CMYK che è l'acronimo di Cyan, Magenta, Yellow, Key black, cioè dei colori Ciano, Magenta, Giallo mentre Key black si riferisce a una particolare tecnologia dei sistemi di stampa.

Altri sistemi di rappresentazione dei colori sono HSB/HSL (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità) e HSV (Hue Saturation Value ovvero Tonalità, Saturazione e Valore). Per individuare un colore occorre quindi scegliere il modello e indicare il valore, ovvero la quantità di colori primari per ciascuno di essi. Agli albori di internet venivano visualizzati dai browser solo 8 colori che diventarono 16 quando si passò ai 4bit. Successivamente la rappresentazione dei colori utilizzò gli 8bit con 256 colori riproducibili dai browser, che aumentarono a più di 65.000 con i 16 bit.

La prima rivoluzione arrivò con i 24 bit e con i tre colori primari Red, Green e Blue. Si avevano quindi 8 bit per ciascun colore con un numero complessivo di 28=256 possibili valori per il Rosso, Verde e Blu. Le combinazioni di colore realizzabili diventarono quindi 2563= 16.777.216. Con più di 16 milioni di colori si potevano già creare  più sfumature di quelle che l'occhio umano  riesce a percepire.



Pubblicato il 16/10/18 - aggiornato il  | Nessun commento :

Adobe Color CC per scegliere gratis le migliori combinazioni di colori

Adobe Color CC è un servizio che può essere usato come estensione di celebri programmi a pagamento, come Adobe Photoshop, Adobe InDesign, Adobe After Effects e Adobe Illustrator.  Su Photoshop si va p.e. su Finestra -> Estensioni -> Temi di Adobe Color oppure su Finestra -> Temi di Color.

È stata però rilasciata anche una applicazione web che può essere usata gratuitamente direttamente dal browser. Si tratta di una applicazione web che permette di scegliere le combinazioni di colori più piacevoli e armoniose per i progetti grafici. Si possono poi sfogliare le combinazioni di colore che altri utenti hanno reso pubbliche.

Per trovare i toni più scuri o più chiari di un colore, ricordo che si può usare anche la applicazione web Oto255. Adobe Color, oltre a offrire questa opzione, ci consente di sperimentare altre associazioni di colore. I Temi che abbiamo realizzato da soli, o cha abbiamo scoperto nel sito, potranno essere salvati sul Cloud di Adobe.



Pubblicato il 30/01/18 - aggiornato il  | Nessun commento :

Come trovare le tonalità più chiare e più scure di un colore

Nei lavori di grafica e nel web design, si possono importare dei concetti usati da anni nella pittura, dove esiste il concetto di colore puro, cioè senza l'aggiunta di pigmento bianco o nero per schiarirlo o per scurirlo.

Nel precedente post abbiamo visto come oltre alla rappresentazione RGB, per i colori si possa scegliere anche il modello HSB, o HSL o HSV che individua i colori con i valori di Tonalità, Luminosità e Saturazione. Esiste anzi una corrispondenza biunivoca tra i valori delle terne RGB e quello delle terne HSL.

La domanda a cui voglio rispondere con questo post è la seguente: "Come si fa ad aggiungere del bianco o del nero a un colore a partire dal suo codice?" Ovvero, se si conosce il codice di un colore, quali sono i codici del colore più scuro di una o due tonalità o il codice del colore più chiaro di tre o quattro tonalità?

La ricerca di colori più scuri o più chiari è importante quando si voglia creare per esempio un bottone con un effetto di rilievo. Tramite il gradiente, si inserisce un colore più chiaro nella parte alta e uno più scuro nella parte bassa, proprio per inserire un effetto di luminosità in alto.



Pubblicato il 29/01/18 - aggiornato il  | Nessun commento :

Codici dei colori HEX e RGB in italiano

Che codice HEX, RGB, CMYK o HSV ha il colore albicocca? La questione non interessa un utente medio di internet ma può essere motivo di grattacapi per un blogger dilettante, o anche per un creatore professionista di layout, se il cliente gli ha chiesto uno sfondo proprio di quel colore per un elemento di una pagina web.

Ricordo che i codici dei colori sono una rappresentazione univoca di tutti i colori del visibile. Possono essere riprodotti tutti a partire da dei colori di base, mischiandoli in tutti i modi. Un insieme di tre o quattro colori che è in grado di riprodurre tutti gli altri è detto insieme di colori primari.

Sono stati proposti vari insiemi di colori primari e, ciascuno di essi, ha dato modo di creare un modello di rappresentazione. Quello più conosciuto è il RGB (Red, Green, Blue ovvero Rosso, Verde e Blu) ma c'è anche il CMYK (Cyan, Magenta, Yellow, Key black ovvero Ciano, Magenta, Giallo e Key Black per sistemi di stampa particolari). Per individuare un colore, occorre quindi scegliere il modello e il numero di colori che si vogliono rappresentare.

Al momento la rappresentazione dei colori più comune utilizza 24bit, cioè 8bit per ciascun colore, con un numero complessivo di 28=256 possibili valori per il Rosso, Verde e Blu. Le combinazioni totali realizzabili sono quindi 2563= 16.777.216. Con più di 16 milioni di colori si possono creare più sfumature di quelle che l'occhio umano riesce a  percepire. Con una rappresentazione di colori a 32bit vengono aggiunti altri 8bit per la trasparenza che ci ha permesso di aggiungere il Canale Alfa.


Pubblicato il 10/12/17 - aggiornato il  | Nessun commento :

5 tool online per cambiare il colore degli occhi in una foto.

In un prossimo articolo vedremo come modificare il colore degli occhi in una foto con Photoshop e magari anche con Gimp. In questo post invece elencherò dei tool online che eseguono questa operazione in modo automatico senza bisogno di particolari conoscenze di grafica.

C'è da dire che gli occhi cambiano di colore da soli in funzione della qualità della luce che c'è nell'ambiente. Questo è più evidente in coloro che hanno gli occhi chiari.

Gli occhi verdi per esempio tendono a diventare più chiari in una giornata piena di sole e invece tendono al grigio se la giornata è buia e piovosa. Nelle persone che hanno più sfumature di colore negli occhi questo fenomeno è ancora più evidente. È invece assente per chi abbia gli occhi neri visto che questo colore assorbe comunque tutta la luce.

Il  colore degli occhi può cambiare anche durante il corso della vita. Questo accade soprattutto con i ragazzi e le ragazze che durante l'adolescenza possono ritrovarsi con gli occhi più scuri rispetto a quelli che avevano da bambini per un aumento da parte dell'organismo della produzione di melanina.



Pubblicato il 11/10/16 - aggiornato il  | Nessun commento :

Come usare il selettore di colori nella ricerca di Google.

Senza pubblicizzarla in alcun modo Google ha introdotto una nuova funzionalità nei risultati di ricerca per aiutare gli utenti a districarsi tra i codici dei colori. Ricordo che un modello per individuare un colore è una regola che assegna un codice a un colore determinato in modo univoco in modo da risalire al colore quando si conosca il codice e viceversa.

I modelli più usati sono HEX o esadecimale, RGB (Red, Green, Blue),  HSB (Hue Saturation Brightness ovvero Tonalità Saturazione Luminosità), HSI (Hue Saturation Intensity ovvero Tonalità, Saturazione ed Intensità), CMYK (Cyan, Magenta, Yellow, Key black), HSI (Hue Saturation Intensity ovvero tonalità, saturazione ed intensità), HSV (Hue Saturation Value ovvero tonalità, saturazione e valore), HSL (tonalità, saturazione e luminosità).

HSB, HSV e HSI rappresentano delle varianti dello stesso modello. In tutti i modelli si parte da dei colori primari che vengono miscelati per individuare il colore rappresentato. La quantità di ciascun colore primario è determinata dal codice. Per esempio nel codice HEX o esadecimale il codice è formato da 6 cifre esadecimali (0, 1, 2, ..., 9, A, B, C, D, E, F). Le prime due cifre indicano la quantità di Rosso, le seconde due la quantità di Verde e la terza coppia la quantità di Blu



Pubblicato il 10/09/16 - aggiornato il  | Nessun commento :

9 tool per calcolare il contrasto tra due colori per ottimizzare la visibilità di una pagina web.

Fin dal medioevo i nostri antenati sentivano l'esigenza di mostrare le figure araldiche con dei colori che fossero in un buon contrasto tra di loro per rendere gli stemmi più facilmente visibili. Per questa ragione fu coniata la regola "mai metallo su metallo e colore su colore". Anche nel mondo del web il contrasto tra il colore dello sfondo e quello del testo è fondamentale per non affaticare gli occhi dei lettori.

Alcuni navigatori hanno poi il problema del daltonismo che impedisce una corretta visibilità di alcuni colori. Ci sono vari gradi di daltonismo, una malattia solitamente genetica che porta a una non distinzione delle diverse lunghezze d'onda della luce visibile. Vediamo come procedere per scegliere dei colori di sfondo e di primo piano che abbiano un buon contrasto tra di loro. Voi certamente saprete che nel mondo del web ogni colore può essere individuato da appositi codici che possono essere quelli HEX, RGB, HSB, C++.



Pubblicato il 21/08/16 - aggiornato il  | Nessun commento :

Come trovare il codice di un colore cliccandoci sopra.

Certamente sarete a conoscenza che i colori nel web sono individuati da particolari codici dei colori secondo le regole del modello HEX esadecimale, RGB o HSB. Tali codici determinano in modo univoco i colori. La rappresentazione parte da tre colori primari che possono essere mischiati in quantità variabili che vanno da 0 a 255 per un totale di 256x256x256= 16777216 colori che sono in numero superiore a quelli percepibili dall'occhio umano.

Nel programma Photoshop e in altri software grafici esiste lo strumento Contagocce che serve per estrarre il codice del colore del pixel su cui si clicca con il mouse. Lo strumento gratuito PicPick che abbiamo già visto utile per misurare le dimensioni degli elementi di una pagina web offre anche il tool Selettori colori che funziona proprio come il Contagocce di Photoshop o Gimp.



Pubblicato il 15/06/16 - aggiornato il  | Nessun commento :

Come personalizzare i colori di testo e di sfondo nei risultati di ricerca di Blogger.

Ho appena letto una domanda posta da una lettrice sulla pagina Facebook collegata a questo sito in cui mi si chiedeva se fosse possibile modificare il colore di sfondo dei risultati di ricerca di Blogger che appaiono sopra all’area del post. La lettrice non ha aggiunto altri particolari ma mi pare di aver capito che utilizzi il widget ufficiale di Blogger per la ricerca che si trova su Layout –> Aggiungi un gadget –> Base –> Casella di ricerca.

Personalmente non uso tale widget in questo sito ma preferisco il motore di ricerca di Adsense mentre questo gadget lo utilizzo in un blog di prova per fare delle ricerche personali. Sul momento ho dato una risposta negativa alla possibilità di modificare l’aspetto dei risultati di ricerca poi però mi sono incuriosito e utilizzando i tool Ispeziona Elemento di Chrome e Analizza Elemento di Firefox sono riuscito a ricavare il selettore univoco per tutta la finestra dei risultati di ricerca. Creando una apposita regola CSS ecco come ho cambiato l’aspetto di tali risultati nel mio blog di test


Pubblicato il 15/05/16 - aggiornato il  | Nessun commento :

Come eliminare la sfumatura dal menù delle pagine di Blogger.

Giusto ieri mi è stata posta una domanda in un commento riguardo alla personalizzazione del Menù delle Pagine Statiche di Blogger. Visto che il tema potrebbe interessare altri lettori ho deciso di pubblicare un post esemplificativo della modifica che mi era stata richiesta nel commento.

In alcuni blog di Blogger il menù delle pagine statiche ha una sfumatura che a qualcuno sicuramente piacerà ma di cui altri ne farebbero a meno. Tale sfumatura non viene inserita con un tag HTML del gradiente di colore ma tramite l'URL di una immagine dei server di Blogger.

L'aspetto di un menù siffatto è simile a questo



Pubblicato il 29/03/16 - aggiornato il  | Nessun commento :

Le migliori estensioni di Chrome per trovare i codici dei colori presenti in una pagina web.

Nei software di grafica come Photoshop e Gimp c'è lo strumento Contagocce o Eyedropper che ci permette di trovare i codici dei colori di un punto di una immagine con un click del mouse. Questa semplice operazione può essere utile anche in una pagina web qualora si voglia trovare il codice di un particolare colore presente anche in un solo pixel.

Ci sono molte estensioni che ci aiutano in questa operazione e in questo post mi occuperò di quelle più utilizzate con il browser Chrome. La scelta tra una o all'altra dipende molto dalle nostre esigenze. Ce ne sono di molto complete che però rallentano un la navigazione e altre più leggere che svolgono solo quel compito specifico.



Pubblicato il 10/03/16 - aggiornato il  | Nessun commento :

Come calibrare i colori e tarare lo schermo in Windows 10.

La taratura dello schermo serve per rappresentare i colori in modo accurato in modo da renderli più fedeli ai colori che si vedranno in fase di stampa. Si tratta di una operazione particolarmente importante per chi lavora nel campo della grafica e della fotografia digitale. È anche importante avere una visualizzazione ottimale del testo.

Nel web ci sono tool e applicazioni web anche gratuite che ci permettono di svolgere questa operazione. Vediamo come procedere con lo strumento messo a disposizione degli utenti dalla Microsoft a partire da Windows 7. Il procedimento seguente prende come esempio un PC con Windows 10 ma è sostanzialmente lo stesso anche per sistemi operativi Windows 7 e Windows 8. Prima di iniziare è bene impostare o reimpostare la risoluzione nativa del computer Windows.



Pubblicato il 30/06/15 - aggiornato il  | Nessun commento :

Come convertire il codice dei colori da Hex in RGB e viceversa.

Non è mia intenzione riprendere in toto il post sui codici dei colori che è tuttora valido ma solo presentare dei tool che possono essere utili per modificare per esempio i colori di un widget che si sia scaricato da internet. In alcuni commenti ho potuto constatare che mentre il concetto di codice HEX sia stato sostanzialmente assimilato quello RGB non lo è ancora del tutto tanto che alcuni non riescono neppure a capire di che colore si tratti.

CODICI DEI COLORI


La rappresentazione True Color dei colori del web ha introdotto tre colori primari che sono Rosso, Verde e Blu. Da questi tre colori possiamo crearne molti altri mischiandoli in determinate proporzioni. Visto che possono essere usati 8 bit per definire la quantità di ciascun colore si hanno 28=256 possibilità di calibrare ciascun colore primario da un minimo di 0 a un massimo di 255.  Dato che i colori primari sono tre si hann0 quindi 256x256x256 possibili colori cioè ben 16.777.216 superiori al numero di quelli che possono essere apprezzati dall'occhio umano.

CODICE RGB


La rappresentazione dei colori più ovvia è quindi la cosiddetta RGB che è formata da una terna ordinata di numeri naturali da 0 a 255.  Ciascun numero rappresenta la quantità di quel colore primario da mischiare agli altri due. Nell'HTML questa rappresentazione ha la forma



Pubblicato il 26/06/15 - aggiornato il  | Nessun commento :

Come far diventare in bianco e nero un video a colori.

La trasformazione di un video in bianco e nero in un video a colori richiede dei software particolari ma l'operazione inversa è invece piuttosto semplice utilizzando i Filtri del programma gratuito Avidemux. Ricordo che si può togliere il colore a una immagine e farla diventare in bianco e nero sia con Photoshop sia con Gimp utilizzando la Desaturazione che trasforma la foto in una scala di grigi.

Dopo aver scaricato Avidemux dal link giusto in funzione del sistema operativo del nostro computer (Windows 32bit, Windows 64bit, Mac o Linux) si passa alla semplice installazione. Si apre il programma e dovremo importare il video da processare. Si può semplicemente trascinarlo nell'area dell'interfaccia di Avidemux oppure si va su File > Open e si seleziona il file nel disco rigido.



Pubblicato il 11/06/15 - aggiornato il  | Nessun commento :

Come modificare inline i colori dei link in una pagina web.

Se avete un blog su Blogger potete impostare i colori dei link andando sul Designer modelli che si trova su Modello > Personalizza > Avanzato > Link per settare i colori che più vi piacciono. I colori preimpostati per i testi di ancoraggio dei collegamenti non sono fissi ma sono essenzialmente di quattro tipi di cui solo tre utilizzati di solito. 

C'è il colore classico di default e quello che appare quando si punta un link con il mouse. Poi il colore dei link che sono già stati aperti nel browser cambia ancora così come può farlo anche il link che sia attivo. Si può modificare il template come mostrato in un precedente articolo ma quando vogliamo personalizzare i colori di un collegamento in un solo post possiamo inserire una classe di stile apposita senza toccare il modello. 



Pubblicato il 27/06/14 - aggiornato il  | 4 commenti :

Personalizzare i pulsanti Rispondi e Elimina nei commenti nidificati di Blogger.

Dopo che ho tenuto i commenti di Google+ per qualche mese sono dovuto tornare ai commenti classici di Blogger perché il modulo di Google+ non si mostrava più nei vecchi post impedendo ai lettori di interagire, con il risultato che alcuni di loro, a ragione, mi inviavano delle email o peggio ancora dei messaggi privati su Facebook in cui mi chiedevano delle delucidazioni. I lettori abituali di questo sito sanno quanto mi diano fastidio questi tipi di approccio visto che dedico solo una parte del mio tempo al blog e voglio essere io a decidere quale parte e non amo avere continue notifiche sul cellulare a cui tra l'altro non posso rispondere in modo adeguato visto che mi mancano gli strumenti di ricerca.

L'estetica dei commenti nidificati di Blogger è però di tipo minimalista con dei pulsanti formati da del semplice testo per rispondere o eliminare il commento



Pubblicato il 09/06/14 - aggiornato il  | Nessun commento :

Effetto opacità in una o in tutte le immagini.

Per i codici dei colori si può utilizzare il sistema RGB che consente a priori di impostare la opacità e quindi la trasparenza. Si può anche associare l'effetto opacità a un evento del mouse e mostrare una immagine opaca al passaggio del cursore oppure mostrare una foto opaca che si illumina quando il mouse le passa sopra. È anche possibile utilizzare un codice per mostrare tutte le immagini opache per poi schiarirle al passaggio del mouse oppure mostrarle nitide e opacizzarle al passaggio del cursore.

Per rendere le cose più chiare è meglio suddividere il post in sezioni ciascuna delle quali dedicata a uno specifico effetto locale o complessivo.

 

IMMAGINE OPACA CHE SI SCHIARISCE



Pubblicato il 22/11/13 - aggiornato il  | Nessun commento :

Inserire nel blog un tool per scurire e schiarire i colori partendo dal loro codice esadecimale.

Non sono particolarmente esperto di tematiche grafiche anche se uso le poche nozioni che conosco con continuità nella mia attività di blogging. Se possedete e gestite un sito vi sarete certamente trovati nella necessità di scurire o schiarire un colore modificando direttamente il suo codice. Esistono vari modelli per descrivere un colore quali HEX (codici esadecimali), RGB (rosso, verde, blu), CMYK (ciano, magenta, giallo, key black), HSB (tonalità, saturazione, luminosità). Quando un colore non può essere rappresentato da un modello di colore si dice che va fuori gamut con quest'ultimo che rappresenta appunto l'insieme dei colori rappresentabili da quel dato modello. Non sempre è possibile schiarire o scurire un colore perché appunto si può andare fuori gamut. Lasciando però da parte queste nozioni teoriche e le possibili eccezioni focalizziamo l'attenzione su un codice esadecimale che rappresenta un colore e che noi vogliamo schiarire o scurire di uno o più toni.