{"id":125666,"date":"2025-03-02T10:01:16","date_gmt":"2025-03-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/come-cambiare-il-colore-del-testo-in-css-html\/"},"modified":"2025-11-16T10:26:18","modified_gmt":"2025-11-16T08:26:18","slug":"come-cambiare-il-colore-del-testo-in-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/","title":{"rendered":"Come Cambiare il Colore del Testo in CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"125666\" class=\"elementor elementor-125666 elementor-94582\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-639d699c e-flex e-con-boxed e-con e-parent\" data-id=\"639d699c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2fdfa elementor-widget elementor-widget-text-editor\" data-id=\"ef2fdfa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ecco come appare nel codice CSS di base:<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-262f1a6 elementor-widget elementor-widget-code-highlight\" data-id=\"262f1a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \/* Targets all paragraph elements *\/\r\n  color: red; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71a4d49f elementor-widget elementor-widget-text-editor\" data-id=\"71a4d49f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In questo esempio, tutto il testo dei paragrafi nel tuo HTML verrebbe cambiato in rosso. Ovviamente, il rosso \u00e8 solo l&#8217;inizio! Ci sono un sacco di modi per esprimere i valori dei colori in <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19517\">CSS<\/a>, offrendoti una vasta tavolozza con cui sperimentare.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Valori di Colore: Il Tuo Arcobaleno Testuale <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Nomi dei Colori <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS offre una collezione di nomi di colori di base per i colori pi\u00f9 comuni. Pensa a &#8220;rosso&#8221;, &#8220;blu&#8221;, &#8220;giallo&#8221;, &#8220;verde&#8221;, e cos\u00ec via. Sono facili da ricordare, il che li rende un ottimo punto di partenza per i principianti. Ecco un esempio:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e4b17d elementor-widget elementor-widget-code-highlight\" data-id=\"5e4b17d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 { \r\n  color: orange; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e5c9e5 elementor-widget elementor-widget-text-editor\" data-id=\"6e5c9e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il vantaggio principale dei nomi dei colori \u00e8 la loro semplicit\u00e0. Tuttavia, sei limitato a un set relativamente piccolo di colori, che potrebbe non sempre corrispondere alla tua visione di design precisa.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Codici Colore Esadecimali <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I codici colore esadecimali, che iniziano con &#8220;#&#8221;, forniscono una tavolozza di colori vastamente espansa. Consistono in sei caratteri che rappresentano le componenti Rosso, Verde e Blu (RGB) di un colore. Ad esempio, #FF0000 \u00e8 rosso puro, mentre #008000 \u00e8 un verde profondo.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab9a954 elementor-widget elementor-widget-code-highlight\" data-id=\"ab9a954\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: #F26522; \/* A warm orange tone *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d94393 elementor-widget elementor-widget-text-editor\" data-id=\"7d94393\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">I codici esadecimali ti garantiscono precisione e milioni di possibilit\u00e0 di colore. Molti strumenti di design e <a href=\"https:\/\/elementor.com\/blog\/it\/7-best-no-code-website-builders-in-year\/\" data-wpil-monitor-id=\"10312\">siti web offrono selettori di colore che restituiscono codici esadecimali<\/a>, rendendo facile trovare la sfumatura esatta che desideri. L&#8217;unico leggero svantaggio \u00e8 che possono essere meno intuitivi da leggere a prima vista rispetto ai nomi dei colori.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Colori RGB e RGBA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">RGB offre un altro modo per definire i colori basato sulle loro componenti Rosso, Verde e Blu. All&#8217;interno della funzione rgb(), specifichi l&#8217;intensit\u00e0 di ogni componente su una scala da 0 a 255. Ad esempio, rgb(255, 0, 0) produce lo stesso rosso puro di #FF0000.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9234c6b elementor-widget elementor-widget-code-highlight\" data-id=\"9234c6b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  color: rgb(128, 0, 128); \/* A rich purple *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17e2f36 elementor-widget elementor-widget-text-editor\" data-id=\"17e2f36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il vero potere di RGB arriva con l&#8217;aggiunta di un canale alfa, dandoti RGBA. Questa &#8216;A&#8217; sta per &#8220;alpha&#8221; e controlla la trasparenza. I valori RGBA sono espressi come rgba(R, G, B, A), dove il valore alfa va da 0 (completamente trasparente) a 1 (completamente opaco). Ecco come creare una sovrapposizione di testo semi-trasparente:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6bdc5c elementor-widget elementor-widget-code-highlight\" data-id=\"c6bdc5c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.overlay-text {\r\n   color: rgba(0, 0, 0, 0.6); \/* Black text with 60% opacity *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90baaa4 elementor-widget elementor-widget-text-editor\" data-id=\"90baaa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">RGBA \u00e8 ideale per sovrapporre testo su <a href=\"https:\/\/elementor.com\/blog\/it\/proprieta-css-background-image-come-includere-unimmagine-di-sfondo-css\/\" data-wpil-monitor-id=\"10313\">immagini o sfondi<\/a>, dandoti un controllo preciso su quanto gli elementi sottostanti siano visibili.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Colori HSL e HSLA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">HSL (Tonalit\u00e0, Saturazione, Luminosit\u00e0) \u00e8 un modello di colore che si allinea pi\u00f9 strettamente al modo in cui gli umani percepiscono il colore. \u00c8 espresso come hsl(H, S, L):<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tonalit\u00e0<\/b><span style=\"font-weight: 400;\"> \u00e8 il tipo di colore su una ruota dei colori a 360 gradi (0 \u00e8 rosso, 120 \u00e8 verde, 240 \u00e8 blu, ecc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Saturazione:<\/b><span style=\"font-weight: 400;\"> L&#8217;intensit\u00e0 del colore (0% \u00e8 grigio, 100% \u00e8 colore pieno)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Luminosit\u00e0:<\/b><span style=\"font-weight: 400;\"> Quanto \u00e8 chiaro o scuro il colore (0% \u00e8 nero, 100% \u00e8 bianco)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">HSLA aggiunge semplicemente un canale alfa per la trasparenza, proprio come RGBA.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81e8390 elementor-widget elementor-widget-code-highlight\" data-id=\"81e8390\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: hsl(30, 100%, 50%); \/* A vibrant orange *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2def1d6 elementor-widget elementor-widget-text-editor\" data-id=\"2def1d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">HSL a volte pu\u00f2 essere pi\u00f9 intuitivo da capire per i principianti. Ti permette di pensare in termini di tipi di colore e vivacit\u00e0 piuttosto che mescolare singole componenti rosse, verdi e blu.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Metodi per Cambiare il Colore del Testo<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ci sono tre metodi principali per cambiare <a href=\"https:\/\/elementor.com\/blog\/it\/come-centrare-il-testo-in-css-allineamento-del-testo-in-css-e-html\/\" data-wpil-monitor-id=\"10314\">il colore del testo usando CSS<\/a>. Ogni tecnica offre diversi livelli di controllo e specificit\u00e0, permettendoti di mirare precisamente agli elementi che vuoi stilizzare.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Stili Inline <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Gli <a href=\"https:\/\/elementor.com\/blog\/it\/come-aggiungere-css-allhtml-css-inline-interno-ed-esterno\/\" data-wpil-monitor-id=\"10315\">stili inline vengono applicati direttamente all&#8217;interno del tag di apertura di un elemento HTML<\/a> usando l&#8217;attributo style. Cambiamo il colore di un paragrafo specifico:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d224de elementor-widget elementor-widget-code-highlight\" data-id=\"6d224de\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: blue;\">This paragraph will have blue text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77333ba elementor-widget elementor-widget-text-editor\" data-id=\"77333ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Gli stili inline sono utili per modifiche rapide e uniche a singoli elementi. Tuttavia, hanno alcuni svantaggi:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Disordine:<\/b><span style=\"font-weight: 400;\"> Rendono il tuo HTML pi\u00f9 difficile da leggere e mantenere.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificit\u00e0:<\/b><span style=\"font-weight: 400;\"> Gli stili inline sovrascriveranno altre regole CSS pi\u00f9 generali, a volte portando a problemi di stile inaspettati.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Quindi, di solito \u00e8 meglio usare gli stili in linea con parsimonia e solo quando \u00e8 assolutamente necessario.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Fogli di stile interni <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I fogli di stile interni usano i tag &lt;style&gt; posizionati all&#8217;interno della sezione &lt;head&gt; del tuo documento HTML. Questo ti permette di definire gli stili per specifici elementi HTML:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-484c07c elementor-widget elementor-widget-code-highlight\" data-id=\"484c07c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <style>\r\n    h1 { \r\n      color: #009933; \/* A dark green *\/\r\n    }\r\n\r\n    p {\r\n      color: #333333; \/* A dark gray *\/\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9262856 elementor-widget elementor-widget-text-editor\" data-id=\"9262856\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">I fogli di stile interni sono eccellenti per stilizzare un&#8217;intera pagina web. Offrono questi vantaggi:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralizzazione:<\/b><span style=\"font-weight: 400;\"> Mantiene le tue regole di stile in un unico posto all&#8217;interno dell&#8217;HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Specificit\u00e0:<\/b><span style=\"font-weight: 400;\"> Gli stili interni hanno la precedenza sulla maggior parte degli stili predefiniti del browser, ma sono meno specifici degli stili in linea.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Fogli di stile esterni <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I fogli di stile esterni sono l&#8217;approccio consigliato per gestire il CSS del tuo sito web. Crei un file .css separato e <a href=\"https:\/\/elementor.com\/blog\/it\/link-html-collegamenti-ipertestuali-sintassi-codice-attributi-esempi\/\" data-wpil-monitor-id=\"10316\">lo colleghi al tuo documento HTML<\/a> usando il tag &lt;link&gt; all&#8217;interno della sezione &lt;head&gt;:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16b3bed elementor-widget elementor-widget-code-highlight\" data-id=\"16b3bed\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\"> \r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-deb161a elementor-widget elementor-widget-text-editor\" data-id=\"deb161a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>styles.css:<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5a131 elementor-widget elementor-widget-code-highlight\" data-id=\"fe5a131\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  color: #222222; \/* Sets default text color for the page *\/\r\n}\r\n\r\nh1 {\r\n  color: #CD5C5C; \/* Indian red for headings *\/\r\n}  \r\n\r\na { \r\n  color: #0000EE; \/* Standard blue for links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52364e2 elementor-widget elementor-widget-text-editor\" data-id=\"52364e2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">I fogli di stile esterni offrono diversi vantaggi chiave:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Manutenibilit\u00e0:<\/b><span style=\"font-weight: 400;\"> Separare il CSS dall&#8217;<a href=\"https:\/\/elementor.com\/blog\/it\/come-aggiungere-spazi-in-html-codici-consigli-guida-definitiva\/\" data-wpil-monitor-id=\"10317\">HTML mantiene il tuo codice<\/a> organizzato e pi\u00f9 facile da aggiornare.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Riutilizzabilit\u00e0:<\/b><span style=\"font-weight: 400;\"> Un singolo foglio di stile pu\u00f2 essere applicato a pi\u00f9 pagine HTML, garantendo un aspetto coerente in tutto il tuo sito web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Preprocessori:<\/b><span style=\"font-weight: 400;\"> Puoi usare preprocessori CSS avanzati come Sass o Less per semplificare lo <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/09\/SSL.png\" data-wpil-monitor-id=\"10318\">sviluppo<\/a> del tuo foglio di stile (ne parleremo in un articolo futuro!).<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Specificit\u00e0 e ereditariet\u00e0 CSS <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Capire la specificit\u00e0 e l&#8217;ereditariet\u00e0 CSS \u00e8 importante per evitare cambiamenti inaspettati nel colore del testo. La specificit\u00e0 si riferisce a come il CSS determina quale regola ha la precedenza quando esistono pi\u00f9 stili in conflitto per un elemento. In generale, i selettori pi\u00f9 specifici (come gli ID) sovrascriveranno quelli meno specifici (come i tag HTML).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L&#8217;ereditariet\u00e0 significa che alcune <a href=\"https:\/\/elementor.com\/blog\/it\/come-sottolineare-il-testo-in-css-proprieta-text-decoration-del-css\/\" data-wpil-monitor-id=\"10319\">propriet\u00e0 CSS<\/a>, come il colore, vengono trasmesse dagli elementi genitori ai loro elementi figli. Ci\u00f2 significa che se imposti un colore del testo sul tag &lt;body&gt;, tutto il testo all&#8217;interno della pagina erediter\u00e0 quel colore a meno che non venga sovrascritto da stili pi\u00f9 specifici.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Mirare a Elementi Specifici <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Il CSS ti d\u00e0 un controllo preciso su quali elementi di testo stilizzare. Diamo un&#8217;occhiata ai metodi di targeting pi\u00f9 comuni:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tag HTML<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il modo pi\u00f9 semplice \u00e8 puntare ai tag HTML generici. Questo applicher\u00e0 il tuo cambio di colore a tutti gli elementi di quel tipo all&#8217;interno della tua pagina:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a11bf53 elementor-widget elementor-widget-code-highlight\" data-id=\"a11bf53\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \r\n  color: #9932CC; \/* Dark orchid for paragraphs *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b201c80 e-flex e-con-boxed e-con e-parent\" data-id=\"b201c80\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8bae9 elementor-widget elementor-widget-text-editor\" data-id=\"3e8bae9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Classi<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le classi offrono un modo pi\u00f9 flessibile per applicare stili di colore al testo. Definisci una classe nel tuo CSS e poi aggiungi l&#8217;attributo class agli elementi HTML che vuoi targettizzare:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ff1af3 elementor-widget elementor-widget-code-highlight\" data-id=\"7ff1af3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.highlight { \r\n  color: #FFD700; \/* A vibrant gold *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e99b2b elementor-widget elementor-widget-code-highlight\" data-id=\"2e99b2b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p class=\"highlight\">This text will be highlighted in gold.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27dbeb3 elementor-widget elementor-widget-text-editor\" data-id=\"27dbeb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le classi sono eccellenti perch\u00e9:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Riutilizzabilit\u00e0:<\/b><span style=\"font-weight: 400;\"> Puoi applicare la stessa classe a pi\u00f9 elementi, garantendo uno stile coerente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Organizzazione:<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/it\/classi-css-selettori-stile-consigli-trucchi-altro\/\" data-wpil-monitor-id=\"10320\">Le classi aiutano a strutturare il tuo CSS<\/a> e lo rendono pi\u00f9 facile da capire.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">ID <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Gli ID sono identificatori unici per specifici elementi HTML e usano l&#8217;attributo id. Usa gli ID con parsimonia, poich\u00e9 hanno una specificit\u00e0 molto alta che pu\u00f2 sovrascrivere altri stili.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61483bd elementor-widget elementor-widget-code-highlight\" data-id=\"61483bd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#important-message { \r\n  color: red; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c50f2bf elementor-widget elementor-widget-code-highlight\" data-id=\"c50f2bf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p id=\"important-message\">This message will have red text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e95a21 elementor-widget elementor-widget-text-editor\" data-id=\"6e95a21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Gli ID sono principalmente utili per stilizzare elementi singoli e distinti e spesso trovano uso nelle interazioni JavaScript.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Cambiare il colore del testo nelle interazioni dell&#8217;utente<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Effetti Hover <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La pseudo-classe :hover aggiunge un tocco speciale al tuo sito web, permettendoti di cambiare il colore del testo quando un utente passa il mouse su un elemento. Questa \u00e8 una tecnica comune per evidenziare <a href=\"https:\/\/elementor.com\/blog\/it\/introducing-elementor-3-23-live-results-floating-buttons-link-in-bio-more\/\" data-wpil-monitor-id=\"10334\">link o pulsanti<\/a>:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2072c38 elementor-widget elementor-widget-code-highlight\" data-id=\"2072c38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:hover { \r\n  color: #EE82EE; \/* A playful violet for link hover *\/\r\n}\r\n\r\n.button:hover {\r\n    color: white; \/* White text on button hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b65521 elementor-widget elementor-widget-text-editor\" data-id=\"1b65521\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Gli effetti hover forniscono un feedback visivo, indicando all&#8217;utente che un elemento \u00e8 interattivo. <a href=\"https:\/\/elementor.com\/blog\/it\/migliorare-le-prestazioni-del-sito-web-presso-spread-agency-con-limage-optimizer-di-elementor\/\" data-wpil-monitor-id=\"10335\">Migliorano la navigazione e possono rendere il tuo sito web<\/a> pi\u00f9 coinvolgente.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Altri Stati <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il CSS offre ulteriori pseudo-classi per stilizzare il testo in base a diversi stati di interazione:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:active: Quando un elemento viene cliccato o toccato.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:visited: Per <a href=\"https:\/\/elementor.com\/blog\/it\/html-immagini-codice-dimensioni-link-stile-consigli-seo\/\" data-wpil-monitor-id=\"10321\">stilizzare i link<\/a> che l&#8217;utente ha gi\u00e0 visitato.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:focus: Quando un elemento (come un campo di un modulo) ha il focus della tastiera.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Rendiamo i link visitati di un colore meno saturo:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe69509 elementor-widget elementor-widget-code-highlight\" data-id=\"fe69509\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:visited {\r\n color:  #800080; \/* A muted purple for visited links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b340d6a elementor-widget elementor-widget-text-editor\" data-id=\"b340d6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Queste pseudo-classi ti danno ancora pi\u00f9 controllo su come il tuo testo risponde alle azioni dell&#8217;utente, <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10322\">migliorando ulteriormente l&#8217;esperienza utente<\/a>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Accessibilit\u00e0 e contrasto del colore <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">L&#8217;importanza di un contrasto sufficiente<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Scegliere colori del testo e <a href=\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-dello-sfondo-in-html\/\" data-wpil-monitor-id=\"10323\">dello sfondo<\/a> con un contrasto sufficiente \u00e8 fondamentale per rendere il tuo sito web leggibile per tutti, compresi gli utenti con problemi di vista. Le Linee guida per l&#8217;accessibilit\u00e0 dei contenuti web (WCAG) definiscono i rapporti di contrasto minimi per assicurare che i tuoi contenuti siano leggibili.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Un contrasto di colore scarso pu\u00f2 rendere il testo difficile o addirittura impossibile da leggere, causando frustrazione ed esclusione per alcuni utenti. Dando priorit\u00e0 al contrasto, crei un&#8217;esperienza online pi\u00f9 accogliente e inclusiva.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Simulatori di Daltonismo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il daltonismo colpisce una parte significativa della popolazione. I simulatori di daltonismo sono strumenti preziosi che ti aiutano a visualizzare come appare il tuo sito web alle persone con diversi tipi di deficienze nella visione dei colori. Esistono diverse estensioni per browser e strumenti online per questo scopo, e <a href=\"https:\/\/elementor.com\/blog\/it\/esplora-elementor-pro-condizioni-di-visualizzazione-permessi-di-ruolo-nel-gestore-degli-elementi-e-altro\/\" data-wpil-monitor-id=\"10336\">Elementor include anche<\/a> un simulatore di daltonismo integrato.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L&#8217;empatia gioca un ruolo chiave nel <a href=\"https:\/\/elementor.com\/blog\/it\/31-migliori-font-web-sicuri-per-un-design-accessibile\/\" data-wpil-monitor-id=\"10337\">design accessibile<\/a>. Mettersi nei panni degli utenti con abilit\u00e0 diverse favorisce una comprensione pi\u00f9 profonda delle loro esigenze.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Risorse e Strumenti<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Diamo un&#8217;occhiata ad alcune risorse utili per assicurarci che le tue scelte di colore siano accessibili:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verificatori di Contrasto:<\/b><span style=\"font-weight: 400;\"> Diversi strumenti online (come il Verificatore di Contrasto Colore di WebAIM: <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">https:\/\/webaim.org\/resources\/contrastchecker\/<\/span><\/a><span style=\"font-weight: 400;\">) ti permettono di inserire i colori del tuo testo e dello sfondo e ti indicheranno se soddisfano i requisiti di contrasto WCAG.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Generatori di Palette di Colori Accessibili:<\/b><span style=\"font-weight: 400;\"> Siti web come Who Can Use: <a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\">https:\/\/venngage.com\/tools\/accessible-color-palette-generator<\/a> ti aiutano a creare palette di colori che danno priorit\u00e0 all&#8217;accessibilit\u00e0 fin dall&#8217;inizio.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Migliori Pratiche per la Scelta dei Colori del Testo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">La Leggibilit\u00e0 \u00e8 Fondamentale<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le tue scelte di colore per il testo non dovrebbero mai sacrificare la leggibilit\u00e0. Anche se uno <a href=\"https:\/\/elementor.com\/blog\/it\/schemi-di-colori-complementari-nel-web-design-una-guida-completa\/\" data-wpil-monitor-id=\"10324\">schema di colori<\/a> vivace potrebbe essere attraente, \u00e8 utile solo se i tuoi utenti riescono a leggere il contenuto. Ecco cosa tenere a mente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lo Sfondo \u00e8 Importante:<\/b><span style=\"font-weight: 400;\">  Il colore del testo deve spiccare chiaramente rispetto al colore dello sfondo. Usa sempre un verificatore di contrasto per controllare questo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrasto Forte:<\/b><span style=\"font-weight: 400;\"> Punta a combinazioni ad alto contrasto, specialmente per testi essenziali come il corpo del testo e le etichette di navigazione.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Branding e Psicologia del Colore<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I colori hanno il potere di evocare emozioni e <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10325\">influenzare fortemente come viene percepito il tuo marchio<\/a>. Consideriamo come allineare i colori del tuo testo con lo scopo del tuo sito web:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Palette del Marchio:<\/b><span style=\"font-weight: 400;\"> Incorpora i colori esistenti del tuo marchio nello stile del testo per promuovere il riconoscimento del brand e un aspetto coeso.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Emozione:<\/b><span style=\"font-weight: 400;\">  Comprendi la psicologia del colore. I colori caldi (rossi, arancioni, gialli) trasmettono energia ed eccitazione, mentre i colori freddi (blu, verdi, viola) tendono ad essere pi\u00f9 calmanti.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Gerarchia ed Enfasi<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Usa il colore per creare una chiara gerarchia visiva nelle tue pagine. Questo aiuta a guidare l&#8217;occhio dell&#8217;utente e segnala l&#8217;importanza dei diversi elementi di testo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Titoli:<\/b><span style=\"font-weight: 400;\"> I titoli spesso funzionano bene con colori pi\u00f9 audaci o scuri per distinguersi dal testo del corpo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Chiamate all&#8217;Azione:<\/b><span style=\"font-weight: 400;\"> Fai risaltare i pulsanti e altri link importanti con colori contrastanti che attirano l&#8217;attenzione.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sottigliezza:<\/b><span style=\"font-weight: 400;\"> Usa <a href=\"https:\/\/elementor.com\/blog\/introducing-enhanced-import-export-rearrange-global-fonts-colors\/\" data-wpil-monitor-id=\"10326\">colori meno saturi o dimensioni del carattere pi\u00f9 piccole per elementi di testo<\/a> meno importanti<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Non Esagerare<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Un po&#8217; di colore fa gi\u00e0 molta strada! Ecco perch\u00e9 la semplicit\u00e0 \u00e8 spesso la scelta migliore:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sovraffollamento:<\/b><span style=\"font-weight: 400;\"> Troppi colori possono rendere il tuo sito web caotico e difficile da leggere.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Coerenza:<\/b><span style=\"font-weight: 400;\"> Una palette di colori limitata e ben scelta crea un aspetto pi\u00f9 armonioso e raffinato.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Elementor: Stile del Testo in Modo Intuitivo<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Introduzione all&#8217;Editor Visuale di Elementor<\/span><\/h3>\n<p><iframe title=\"Elementor - The Leading Platform for Web Creators\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/le72grP_Q6k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Il punto di forza principale di Elementor risiede nel suo editor visuale drag-and-drop. Questo editor ti d\u00e0 il controllo in tempo reale sul <a href=\"https:\/\/elementor.com\/blog\/it\/20-principi-di-web-design-che-ogni-professionista-del-web-dovrebbe-conoscere\/\" data-wpil-monitor-id=\"10327\">design del tuo sito web<\/a>, incluso il colore del testo, senza scrivere una singola riga di CSS (a meno che tu non lo voglia). Questo approccio permette a chi non ha esperienza di codifica di creare siti web belli e ricchi di colore.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Controlli del Colore del Testo nei Widget di Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Quasi tutti i <a href=\"https:\/\/elementor.com\/blog\/it\/presentazione-di-elementor-3-10-nuovi-elementi-annidati-il-futuro-del-design-con-i-widget-di-elementor\/\" data-wpil-monitor-id=\"10328\">widget di Elementor<\/a> che contengono testo (titoli, paragrafi, pulsanti, ecc.) presentano controlli intuitivi per la scelta del colore all&#8217;interno delle loro opzioni di stile. Illustriamo questo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scegli un Widget:<\/b><span style=\"font-weight: 400;\"> Prendi un widget di testo qualsiasi dalla tua pagina.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scheda Stile:<\/b><span style=\"font-weight: 400;\"> Vai sulla scheda &#8220;Stile&#8221; del widget nel pannello di modifica di Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selettore Colore:<\/b><span style=\"font-weight: 400;\"> Trova l&#8217;opzione &#8220;Colore Testo&#8221; e cliccaci sopra per aprire un pratico selettore di colore.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scegli Liberamente:<\/b><span style=\"font-weight: 400;\"> Puoi scegliere da una tavolozza di colori, inserire codici esadecimali o usare lo strumento contagocce per <a href=\"https:\/\/elementor.com\/blog\/it\/tipi-di-domini-vantaggi-esempi-e-come-trovare-quello-perfetto-per-te\/\" data-wpil-monitor-id=\"10338\">abbinare perfettamente i colori esistenti sul tuo sito<\/a>.<\/span><\/li>\n<\/ol>\n<p><iframe title=\"Introducing Elementor AI Copilot\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/rWB2moi4XMw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Questo flusso di lavoro semplificato velocizza enormemente la sperimentazione e l&#8217;implementazione del colore del testo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Impostazioni Stile Globale<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/it\/trasforma-i-tuoi-design-stile-globale-di-copilot-riempimento-generativo-espandi-immagine-e-miglioramenti-di-wordpress\/\" data-wpil-monitor-id=\"10339\">Elementor offre impostazioni di stile<\/a> globali che ti permettono di definire colori predefiniti per titoli, testo del corpo, link e altro. Questo ha diversi vantaggi:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Coerenza:<\/b><span style=\"font-weight: 400;\"> Mantieni facilmente un aspetto uniforme su tutto il tuo sito web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Risparmio di Tempo:<\/b><span style=\"font-weight: 400;\"> Cambia i colori di tutto il sito con pochi clic invece di modificare singoli widget.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Capacit\u00e0 CSS Personalizzate<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Anche se gli strumenti visivi di Elementor sono incredibilmente potenti, potresti volerli perfezionare con CSS personalizzato. <a href=\"https:\/\/elementor.com\/blog\/it\/presentazione-di-elementor-3-11-nuovo-widget-loop-carousel-per-personalizzare-la-visualizzazione-dei-tuoi-post-o-prodotti\/\" data-wpil-monitor-id=\"10340\">Elementor ti permette di aggiungere<\/a> codice CSS personalizzato direttamente ai widget, alle pagine o all&#8217;intero sito, dandoti quel livello extra di controllo quando serve.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Bonus: Tecniche e Strumenti Avanzati <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gradienti di Colore<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I gradienti CSS ti permettono di creare transizioni fluide tra pi\u00f9 colori all&#8217;interno del tuo testo. Questo pu\u00f2 produrre effetti accattivanti e memorabili:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8f05d4 elementor-widget elementor-widget-code-highlight\" data-id=\"f8f05d4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  background: linear-gradient(to right, #FF0000, #FFA500, #FFFF00); \r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43f3c71 elementor-widget elementor-widget-text-editor\" data-id=\"43f3c71\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Per assicurarti che i gradienti di colore vengano visualizzati all&#8217;interno del tuo testo, come nell&#8217;esempio sopra, spesso avrai bisogno di specifici prefissi -webkit- per la compatibilit\u00e0 tra diversi browser.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I gradienti offrono un&#8217;opportunit\u00e0 unica per aggiungere profondit\u00e0 e interesse visivo ai titoli o agli elementi di chiamata all&#8217;azione.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Ombre del Testo e Contorni del Testo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Aggiungiamo un po&#8217; di dimensione al tuo testo:<\/span><\/p>\n<p><b>Ombre del Testo (<\/b><span style=\"font-weight: 400;\">text-shadow<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Crea sottili effetti di ombra dietro il tuo testo, migliorando la leggibilit\u00e0 su certi sfondi o aggiungendo un tocco di stile.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b65ee4 elementor-widget elementor-widget-code-highlight\" data-id=\"4b65ee4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {\r\n  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-023fb5b elementor-widget elementor-widget-text-editor\" data-id=\"023fb5b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Contorni del Testo (<\/b><span style=\"font-weight: 400;\">-webkit-text-stroke<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Aggiungi contorni al tuo testo per una maggiore enfasi o un&#8217;estetica pi\u00f9 audace.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1294d6a elementor-widget elementor-widget-code-highlight\" data-id=\"1294d6a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  -webkit-text-stroke: 1px black; \r\n  color: white; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee23aa4 elementor-widget elementor-widget-text-editor\" data-id=\"ee23aa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Usa le ombre e i contorni del testo con giudizio. La sottigliezza \u00e8 spesso la scelta migliore, ma effetti audaci possono brillare in casi d&#8217;uso specifici come grandi titoli decorativi.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Funzioni di Colore (se lo spazio lo consente)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS fornisce funzioni come lighten(), darken(), saturate() e altre per manipolare i colori al volo. Queste sono particolarmente utili all&#8217;interno di preprocessori come Sass per calcolare dinamicamente variazioni di colore basate sul tuo tema di colori.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6ecdf6 elementor-widget elementor-widget-code-highlight\" data-id=\"b6ecdf6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Example using the lighten() function *\/\r\nbutton:hover {\r\n    background-color: lighten(#006400, 10%); \/* Lightens the green by 10% on hover *\/\r\n }\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca62649 elementor-widget elementor-widget-text-editor\" data-id=\"ca62649\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>140 Nomi di Colori e valori esadecimali supportati da tutti i browser:<\/h2>\n\n<table border=\"1\" style=\"width:100%\">\n    <tr>\n        <th>Nome<\/th>\n        <th>Valore CSS<\/th>\n        <th>Demo dal vivo<\/th>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Tan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Teal<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Thistle<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomato<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Wheat<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">White<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Yellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">YellowGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\n    <\/tr>\n<\/table>\n\n<script>\nfunction changeColor(color) {\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\n    demoCells.forEach(function(cell) {\n        cell.style.backgroundColor = color;\n    });\n}\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdfac3d elementor-widget elementor-widget-text-editor\" data-id=\"bdfac3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Conclusione <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In questa guida, abbiamo esplorato il mondo del <a href=\"https:\/\/elementor.com\/blog\/it\/colori-css-e-html-proprieta-codici-parole-chiave-e-nomi\/\" data-wpil-monitor-id=\"10329\">colore del testo in CSS<\/a>. Hai imparato le basi della propriet\u00e0 color, i diversi modi per esprimere i <a href=\"https:\/\/elementor.com\/blog\/it\/quanto-vale-il-mio-sito-webmetodi-di-valutazione-e-come-aumentare-il-valore-del-tuo-sito-web\/\" data-wpil-monitor-id=\"10341\">valori dei colori e i metodi per mirare a elementi specifici all&#8217;interno del tuo sito web<\/a>. Abbiamo toccato l&#8217;accessibilit\u00e0, le migliori pratiche e persino un pizzico di <a href=\"https:\/\/elementor.com\/blog\/it\/come-usare-chatgpt-dai-prompt-di-base-alle-tecniche-avanzate\/\" data-wpil-monitor-id=\"10342\">tecniche avanzate<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ricorda, il colore \u00e8 uno strumento potente nel tuo arsenale di <a href=\"https:\/\/elementor.com\/blog\/it\/7-migliori-costruttori-di-siti-web-per-portfolio-del-year\/\" data-wpil-monitor-id=\"10330\">web design<\/a>. Usalo strategicamente per:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Migliorare la leggibilit\u00e0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Guidare l&#8217;occhio dell&#8217;utente<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Evocare emozioni e allinearti con il tuo brand<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/it\/12-esempi-eccezionali-di-portfolio-di-design-di-siti-web\/\" data-wpil-monitor-id=\"10331\">Creare un sito web visivamente accattivante e memorabile<\/a><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Se stai cercando di semplificare il processo di aggiunta e stile del colore del testo, considera un potente <a href=\"https:\/\/elementor.com\/blog\/it\/7-best-free-website-builders-of-year\/\" data-wpil-monitor-id=\"10332\">costruttore di siti web<\/a> come Elementor. La sua interfaccia visiva intuitiva e l&#8217;integrazione con <a href=\"https:\/\/elementor.com\/blog\/it\/i-5-migliori-hosting-web-per-piccole-imprese-nel-year\/\" data-wpil-monitor-id=\"10333\">hosting<\/a> ottimizzato possono darti il potere di creare siti web belli e ricchi di colore senza bisogno di conoscenze approfondite di codifica.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Al cuore della manipolazione del colore del testo CSS c&#8217;\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l&#8217;intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico. <\/p>\n","protected":false},"author":2024234,"featured_media":120139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[518],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-125666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Cambiare il Colore del Testo in CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"Al cuore della manipolazione del colore del testo CSS c&#039;\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l&#039;intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Cambiare il Colore del Testo in CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"Al cuore della manipolazione del colore del testo CSS c&#039;\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l&#039;intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-02T08:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-16T08:26:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Come Cambiare il Colore del Testo in CSS &amp; HTML\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-16T08:26:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\"},\"wordCount\":2929,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Risorse\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\",\"name\":\"Come Cambiare il Colore del Testo in CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-16T08:26:18+00:00\",\"description\":\"Al cuore della manipolazione del colore del testo CSS c'\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l'intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Risorse\",\"item\":\"https:\/\/elementor.com\/blog\/it\/category\/risorse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Cambiare il Colore del Testo in CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come Cambiare il Colore del Testo in CSS &amp; HTML","description":"Al cuore della manipolazione del colore del testo CSS c'\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l'intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/","og_locale":"it_IT","og_type":"article","og_title":"Come Cambiare il Colore del Testo in CSS &amp; HTML","og_description":"Al cuore della manipolazione del colore del testo CSS c'\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l'intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.","og_url":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-02T08:01:16+00:00","article_modified_time":"2025-11-16T08:26:18+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Scritto da":"Itamar Haim","Tempo di lettura stimato":"15 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Come Cambiare il Colore del Testo in CSS &amp; HTML","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-16T08:26:18+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/"},"wordCount":2929,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Risorse"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/","url":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/","name":"Come Cambiare il Colore del Testo in CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-16T08:26:18+00:00","description":"Al cuore della manipolazione del colore del testo CSS c'\u00e8 la propriet\u00e0 color. Questa propriet\u00e0 apparentemente semplice \u00e8 la tua chiave per sbloccare l'intero spettro di colori per il testo del tuo sito web. Funziona assegnando direttamente un valore di colore desiderato a un elemento di testo specifico.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/it\/come-cambiare-il-colore-del-testo-in-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/it\/"},{"@type":"ListItem","position":2,"name":"Risorse","item":"https:\/\/elementor.com\/blog\/it\/category\/risorse\/"},{"@type":"ListItem","position":3,"name":"Come Cambiare il Colore del Testo in CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/it\/#website","url":"https:\/\/elementor.com\/blog\/it\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/125666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=125666"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/125666\/revisions"}],"predecessor-version":[{"id":143340,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/125666\/revisions\/143340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media\/120139"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=125666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=125666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=125666"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_persona?post=125666"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_intent?post=125666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}