4 modi per definire i colori nei CSS

Punti chiave

• Utilizzo dei nomi dei colori: i CSS forniscono 145 nomi dei colori per una selezione dei colori semplice e adatta ai principianti, ma le opzioni sono limitate e potrebbero non soddisfare esigenze di progettazione precise.
• Codici colore esadecimali: i codici esadecimali offrono un'ampia gamma di opzioni di colore e una personalizzazione precisa, sebbene possano essere meno intuitivi da usare e ricordare.
• Valori di colore RGB e RGBA: RGB consente un controllo accurato del colore con valori numerici, mentre RGBA aggiunge trasparenza. È importante garantire combinazioni di colori accessibili.

I colori sono tra gli attributi CSS più comunemente utilizzati e svolgono un ruolo fondamentale nel modellare l'identità visiva, l'umore e l'esperienza utente di un sito Web. I CSS offrono una vasta gamma di scelte per l'utilizzo del colore, ciascuna adattata alle esigenze e preferenze di progettazione specifiche.

Sebbene sia facile trascurare l'importanza della definizione del colore, le tue scelte possono influenzare in modo significativo l'aspetto del tuo sito web. Esplorare le differenze tra i vari metodi e come applicarli praticamente e combinarli migliorerà la tua capacità di creare siti Web visivamente accattivanti.

1. Utilizzo dei nomi dei colori

I CSS forniscono un modo pratico per definire i colori utilizzando i nomi e sono disponibili 145 opzioni. Questi nomi di colori vanno dal semplice “rosso”, “verde” e “blu” a tonalità più specifiche come “corallo” o “lavanda”.

Usare i colori con nome è semplice: selezioni un nome di colore come "rosso" e lo usi in una proprietà CSS che supporta i valori di colore. Come le proprietà includono l'ovvio colore E colore di sfondo, ma anche colore del bordo, colore del contorno, E testo-ombra, tra gli altri.

I nomi dei colori sono utili quando hai bisogno di un colore temporaneo per la prototipazione o vuoi mantenere il tuo codice facile da leggere. Ecco la sintassi:

color_property: color_name;

In questo caso è sufficiente sostituirlo nome_colore con il colore specifico che desideri utilizzare. Ad esempio, se desideri impostare il testo colore di un paragrafo a rosso, scrivere:

p {
color: red;
}

Questo darà ai tuoi paragrafi un colore di testo rosso:

Professionisti: sono facili da leggere e comprendere nel codice CSS. Sono adatti ai principianti, funzionano bene su tutti i browser e sono utili per idee di progettazione rapide.

Contro: Hanno opzioni limitate e potrebbero non offrire le sfumature precise di cui hai bisogno, limitando la creatività del design. Inoltre, potrebbero non soddisfare sempre i severi requisiti di accessibilità e il supporto nei sistemi più vecchi può variare.

2. Codici colore esadecimali

I codici colore esadecimali, spesso definiti “codici esadecimali”, sono i metodi più comuni per specificare i colori nel web design. Questi codici sono costituiti da combinazioni di sei caratteri di numeri e lettere (0-9, A-F), che rappresentano il mix di componenti rosso, verde e blu (RGB) in un colore.

Sebbene siano facili da usare, capire come funzionano può essere difficile. Puoi prendere un approfondimento sui codici esadecimali per capire meglio. Ecco un esempio di base di come potresti utilizzare i codici esadecimali nei CSS:

color: #RRGGBB;

In questo formato, RR, GG e BB rappresentano rispettivamente i componenti rosso, verde e blu. Ciascun componente può variare da 00 (nessuna intensità) a FF (intensità massima). Ad esempio, se desideri impostare il colore di sfondo dell'intestazione di un sito Web su una specifica tonalità di blu, puoi utilizzare un codice esadecimale come questo:

header {
background-color: #336699;
}

Questo produrrà un colore blu intenso:

​​​​​

Puoi anche usare una abbreviazione se ciascuno dei tre componenti ripete lo stesso carattere due volte. Puoi scrivere l'esempio sopra come:

header {
background-color: #369;
}

Professionisti: I codici colore esadecimali forniscono un'ampia gamma di opzioni di colore, consentendo di generare sfumature dettagliate e personalizzate. Offrono un controllo fluido sulle scelte cromatiche, rendendoli ideali per requisiti di progettazione complessi.

Contro: Sebbene i codici esadecimali siano potenti, possono essere meno intuitivi dei colori con nome. Potresti anche incontrare la sfida di ricordare valori di colore specifici. Fortunatamente, strumenti per trovare i codici esadecimali dei colori che incontri sono disponibili, rendendo il processo più gestibile.

3. Valori di colore RGB e RGBA

Come i codici esadecimali, questo formato consente di specificare i colori in base ai componenti rosso, verde e blu. Questa volta, tuttavia, puoi utilizzare numeri interi più amichevoli.

Valori di colore RGB

I valori di colore RGB sono il secondo metodo più comunemente utilizzato per definire i colori nei CSS. "RGB" rappresenta il rosso, il verde e il blu, espressi come una funzione CSS seguita da parentesi. All'interno delle parentesi, assegni valori a ciascun canale di colore, compresi tra 0 e 255. Ciò ti consente di controllare l'intensità del rosso, del verde e del blu nel colore che desideri utilizzare.

Ecco la sintassi:

rgb(red_value, green_value, blue_value);

