Colore - Trucchi CSS

Anonim

La colorproprietà in CSS imposta il colore del testo e le decorazioni del testo.

p ( color: blue; )

Valori

La colorproprietà può accettare qualsiasi valore di colore CSS.

  • Colori con nome: ad esempio, "acqua".
  • Colori esadecimali: ad esempio, # 00FFFF o # 0FF.
  • Colori RGB e RGBa: ad esempio, rgb (0, 255, 255) e rgba (0, 255, 255, .5).
  • Colori HSL e HSLa: ad esempio, hsl (180, 100%, 50%) e hsla (180, 100%, 50%, .5).

Colori con nome

p ( color: aqua; )

I colori con nome sono noti anche come colori delle parole chiave, colori X11 o colori SVG. Tutti i colori con nome sono opachi per impostazione predefinita tranne transparent, che è completamente trasparente o "chiaro". Consulta il nostro snippet Colori con nome ed Equivalenti esadecimali per un elenco dei colori con nome.

Colori esadecimali

I colori esadecimali o esadecimali sono specificati con valori alfanumerici. La prima coppia di caratteri rappresenta il valore rosso, la seconda coppia rappresenta il valore verde e la terza coppia rappresenta il valore blu, il tutto in un intervallo da 00 a FF.

p ( color: #00FFFF; )

Se le coppie di valori rosso, blu e verde sono tutte doppie, è possibile abbreviare il valore esadecimale con una scorciatoia di 3 caratteri, ad esempio # 00FFFF può essere abbreviato in # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Colori RGB e RGBa

I colori RGB sono specificati con un elenco separato da virgole di tre valori numerici (compresi tra 0 e 255) o valori percentuali (compresi tra 0% e 100%). Il primo valore rappresenta il valore rosso, il secondo rappresenta il valore verde e il terzo rappresenta il valore blu. I colori RGB sono opachi per impostazione predefinita.

p ( color: rgb(0, 255, 255); )

RGBa aggiunge un quarto valore per il canale alfa, che imposta l'opacità del colore. Il valore alfa è un numero compreso in un intervallo da 0,0 (completamente trasparente) a 1 (completamente opaco).

p ( color: rgba(0, 255, 255, .5); )

Colori HSL e HSLa

I colori HSL sono specificati con un elenco separato da virgole di tre valori: il grado di tonalità (un numero compreso tra 0 e 360), una percentuale di saturazione (compresa tra 0% e 100%) e una percentuale di luminosità (compresa tra 0% al 100%). I colori HSL sono opachi per impostazione predefinita.

p ( color: hsl(180, 100%, 50%); )

HSLa aggiunge un quarto valore per il canale alfa per controllare l'opacità del colore. Il valore alfa è un numero compreso in un intervallo da 0,0 (completamente trasparente) a 1 (completamente opaco).

p ( color: hsla(180, 100%, 50%, .5); )

Demo

Vedi i valori del colore della penna di CSS-Tricks (@ css-tricks) su CodePen.

Note sull'utilizzo

La colorproprietà precipita. Se lo imposti sul corpo, tutti gli elementi discendenti erediteranno quel colore, a meno che non abbiano il proprio colore impostato nel foglio di stile del programma utente.

I bordi ereditano a colormeno che non sia specificato un valore di colore nella borderdichiarazione.

La colorproprietà si applica alle text-decorationlinee. Nei browser che supportano la text-decoration-colorproprietà, è possibile specificare colori diversi per il testo e le sue linee decorative.

colorsi applica anche ai marcatori di elementi dell'elenco (come elenchi puntati e numeri). Non puoi impostare un colore separato per un indicatore di voce di elenco, ma puoi sostituirlo con un'immagine con la list-styleproprietà.

Sebbene i colori con nome e i colori esadecimali non abbiano canali alfa, puoi impostare la loro opacità con la opacityproprietà in tutti i browser attuali e in IE9 +.

Relazionato

  • font
  • text-decoration-color
  • opacity

Maggiori informazioni

  • color nelle specifiche W3C
  • color presso MDN
  • Articolo CSS-Tricks Yay per HSLa

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
Qualunque Qualunque Qualunque Qualunque Qualunque * Qualunque Qualunque

* HSL, HSLa e RGBa sono supportati in IE9 +.