SOS WP
  • Blog
  • Risorse
  • Chi siamo
  • Corsi
  • Servizi
    • Creazione Siti Web & Supporto WP
    • Consulenze Professionali
    • Formazione via Skype
    • Richiedi Subito un Preventivo
  • Assistenza WordPress
  • Menu

Apri l'indice dei contenuti

  • I colori esadecimali
  • Il formato RGB
  • Trovare il codice di un preciso colore
    • Conclusione

Categorie:

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Tutte

  • Creare siti multlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

CATEGORIE

  • Ispirazione
  • Usare WordPress
  • Dominio e Hosting
  • Creare blog
  • Creare siti web
  • eCommerce
  • Temi
  • Plugin
  • SEO
  • Creare siti mulitlingua
  • Copywriting
  • Dove trovare immagini
  • Email marketing
  • Guadagnare online
  • Varie

Comincia qui per avere la soluzione al tuo problema

Background Icons
Impara i codici HTML dei colori e personalizza il tuo sito
Sei qui:
  • Home /
  • Blog /
  • Varie

Impara i codici HTML dei colori e personalizza il tuo sito

Andrea Di Rocco 14 Dicembre 2020
0

Apri l'indice dei contenuti

  • I colori esadecimali
  • Il formato RGB
  • Trovare il codice di un preciso colore
    • Conclusione