Sostituire valore_rosso, valore_verde, E valore_blu con i rispettivi valori numerici. Ad esempio, puoi ottenere i colori bianco, nero e rosso come quelli mostrati in questa immagine:

Quando imposti tutti e tre i canali di colore (rosso, verde e blu) sul valore massimo di 255, si ottiene l'intensità più alta per ciascun canale, creando il colore bianco:

.white-box {
 color: rgb(255, 255, 255);
}

Quando si impostano tutti e tre i canali di colore sul valore minimo pari a 0, ciò rappresenta l'assenza di colore in ciascun canale, risultando nel nero.

.black-box {
color: rgb(0, 0, 0);
}

Impostando il canale rosso al suo valore massimo di 255, mantenendo gli altri canali al loro valore minimo di 0, si produce il colore rosso:

.red-box {
color: rgb(255, 0, 0); 
}

Valori di colore RGBA

RGBA funziona allo stesso modo di RGB, l'unica differenza è l'inclusione di un valore alfa. La "A" in RGBA sta per alfa, che determina il livello di trasparenza o opacità del colore scelto. Un valore pari a 0 rappresenta la trasparenza completa, rendendo il colore completamente invisibile, mentre un valore pari a 1 rappresenta l'opacità completa, rendendo il colore completamente visibile.

RGBA è particolarmente utile quando desideri creare elementi con diversi livelli di trasparenza, come sfondi traslucidi o testo sbiadito. La sintassi completa è:

color: rgba(red_value, green_value, blue_value, alpha_value);

Qui, valore_rosso, valore_verde, E valore_blu rappresentare i canali di colore come in RGB, e valore_alfa specifica il livello di trasparenza.

div {
background-color: rgba(0, 128, 0, 0.5);
}

In questo esempio, il valore alfa di 0,5 assegna il 50% di trasparenza al colore verde, consentendo al contenuto sottostante di essere visibile:

Professionisti: RGB e RGBA ti consentono di controllare i colori in modo accurato, semplificando la scelta di tonalità precise e la creazione di design visivamente accattivanti. Sono compatibili con vari browser Web, garantendo che i colori scelti siano coerenti.

Contro: La sfida sta nel garantire combinazioni di colori accessibili. È fondamentale prestare attenzione ai rapporti di contrasto, soprattutto quando si lavora con la trasparenza in RGBA. Le linee guida WCAG possono aiutare ti assicuri che il tuo design sia accessibile.

4. Valori di colore HSL e HSLA

HSL, abbreviazione di Tonalità, Saturazione e Luminosità, è un'altra funzione CSS che definisce i colori. Proprio come RGB, HSL utilizza valori numerici per rappresentare i colori, ma lo fa in modo diverso. Potresti avere familiarità con Valori HSL dai componenti dell'interfaccia utente nelle app di progettazione e altrove.

Tinta: rappresenta il colore stesso utilizzando i gradi su una ruota dei colori, che vanno da 0 a 360. Immaginatelo come selezionare un punto su un cerchio, dove ogni grado corrisponde a un colore diverso. Ad esempio, 0 e 360 ​​gradi per il rosso, 120 gradi per il verde e 240 gradi per il blu.

Saturazione: La saturazione determina la vivacità o l'intensità del colore. Definisce la relazione del colore con il grigio, dove lo 0% corrisponde alla scala di grigi completa (desaturato) e il 100% corrisponde alla saturazione completa (vibrante e puro).

Leggerezza: La luminosità rappresenta quanto luminoso o scuro appare il colore. È legato alla posizione del colore nello spettro tra nero (0%) e bianco (100%). Un valore del 50% rappresenta il colore normale, mentre i valori inferiori al 50% scuriscono il colore e i valori superiori al 50% lo schiariscono.

Oltre all'HSL c'è l'HSLA, dove la “A” sta per “alfa”. Questo è simile alla “A” in RGBA e indica trasparenza.

Ecco la sintassi:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Usando questa sintassi, sostituisci tonalità_valore, percentuale_saturazione, E leggerezza_percentuale con i valori specifici desiderati per ciascun componente. Per esempio:

div {
background-color: hsl(120, 100%, 50%);
}

In questo esempio, il colore di sfondo di a div l'elemento è impostato su un verde vibrante utilizzando i valori HSL. Il 120 rappresenta la tonalità (verde), il 100% indica la saturazione completa e il 50% imposta la luminosità a un livello equilibrato.

Professionisti: HSL e HSLA offrono calcoli cromatici versatili utilizzando le proprietà personalizzate CSS. Sono altamente compatibili con i browser moderni e consentono facili regolazioni alla luminosità del colore.

Contro: L'apprendimento dell'HSL implica comprendere la scienza del colore, come tonalità e saturazioni, che possono essere più impegnativi rispetto ai familiari colori RGB.

Abbracciare la potenza dei colori CSS

Esistono più metodi che puoi controllare mentre esplori i diversi formati per definire i colori nei CSS, tieni presente che hai il potere di modellare l'aspetto, l'umore e l'esperienza utente del tuo sito web.

La scelta del formato colore, che si tratti di semplici nomi di colore, codici esadecimali, RGB o HSL, può influire sul modo in cui il tuo pubblico percepisce il tuo sito. Quindi, sperimenta, impara e trova le definizioni di colore che meglio si adattano ai tuoi obiettivi di progettazione.