Quando si tratta di schizzare il colore sullo schermo, ci sono alcuni modi per farlo con la codifica. Hex, RGBA e HSLA sono tre dei sistemi di codici colore più comunemente utilizzati.
Probabilmente ti sei imbattuto in codici esadecimali e RGB in passato, ma HSL, nonostante sia più leggibile dall’uomo, potrebbe non essere ancora sul tuo radar. Ogni modo di scrivere i colori ha senso in situazioni diverse e tutto ciò di cui hai bisogno è una comprensione di base di ciascun tipo per prendere una decisione informata. Qui spiegheremo le differenze tra RGB, HEX e HSL.
Cos’è RGB (rosso, verde, blu)
Ha senso iniziare con valori RGB, da allora Rosso, verde, e Blu sono i tre colori che gli schermi possono utilizzare per produrre praticamente tutti gli altri colori. Lo fa utilizzando la “miscelazione dei colori additiva”, ma non è necessario approfondire la scienza per capire l’RBG.
rgb(255, 0, 0) è rosso, poiché la R è al massimo. Se imposti G o B su 255, otterrai il verde pieno o il blu pieno. Impostali tutti su 255 in una volta e otterrai il bianco (la somma di tutti i colori), mentre azzerarli rende il nero. Se aggiungi un quarto valore (il canale alfa, compreso tra 0 e 1) puoi anche ottenere la trasparenza: rgba(0, 0, 0, .5) si traduce in un nero semitrasparente.
È semplice, sì, ma in realtà non così intuitivo. Il bilanciamento RGB può cambiare un po ‘anche se stai solo cambiando l’ombra di un colore, rendendo molto difficile per gli esseri umani effettuare regolazioni manuali senza un qualche tipo di generatore RGB (di cui ce ne sono, fortunatamente, molti).
Cosa sono i codici colore esadecimali
Gli esagoni sono solo un modo diverso di scrivere i valori RGB. Qualcosa di simile a #6a79f7 (bluette) viene mappato direttamente a rgb(106, 121, 247). 6a è il rosso, 79 è il verdee f7 è il file blu.
Innanzitutto, dovresti sapere che nel sistema di colori esadecimali le lettere “af” rappresentano i numeri da dieci a quindici. In secondo luogo, lo è esadecimale, significa che tutto è in base 16. 21 è 2 * 10 + 1 in base 10, ma in esadecimale sarebbe 2 * 16 + 1. Basta moltiplicare il primo numero per 16 e aggiungere il secondo numero: è così facile! 6a = 6 * 16 + 10 o 106. 79 = 7 * 16 + 9 o 121.
Sebbene la matematica sia divertente, ovviamente rende i codici esadecimali ancora più fastidiosi per gli esseri umani rispetto a RGB, sebbene siano facili da copiare-incollare e possano avere combinazioni di lettere / numeri memorabili.
Puoi anche aggiungere trasparenza ai codici esadecimali inserendo un valore equivalente a una percentuale di 255 all’inizio, in questo modo: #806a79f7. 80 in esadecimale = 126, che è vicino al 50% del valore massimo di 255.
Cos’è HSL (tonalità, saturazione, luminosità)
HSL è stato praticamente progettato per la leggibilità umana e sta guadagnando popolarità, in particolare come alternativa RGB. Funziona così:
Hue significa colore e utilizza i gradi della ruota dei colori per dirti di che colore sei. Se conosci la ruota dei colori e le posizioni di questi colori principali, dovresti essere in grado di dire che 45 apparirà arancione e 270 sembrerà viola solo pensandoci per un secondo.
- 0 = rosso
- 60 = giallo
- 120 = verde
- 180 = ciano
- 240 = blu
- 300 = magenta
Saturazione è essenzialmente quanto è colorato il colore. 0% di saturazione significa che il colore sarà solo una sfumatura di grigio, mentre 100% significa che mostrerà la piena forza. Se vuoi disattivare il tuo colore o farlo risaltare un po ‘di più, puoi semplicemente modificare questo valore.
Leggerezza ti dice quanto è scuro o luminoso il colore. 0% di luminosità significa che il tuo colore sarà nero, indipendentemente dalle impostazioni di tonalità o saturazione, e il 100% di luminosità ti farà diventare bianco. Come avrai intuito, il 50% ti dà il colore più accurato.
Con queste informazioni, dovresti essere in grado di dire immediatamente cosa hsl(0, 100%, 50%) si intende. È solo rosso! Vuoi un rosso più scuro e più ricco? Provare 0, 70%, 40%. Forse lo vuoi, ma in blu? Basta cambiare da 0 a 240 e il gioco è fatto! Ha anche la trasparenza – funziona proprio come RGB: basta aggiungere un quarto valore (tra 0 e 1), in questo modo: hsla(240, 70%, 40%, .5).
HSV / HSB e HSI
Che cosa? Altri modelli di colore? Quando finisce? Per la maggior parte delle persone che lavorano con i colori sui computer, è già finita. Hex, RGB e HSL sono di gran lunga i modi più comuni per annotare i colori. Se ti trovi in un campo che coinvolge molte immagini e colori, tuttavia, come la progettazione grafica o l’apprendimento automatico sulle immagini, potresti imbatterti in persone che usano uno di questi modelli di colore più esoterici, o anche uno degli altri non elencati qui.
HSB sta per “Hue Saturation Brightness” e HSVs sta per Hue Saturation Value. In realtà sono solo nomi diversi per lo stesso modello e la loro più grande differenza da HSL è nel modo in cui definiscono la saturazione. HSI (Hue Saturation Intensity) ha alcune piccole differenze da HSB / HSV, ma non è ampiamente utilizzato, quindi è probabile che non lo vedrai molto in natura.
Quale modello di colore dovrei usare?
In generale, la scelta di un modello di colore è una decisione di progettazione abbastanza minore, ma le cose buone vengono prese con molte piccole decisioni. In generale, i codici esadecimali facilitano il copia-incolla e sono ottimi in situazioni in cui gli umani probabilmente non saranno coinvolti molto. RGB / RGBA è decente per la leggibilità ed è meglio usato quando sarebbe bello se un essere umano potesse a volte modificare la trasparenza. Se un essere umano avrà bisogno di cambiare manualmente il colore, vai con HSL / HSLA. Oltre a questo, è più o meno una questione di preferenza, anche se le persone del team HSL tendono ad essere più intelligenti e più belle.
Crediti immagine: Colore HSL Solid Cilindro Saturazione Grigio, Colore additivo, Cartella colori XTerm, HSL e HSV, Munsell 1943
