Ci sono dei buoni motivi per usare l’esadecimale sopra i decimali per i valori di colore RGB nei CSS?

rgb(255,255,255) notazione rgb(255,255,255) è disponibile dal CSS1. Ma #ffffff sembra essere molto più popolare.

Ovviamente è leggermente più compatto. So che l’esagono è più strettamente correlato ai byte sottostanti, e capisco che ci sarebbero dei vantaggi nello svolgere l’aritmetica su quei valori, ma questo non è qualcosa che farai con i CSS.

I valori dei colors tendono ad essere originati da designer (come me) che non avrebbero mai incontrato notazioni esadecimali in nessun altro luogo e hanno molta più familiarità con la notazione decimale che è il modo principale per specificare il colore nelle app che usano – in realtà ho incontrato alcuni che non si rendono conto di come un dato valore esadecimale si scomponga in componenti RGB e si presume che non sia direttamente correlato al colore, come un riferimento al sistema di colors Pantone (es. PMS432).

Quindi, qualche motivo per non usare decimale?

I valori esadecimali sono più facili da copiare e incollare dal tuo editor di immagini preferito.

I valori RGB sono più facili da manipolare con Javascript.

(Il mio valore di colore Hex preferito è #EDEDED e un sito che abbiamo realizzato per un cliente coinvolto nel motorsport aveva un colore di sfondo di # F1F1F1 🙂

Ed.

Vale la pena notare che se si desidera immettere un valore RGBA, la notazione esadecimale non è supportata; cioè, non puoi fingere con #FFFFFFFF. In effetti, il valore alfa deve essere un numero compreso tra 0.0 e 1.0, inclusi. (Controlla questa pagina per il supporto del browser – come sempre, IE è leader del pacchetto qui;;))

Il supporto per i colors HSL e HSLA – che è molto amichevole per la progettazione – è dotato anche di una syntax simile allo stile RGB (). Se un progettista dovesse utilizzare entrambi i tipi di valori di colore nello stesso foglio di stile, potrebbe optare per valori decimali su codici esadecimali per coerenza.

Penso che sia ciò a cui sei abituato. Se sei abituato all’HTML, probabilmente utilizzerai HEX poiché è stato appena utilizzato molto in HTML. Se provieni da uno sfondo di progettazione, usando Photoshop / Corel / PaintShopPro ecc., Probabilmente sei abituato alla notazione RGB, anche se molti programmi in questi giorni incorporano anche un campo di valori HEX.

Come detto, RGBA potrebbe essere un motivo per andare semplicemente con la notazione RGB – consistenza.

Però, penso che dipenda anche dallo scenario. Se sei a tuo agio con entrambi, potresti semplicemente passare da una all’altra: #fff è molto più semplice da scrivere rispetto a rgb(255,255,255) .

Un’altra domanda è: perché la gente dirà #fff anziché White (presumendo che la maggior parte dei browser supporti questa parola chiave).

È tutta una questione di preferenza e leggibilità: se stai mantenendo un enorme file CSS, essere in grado di guardare il valore del colore e sapere di che colore è, è un vantaggio davvero buono. Ancora più vantaggioso è usare qualcosa come LESS o Sass per aggiungere una sorta di programmabilità ai CSS – permettendo costanti, per esempio. Quindi, invece di dire:

 #title { color: #abcdef; } 

Si potrebbe invece fare quanto segue con LESS:

 @base-color: #abcdef; #title { color: @base-color; } 

Mantenere il CSS diventa meno di un problema.

Se sei preoccupato per le prestazioni del browser che lo rende risultato, allora questo potrebbe anche essere un altro fattore per la tua scelta.

Quindi, in breve, si riduce a:

  • Familiarità
  • Preferenza
  • manutenibilità
  • Prestazione

Tradizionalmente, l’HTML ha sempre utilizzato i colors esadecimali, quindi ha portato avanti nei CSS. Pensa

Il motivo principale è probabilmente la compattezza, come hai detto. #ffffff può essere ulteriormente abbreviato nella notazione abbreviata #fff .

Un’altra ansible ragione è che c’è un aumento delle prestazioni percepito salvando il browser il problema di convertire la notazione rgb .

Ho sempre usato hex, ma oggi preferisco impostare i miei valori come:

 rgb(82, 110, 188) 

nei miei file css, quindi ogni volta che voglio aggiungere opacità ho solo bisogno di rinominare rgb in rgba e aggiungere il valore di opacità. Il vantaggio è che non devo convertire il valore esadecimale in rgb prima di poter aggiungere l’opacità:

 rgba(82, 110, 188, 0.5) 

Il CSS è stato inventato dagli sviluppatori di software, non dai designer. Gli sviluppatori di software vivono e respira hex. Dai miei vecchi C64 giorni, posso ancora leggere la maggior parte dei numeri esadecimali senza pensare. A9, qualcuno?

Varie cose accetteranno un singolo valore esadecimale dove potrebbero avere modi diversi di inserire tre valori decimali. C’è anche il fatto che è sempre 6 caratteri (o 3, ammettiamolo – più il #) che rende più facile scansionare un elenco di essi.

Solo un paio di pensieri casuali da aggiungere al mix …

Probabilmente un touch di velocità quando il colore viene interpretato da un browser. Altrimenti alcune persone dello sfondo del design potrebbero sapere come comporre i colors dai componenti RGB quando scrivono il codice, e alcuni altri dal background di programmazione sono probabilmente più inclini a utilizzare i valori HEX.

nessun motivo valido, diverso dalle preferenze personali.

Forse ho fatto l’HTML troppo a lungo, ma trovo più semplice pensare nei valori HEX. Gran parte della tavolozza dei colors predefinita per le mappe HTML ordinatamente ai valori HEX. L’utilizzo del formato abbreviato offre anche colors automatici ‘sicuri per il web’, anche se questo non è un problema ai tempi dei display a colors a 32 bit.

HEX è più comune a causa di ragioni storiche.

Prima che i CSS fossero comuni nello sviluppo web, i colors venivano specificati all’interno dei tag HTML e il modo più comunemente usato e supportato per specificare un colore era usare i valori HEX.