HTML - Colori

Benvenuti, futuri sviluppatori web! Oggi ci immergeremo nel mondo vibrante dei colori HTML. Come il vostro amico insegnante di informatica del quartiere, sono entusiasta di guidarvi in questo viaggio colorato. Alla fine di questo tutorial, sarete in grado di dipingere il web con la sicurezza di un Picasso digitale!

HTML - Colors

Metodi di Codifica dei Colori HTML

Prima di iniziare a spruzzare colori ovunque sulle nostre pagine web, capiremo come possiamo rappresentare i colori in HTML. Esistono diversi modi per specificare i colori, e ognuno ha il proprio fascino. Esaminiamoli uno per uno:

Nomi dei Colori
Valori Esadecimali
Valori RGB
Valori RGBA
Valori HSL
Valori HSLA

Ecco una tabella comoda che riassume questi metodi:

Metodo	Esempio	Descrizione
Nomi dei Colori	`red`	Nomi dei colori predefiniti
Esadecimali	`#FF0000`	Codice a 6 cifre che rappresenta i valori RGB
RGB	`rgb(255, 0, 0)`	Valori Rosso, Verde, Blu (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB con valore Alpha (opacità)
HSL	`hsl(0, 100%, 50%)`	Tonalità, Saturazione, Luminosità
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL con valore Alpha

Non preoccupatevi se questo sembra un Brodo Alphabético in questo momento. Lo analizzeremo passo per passo!

Impostazione del Colore del Testo

Iniziamo con qualcosa di semplice: cambiare il colore del nostro testo. Utilizziamo la proprietà color in CSS per ottenere questo risultato. Ecco un esempio:

<p style="color: blue;">Questo testo è blu!</p>

In questo esempio, stiamo utilizzando uno stile in linea per impostare il colore. L'attributo style ci permette di aggiungere CSS direttamente a un elemento HTML. La parte color: blue; sta dicendo al browser di visualizzare questo testo in blu.

Ma cosa succede se vogliamo utilizzare una tonalità specifica di blu? È qui che entrano in gioco i nostri altri metodi di codifica dei colori:

<p style="color: #0000FF;">Questo è anche blu, utilizzando un codice esadecimale!</p>
<p style="color: rgb(0, 0, 255);">E questo è blu utilizzando valori RGB!</p>

Entrambi questi esempi produrranno la stessa tonalità di blu del nostro primo esempio. Il codice esadecimale #0000FF e il valore RGB rgb(0, 0, 255) entrambi rappresentano il blu puro.

Impostazione del Colore di Sfondo

Ora, aggiungiamo un po' di pepe alla nostra pagina con i colori di sfondo. Utilizziamo la proprietà background-color per questo:

<div style="background-color: yellow; padding: 10px;">
Questo div ha uno sfondo giallo!
</div>

In questo esempio, stiamo impostando il colore di sfondo di un elemento div su giallo. Il padding: 10px; è solo per dare al nostro testo un po' di spazio.

Ricordate quando ho menzionato RGBA prima? Ecco dove può essere davvero utile:

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
Questo div ha uno sfondo giallo semi-trasparente!
</div>

Il 0.5 alla fine di rgba(255, 255, 0, 0.5) imposta l'opacità al 50%, dando noi un bel effetto semi-trasparente.

Impostazione del Colore del Bordo

Facciamo da cornice al nostro lavoro con bordi colorati:

<div style="border: 2px solid green; padding: 10px;">
Questo div ha un bordo verde!
</div>

Qui, stiamo utilizzando la proprietà border per creare un bordo di 2 pixel largo e solido intorno al nostro div.

Possiamo diventare più creativi e utilizzare colori diversi per ciascun lato del bordo:

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
Questo div ha un colore diverso per ciascun bordo!
</div>

Colori HTML - Nomi dei Colori

HTML viene con un set di nomi di colori predefiniti che potete utilizzare. Questi sono ottimi quando state prototipando o avete bisogno di un colore rapido senza preoccuparsi di tonalità specifiche.

<p style="color: tomato;">Questo testo è colorato di pomodoro!</p>
<p style="color: skyblue;">Questo testo è azzurro!</p>
<p style="color: mediumseagreen;">Questo testo è verde medio mare!</p>

16 Colori Standard W3C

Il W3C (World Wide Web Consortium) ha definito 16 colori standard supportati da tutti i browser. Questi sono:

Nero
Argento
Grigio
Bianco
Marrone
Rosso
Viola
Fucsia
Verde
Limone
Oliva
Giallo
Blu di mare
Blu
Verdeacqua
Acqua

Ecco una dimostrazione rapida:

<table>
<tr>
<td style="background-color: black; color: white;">Nero</td>
<td style="background-color: silver;">Argento</td>
<td style="background-color: gray;">Grigio</td>
<td style="background-color: white;">Bianco</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Marrone</td>
<td style="background-color: red;">Rosso</td>
<td style="background-color: purple; color: white;">Viola</td>
<td style="background-color: fuchsia;">Fucsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Verde</td>
<td style="background-color: lime;">Limone</td>
<td style="background-color: olive;">Oliva</td>
<td style="background-color: yellow;">Giallo</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Blu di mare</td>
<td style="background-color: blue; color: white;">Blu</td>
<td style="background-color: teal; color: white;">Verdeacqua</td>
<td style="background-color: aqua;">Acqua</td>
</tr>
</table>

Impostazione del Colore di Sfondo con Nomi dei Colori

Abbiamo già visto come impostare i colori di sfondo, ma rafforziamo il concetto con i nomi dei colori:

<div style="background-color: lavender; padding: 10px; margin: 5px;">Sfondo lavanda</div>
<div style="background-color: mistyrose; padding: 10px; margin: 5px;">Sfondo roseato</div>
<div style="background-color: honeydew; padding: 10px; margin: 5px;">Sfondo miele</div>

Questi colori pastello possono creare un effetto lenitivo sulla vostra pagina web. Ricordate, la scelta del colore può influenzare greatly il mood e la leggibilità del vostro sito!

Colori Sicuri per il Browser

Nei primi giorni del web, dovevamo preoccuparci dei "colori sicuri per il browser" - una tavolozza di 216 colori che si visualizzavano in modo coerente attraverso diversi browser e sistemi operativi. Oggi, con display moderni, questo è meno una preoccupazione. Tuttavia, è sempre bene sapere per la retrocompatibilità o quando si designed per sistemi più vecchi.

Ecco un piccolo campione di colori sicuri per il browser:

<div style="background-color: #FF0000; color: white; padding: 5px; margin: 2px;">Rosso (#FF0000)</div>
<div style="background-color: #00FF00; padding: 5px; margin: 2px;">Verde (#00FF00)</div>
<div style="background-color: #0000FF; color: white; padding: 5px; margin: 2px;">Blu (#0000FF)</div>
<div style="background-color: #FFFF00; padding: 5px; margin: 2px;">Giallo (#FFFF00)</div>
<div style="background-color: #00FFFF; padding: 5px; margin: 2px;">Ciano (#00FFFF)</div>
<div style="background-color: #FF00FF; padding: 5px; margin: 2px;">Magenta (#FF00FF)</div>

E voilà, gente! Ora siete equipaggiati con la conoscenza per aggiungere un tocco di colore alle vostre pagine web. Ricordate, con grandi colori arriva una grande responsabilità - utilizzate le vostre nuove potenzialità saggiamente per creare siti web visivamente accattivanti e accessibili.

Mentre chiudiamo, ecco un piccolo scherzo per voi sviluppatori web: Perché gli sviluppatori web preferiscono la modalità scura? Perché la luce attira gli insetti!

Continuate a sperimentare con i colori e non abbiate paura di essere creativi. Buon codice, e che le vostre pagine web siano sempre colorate!

Credits: Image by storyset