Fondamenti CSS: lavorare con i colori

Ci sono molti fattori da considerare quando si progetta un sito web; font, flusso UX e molto altro. Un elemento di design molto importante è il colore. Anche decisioni semplici come il colore del marchio, il colore del bordo e il colore dello sfondo producono un impatto definito e evidente.

In questo articolo tratteremo i fondamenti dei colori CSS e impareremo come trasformare un sito HTML in un sito Web dall'aspetto impeccabile.

Iniziare con i colori CSS

C'è un certo modo per descrivere i colori nei CSS che un computer può capire. In genere viene eseguito suddividendo il colore in vari componenti, calcolando un insieme misto di colori primari per formare il colore desiderato. Esistono diversi modi per descrivere un colore nei CSS.

Utilizzo dei nomi dei colori come parole chiave

Esistono circa 140 nomi di colori CSS supportati dalla maggior parte dei browser moderni. Potrebbe essere semplice come rosso o ciano per la parola chiave colore. Anche se aiuta con una gamma moderata di colori, sei limitato a pochi colori impostati con zero controllo su sfumature e tinte. Qui è dove dovrai passare alla gamma più alta di opzioni di colore CSS.

/*Syntax*/
colore rosso;
colore: cremisi;
colore: blu ardesia;

Utilizzo dei valori RGB

Durante la progettazione di un sito Web o di un'app, il combinazione di colori conta molto: sicuramente non dovrebbe essere l'ultima cosa che consideri. In CSS, puoi usare tre metodi per rappresentare un colore RGB. Si tratta della notazione esadecimale delle stringhe, della notazione funzionale RGB e della notazione funzionale HSL. Ecco uno sguardo più da vicino a ciascuno di essi.

Notazione esadecimale delle stringhe

La notazione esadecimale della stringa inizia sempre con il carattere #. Dopo questo carattere, si specificano i colori utilizzando cifre esadecimali di un codice colore specifico. La stringa non fa distinzione tra maiuscole e minuscole, ma è normale utilizzare le minuscole. Ecco alcuni casi d'uso:

#rrggbb

È il modo più comune per descrivere un colore numerico. È un colore completamente opaco con componenti rossi, verdi e blu come 0xrr, 0xgg, e 0xbb rispettivamente.

#rrggbba

Segue i criteri RGB descritti sopra con un canale alfa che gestisce la trasparenza del colore. Più basso è il 0xaa valore è, più il colore diventa traslucido.

#rgb

Se hai il colore #556677, puoi semplicemente scriverlo come #567 poiché rappresenta 0xrr, 0xgg, e 0xbb rispettivamente. Ad esempio, #000 (o #000000) è nero mentre #F F F (o #ffffff) e bianco.

#rgba

Segue i criteri di cui sopra con un canale alfa specificato da 0xaa per controllare l'opacità.

Notazione funzionale RGB

La notazione funzionale RGB rappresenta i colori utilizzando i componenti rosso, verde e blu. È definito usando il funzione rgb() che accetta parametri di input sotto forma di componenti primari rosso, verde e blu (e un canale alfa opzionale). I valori rosso, verde e blu devono essere un numero intero compreso tra 0 a 255 (compreso), o una percentuale variabile dallo 0% al 100%. D'altra parte, il canale alfa accetta valori da 0.0 (completamente trasparente) a 1.0 (completamente opaco). Accetta anche valori percentuali da 0% (uguale a 0,0) e 100% (uguale a 1,0).

/*Syntax*/
colore: rgb (rr, gg, bb);
colore: rgba (rr, gg, bb, a);

Notazione funzionale HSL

La notazione funzionale HSL rappresenta il colore utilizzando tonalità, saturazione e luminosità. È molto simile al RGB() funzione in termini di utilizzo. Puoi facilmente trova il valore esadecimale di qualsiasi colore sullo schermo del tuo computer. In questo metodo di colore, la tonalità definisce il colore effettivo in base alla posizione sulla ruota dei colori. La saturazione è la percentuale di grigio con la massima tonalità possibile. La luminosità fa passare il colore dal suo aspetto più scuro a quello più luminoso possibile man mano che aumenta.

Il valore della tonalità (H) è specificato dall'unità angolare supportata nei CSS. Include grado, rad, laurea, e giro. Saturazione (S) specifica la percentuale del colore finale composta da tonalità. Il componente luminosità (L) definisce il livello di grigio.

/*Syntax*/
colore: hsl (XXdeg, XX%, XX%);
colore: hsl (XXturn, XX%, XX%);

Applicare i colori agli elementi HTML

In CSS, il colore la proprietà definisce il colore di primo piano del contenuto e colore di sfondo definisce il colore di sfondo del contenuto strutturato da HTML. Quando viene eseguito il rendering di un elemento, è possibile utilizzare le proprietà del colore per modificarne lo stile.

Proprietà del colore per i testi

Il colore viene utilizzata durante il disegno del testo e quando è necessario qualsiasi tipo di decorazione del testo. Puoi usare il colore-decorazione-testo proprietà per eseguire il rendering di sottolineature, sovralinee o linee barrate di diversi colori. Puoi cambiare il colore di sfondo del testo usando il colore di sfondo proprietà. Puoi applicare un effetto ombra al testo usando il testo-ombra proprietà. Puoi selezionare enfasi-testo-colore mentre si disegnano simboli di enfasi nei campi di testo.

Proprietà del colore per le scatole

Come sai, tutto su una pagina web segue il modello box. Pertanto, ogni elemento è una scatola con una sorta di contenuto e spaziatura interna, bordo e margine opzionali. Puoi usare il colore di sfondo proprietà quando non sono presenti contenuti in primo piano. Quando stai disegnando una linea per separare le colonne di un testo, puoi usare il colonna-regola-colore proprietà per esso. C'e 'un contorno-colore proprietà per colorare il contorno. Nota che un contorno è diverso dal bordo: funge da indicatore di messa a fuoco.

Proprietà del colore per i bordi

Qualsiasi elemento HTML può avere un bordo. Puoi impostare il colore del bordo proprietà come bordo-top-colore, bordo-colore-destro, bordo-fondo-colore, e bordo-sinistro-colore per impostare il colore del bordo dei lati corrispondenti. Tuttavia, l'uso della proprietà stenografia è una buona pratica.

Il border-inline-start-color La proprietà consente di colorare i bordi del bordo più vicini all'inizio. D'altra parte, il bordo-inline-fine-colore La proprietà consente di colorare la fine dell'inizio delle righe di testo all'interno di una casella. Anche se varia a seconda del tuo modalità di scrittura, orientamento del testo, e direzione.

Riepilogo: colore e accessibilità

Sebbene un sito Web ben progettato sia fortemente influenzato dal colore utilizzato, dovresti sempre assicurarti che sia accessibile. L'uso improprio del colore può comportare la perdita di traffico significativo sul tuo sito web.

L'uso di notazioni di stringhe esadecimali, nomi di colori o valori RGB dipende completamente da te. Assicurati solo di utilizzare i colori per rafforzare il testo esistente e di farlo seguire una determinata gerarchia visiva. Imparare di più sulla teoria dei colori e creare la tua tavolozza è un'idea eccezionale se sei uno sviluppatore web in erba. Fino ad allora, codifica felice e colorata!

Come usare la teoria del colore per elevare i tuoi progetti creativi

Usando i colori giusti nel modo giusto puoi portare i tuoi progetti creativi a un livello completamente nuovo.

Leggi Avanti

Circa l'autore