Quando personalizzi i colori del tuo sito WordPress (font, sfondi, bordi ecc.), solitamente trovi una tabella dalla quale selezionare il colore che desideri. Cliccando su un colore, appare un codice formato da un simbolo (#) seguito da numeri e lettere. Talvolta trovi invece un codice formato da tre numeri fra parentesi.

Seleziona colore HTML

Scoprendo cosa significano questi codici, potrai personalizzare alla perfezione il tuo sito WordPress grazie ai codici dei colori HTML.

I colori esadecimali

Il formato più diffuso per impostare i colori HTML su un sito web è il codice esadecimale.

“Esadecimale” significa che il codice è basato su 16 cifre, poiché si usano i numeri da 0 a 9 e le lettere dalla A alla F (10 numeri e 6 lettere). Esiste una precisa logica che permette di formare i colori con questo sistema.

Per prima cosa, è presente il simbolo #, per indicare che si tratta di un colore HTML con questo formato.

I sei caratteri che seguono possono essere:

  • numeri da 0 a 9
  • lettere dalla A alla F

La costruzione del codice è basata sul sistema RGB: Red, Green, Blue. I primi due caratteri indicano la quantità di rosso che è presente in quella tonalità di colore, i due caratteri centrali indicano la quantità di verde, mentre gli ultimi due la quantità di blu.

Si parte con il colore #000000, perciò:

  • quantità di rosso: 00 – assente
  • quantità di verde: 00 – assente
  • quantità di blu: 00 – assente

Risultato: assenza di colore, cioè nero.

Nero HTML codice esadecimale

Ora partiamo dal nero per ottenere gli altri colori. Le cifre possono aumentare da 00 fino a 99, dopodiché si possono utilizzare le lettere, da AA fino a FF.

Se il nero corrisponde a #000000 (assenza di colore), per ottenere il bianco dovremmo avere la massima quantità di colore, quindi il codice HTML del bianco è #FFFFFF.

Ora scopriamo gli altri colori.

Per ottenere il rosso:

  • quantità di rosso : massima – FF
  • quantità di verde: 00
  • quantità di blu: 00

Il codice esadecimale del rosso è #FF0000.

Rosso colore HTML

Secondo il sistema RGB, quindi, per ottenere il verde avremo #00FF00 e per il blu #0000FF.

Variando la quantità di rosso, verde o blu presente nel codice, potrai ottenere tutte le sfumature che desideri.

Il formato RGB

Esiste anche un altro tipo di codice per usare i colori HTML su un sito web, ed è il formato RGB. Il principio è molto simile a quello visto per i colori esadecimali.

Il formato RGB è indicato con la sigla rgb seguita da tre numeri fra parentesi, separati da virgola, che vanno da 0 a 255. Il colore rgb(0, 0, 0) indica il nero, mentre rgb(255, 255, 255) è il bianco.

Il primo numero indica la quantità di rosso, il secondo si riferisce al verde e il terzo al blu.

Trovare il codice di un preciso colore

Esistono diversi strumenti che ti permettono di scoprire il codice esatto di un colore.

Puoi andare prima di tutto sul ColorPicker di W3Schools.

HTML Color Picker W3Schools

Seleziona un colore dalla tabella, poi scegli la sfumatura. Vedrai anche un’anteprima di come il testo bianco o quello nero appaiono usando questo colore come sfondo.

Per usare il colore scelto, ti basterà copiare il suo codice.

Se vuoi fare invece il processo inverso, ossia hai un codice e vuoi sapere esattamente a quale colore corrisponde, puoi inserirlo nel campo Color value.

E se volessi scoprire qual è l’esatto colore che vedi su una pagina web? In tal caso, puoi installare un’estensione  del browser chiamata Colorzilla. Ti permetterà di cliccare su un punto qualsiasi della pagina e scoprire il codice HTML di quel colore.

Colorzilla estensione Google Chrome

Conclusione

Conoscere i codici HTML dei colori può aiutarti a gestire al meglio la grafica del tuo sito web e a personalizzarlo in ogni aspetto con precisione e professionalità.

E ora dimmi…

Qual è il tuo colore preferito, in codice esadecimale?

Per qualsiasi domanda, ti aspetto nei commenti.

Tags: ColoriCSSGraficaHTML
Lascia un Commento

Andrea Di Rocco

Fondatore di SOS WP, Autore

First Badge Item Second Badge Item Third Badge Item
La mia passione per WordPress mi ha portato negli ultimi 10 anni a voler aiutare sempre più persone a creare blog e siti web in WordPress in completa autonomia. Spero che troverai utili le oltre 650 guide su WordPress e sulla SEO che ho pubblicato su questo blog e se ne hai voglia ti invito a leggere la mia storia cliccando sul pulsante qui sotto.
Leggi la mia storia
Ti potrebbe interessare:
Migliori template mobile per il tuo sito in WordPress
Migliori template mobile per il tuo sito in WordPress11 July 2016
Recensione del tema Hueman per WordPress
Recensione del tema Hueman per WordPress19 May 2017
Personalizzare lo stile dei widget con il plugin Widget CSS Classes14 September 2016
Cosa sono gli accesskey e come usarli in WordPress
Accesskey: cosa sono e come usarli nel tuo sito WordPress19 November 2020
Temi WordPress gratis
Temi WordPress gratis: ma perché li sconsigliamo?22 May 2018
Basi WordPress: come usare il pannello "Personalizza"
Basi WordPress: come usare il pannello "Personalizza"24 May 2018
0 commenti

Lascia un commento

Domande? Lascia un commento!

Il team di SOS WP risponde tutti i giorni. Unisciti anche tu alla conversazione…

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Andrea Di Rocco - Autore di SOS WP

Benvenuto!

Sono Andrea Di Rocco, autore di SOS WP, il blog italiano su WordPress che contiene oltre 650 guide su come creare blog e come creare siti web che generano traffico, contatti e vendite! Oltre al blog, forniamo:

Assistenza WordPressAssistenza WordPress

Creazione siti webCreazione siti web

Corso WordPressCorso WordPress

Servizi

  • Creazione blog professionali
  • Realizzazione siti web
  • Messa a norma GDPR
  • Consulenza SEO
  • Formazione WordPress
  • Chiedi un preventivo

LINK RAPIDI

  • Scopri TUTTO SEO™
  • Entra in Area Corsi
  • Gruppi Facebook
  • Testimonianze
  • Contattaci
  • Lavora con noi

Vuoi creare un blog? Non sai come muoverti nel mondo di WordPress? Desideri essere primo su Google con il tuo sito web?

Richiedi Preventivo

  • Safe Payment IconPagamenti sicuri con:
    Maestro IconVisa IconMastercard IconPaypal Icon e altri…
  • Support IconSupporto continuo dal Lunedì al Venerdì 08:30 – 18:30
SOS WP
  • Chi Siamo
  • Chi è Andrea Di Rocco
  • TUTTO SEO™
  • TrustPilot
  • Privacy e Cookie Policy
  • Facebook
  • Youtube
  • Linkedin
 

© Copyright 2012-2021 | SOS WP™ Metro Effort Limited. Tutti i diritti sono riservati.

 
Scorrere verso l’alto
SOS WP utilizza i cookie per migliorare la tua esperienza: ACCETTOImpostazioni
Privacy & Cookies Policy

Panoramica sulla privacy

Quando si visita qualsiasi sito web, questo può memorizzare o recuperare informazioni sul tuo browser, in gran parte sotto forma di cookie. Queste informazioni potrebbero essere su di te, le tue preferenze o il tuo dispositivo e sono utilizzate in gran parte per far funzionare il sito come te lo aspetteresti. Le informazioni di solito non ti identificano direttamente, ma possono fornire un'esperienza web più personalizzata. Poiché rispettiamo il tuo diritto alla privacy, puoi scegliere di non consentire alcuni tipi di cookie. Clicca sulle intestazioni delle diverse categorie per scoprire di più e modificare le impostazioni predefinite. Tuttavia, il bloccaggio di alcuni tipi di cookie può avere impatto sulla tua esperienza del sito e dei servizi che siamo in grado di offrire.
Maggiori informazioni
Cookie di terze parti
Salva e accetta