{"id":20776,"date":"2023-04-26T09:39:14","date_gmt":"2023-04-26T09:39:14","guid":{"rendered":"https:\/\/carlogislon.it\/staging\/?p=20776"},"modified":"2025-11-04T09:12:36","modified_gmt":"2025-11-04T09:12:36","slug":"il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale","status":"publish","type":"post","link":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/","title":{"rendered":"<em>Il metodo HSB e il Selettore Colore<\/em>. La gestione \u201cnaturale\u201d del colore"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1340px + 0px );margin-left: calc(-0px \/ 2 );margin-right: calc(-0px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:0px;--awb-spacing-left-small:0px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><p>Ricordo ancora i pastrocchi che combinavo quando da piccolo, mentre cercavo di dipingere, mescolavo i colori per ottenere le tonalit\u00e0 desiderate. La soluzione allora era semplice: &#8220;mamma comprami altri colori!&#8221;.<\/p>\n<p>Sappiamo pi\u00f9 o meno tutti che la maggior parte dei colori visibili possono essere ottenuti a partire da combinazioni di alcuni colori-base: Giallo, Magenta, Ciano o Rosso, Giallo, Blu per dirla in modo meno tecnico.<\/p>\n<p>Pi\u00f9 facile a dirsi che a farsi, come si suol dire. Purtroppo, se non si padroneggia la tecnica del colore i risultati sono spesso tinte spente e magicamente quasi tutte tendenti a un marrone-grigiastro!<\/p>\n<p>I programmi di grafica hanno per\u00f2 efficienti strumenti per creare nuovi colori e campioni. Ve ne \u00e8 uno, sicuramente il pi\u00f9 intuitivo, che ti sar\u00e0 utile approfondire: il <i>Selettore Colore<\/i>.<\/p>\n<p>Quando usi il Selettore Colore stai in pratica lavorando sui tre valori del <em>metodo Hsb<\/em>. Se non comprendi tale metodo continuerai perci\u00f2 a usare a casaccio questo strumento ottenendo scarsi risultati (e dovrai sempre chiamare mamma!).<\/p>\n<h2 id=\"toc_Cose_il_Metodo_Colore_Hsb\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Cos&#8217;\u00e8 il <i>Metodo Colore<\/i> <em>Hsb<\/em>?<\/h2>\n<p>\u00c8 uno dei diversi metodi matematici per definire il colore. Non \u00e8 basato su colori primari come i sopraccitati ma su tre caratteristiche visive del colore. Nella figura sotto \u00e8 rappresentato il selettore colore di Photoshop.<\/p>\n<p>Quello che ci interessa sono i valori H, S e B evidenziati. Certo possono essere inseriti direttamente come valori numerici ma \u00e8 molto pi\u00f9 intuitivo usare la colonna verticale colorata e il riquadro a sinistra col selettore a cerchio.<\/p>\n<p>&#8220;Colonna&#8221; e &#8220;Riquadro&#8221; sono lo strumento visivo per definire il colore nel metodo Hsb.<\/p>\n<p><img decoding=\"async\" class=\"lazyload aligncenter wp-image-21001 size-large\" title=\"Selettore colore Photoshop\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-1024x850.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-1024x850.webp\" alt=\"Selettore colore Photoshop\" width=\"1024\" height=\"850\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271024%27%20height%3D%27850%27%20viewBox%3D%270%200%201024%20850%27%3E%3Crect%20width%3D%271024%27%20height%3D%27850%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-200x166.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-300x249.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-400x332.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-600x498.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-768x638.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-800x664.webp 800w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2-1024x850.webp 1024w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-2.webp 1048w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 id=\"toc_Metodo_Hsb_il_modo_naturale_di_definire_un\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Hsb: il metodo &#8220;naturale&#8221;<\/h2>\n<p>Il metodo colore Hsb si potrebbe quindi definire il modo pi\u00f9 &#8220;naturale&#8221; per creare un colore da impiegare in un&#8217;illustrazione, nel nostro depliant, nella grafica delle nostro catalogo ecc.<\/p>\n<p>Non solo perch\u00e9, come gi\u00e0 accennato, pu\u00f2 essere creato visivamente lasciando al programma l&#8217;incombenza di estrapolare i valori numerici giusti ma anche perch\u00e9 si basa su caratteristiche &#8220;naturali&#8221; del colore.<\/p>\n<p>Infatti, quando osserviamo un oggetto colorato non vediamo numeri (a meno che, come me, non siate aberrati da trent&#8217;anni di codifica del colore in quadricromia \u2013 Cmyk) ma notiamo la <i>tinta<\/i> (il colore vero e proprio diciamo) e poi se \u00e8 <i>chiaro<\/i> o <i>scuro<\/i> e se \u00e8 <i>vivace<\/i> o <i>sbiadito<\/i>.<\/p>\n<p>Con un po&#8217; di osservazione e pratica noterete che ogni colore pu\u00f2 essere valutato e rappresentato con questi parametri.<\/p>\n<p>Ecco, il metodo colore Hsb \u00e8 questo: &#8220;colore, chiaro\/scuro, vivace\/sbiadito&#8221;. Tre caratteristiche che ci danno lo spettro dei i colori visibili all&#8217;occhio umano (non proprio tutti, nessun metodo colore per la stampa o per il monitor li restituisce tutti, tranne un insieme matematico teorico che magari approfondiremo in futuro).<\/p>\n<p>Il metodo Hsb si basa in un certo senso semplicemente su ci\u00f2 che si vede o, in altre parole, su come siamo abituati a valutare un colore.<\/p>\n<h2 id=\"toc_Gli_elementi_coordinate_del_Metodo_Hsb\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Gli elementi del Metodo Hsb<\/h2>\n<p>Andiamo un po&#8217; pi\u00f9 in profondit\u00e0. \u00c8 assai opportuno dare un definizione dei tre termini che formano l&#8217;acronimo HSB poich\u00e9, per mia esperienza diretta, sono spesso malcompresi.<\/p>\n<ol>\n<li><b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\">H \u2013 la Tonalit\u00e0 (H \u2013 <\/span><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><i>Hue<\/i><\/span><\/b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><b>)<\/b>, detta anche Tinta. Immaginiamo i colori dell&#8217;arcobaleno, i colori nel senso pi\u00f9 caratterizzante del termine: i gialli, i verdi, i rossi, i viola&#8230;<\/span><\/li>\n<li><b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\">S \u2013 la Saturazione (S \u2013 <\/span><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><i>Saturation<\/i><\/span><\/b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><b>)<\/b>. Il grado di vivacit\u00e0 di un colore (quanto si allontana dal grigio). Immaginiamo una TV a colori che gradualmente passa al bianco e nero e quindi perde saturazione o il contrario.<\/span><\/li>\n<li><b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\">B \u2013 la Brillantezza (B \u2013 <\/span><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><i>Brightness<\/i><\/span><\/b><span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color);\"><b>)<\/b> detta anche Luminosit\u00e0. Immaginiamo lampadine emananti luce dello stesso colore ma di potenza (brillantezza diversa).<\/span><\/li>\n<\/ol>\n<p>Nel metodo Hsb il colore \u00e8 rappresentato dalla &#8220;formula&#8221;: Colore = Tinta (<i>H<\/i>) + Saturazione (<i>S<\/i>) + Brillantezza (<i>B<\/i>).<\/p>\n<p>Per essere molto pratici, se volessimo creare un nuovo colore nel metodo Hsb si procederebbe come mostrato nella figura sotto basandoci sul selettore colore di Photoshop, del resto molto simile a quello di tanti altri programmi:<\/p>\n<p><img decoding=\"async\" class=\"lazyload alignnone size-large wp-image-20963\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-1024x850.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-1024x850.webp\" alt=\"\" width=\"1024\" height=\"850\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271024%27%20height%3D%27850%27%20viewBox%3D%270%200%201024%20850%27%3E%3Crect%20width%3D%271024%27%20height%3D%27850%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-200x166.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-300x249.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-400x332.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-600x498.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-768x638.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-800x664.webp 800w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB-1024x850.webp 1024w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/SelettoreHSB.webp 1048w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<h2 id=\"toc_Come_definire_un_nuovo_colore_col_Metodo_Hsb\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Definire un nuovo colore nell Metodo Hsb<\/h2>\n<h3 class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 20; line-height: 1.4; --minfontsize: 20;\" data-fontsize=\"20\" data-lineheight=\"28px\">1. Stabilire il valore H \u2013 <i>Hue<\/i> \u2013 Tonalit\u00e0<\/h3>\n<p>\u00c8 senz&#8217;altro molto pi\u00f9 pratico scegliere per prima la tonalit\u00e0 (il valore H) poich\u00e9 siamo abituati a definire i colori innanzitutto in base a tale caratteristica primaria.<\/p>\n<p>Vogliamo un qualche rosso, un verde, un blu? Questa \u00e8 la tonalit\u00e0. <span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color-hover);\">Essendo il metodo colore Hsb derivato alla Ruota dei Colori, il colore \u2013 H (tonalit\u00e0) assume valori tra 0 e 360\u00b0. Interessante che un colore si misuri in gradi, no? Vediamolo meglio.<\/span><\/p>\n<p>Nel selettore colori di Photoshop, il valore H \u2013 tonalit\u00e0, viene determinato dalla posizione sulla colonna 1 (vedi la figura sopra). Immaginate tale barra verticale come la ruota dei colori rappresentata qui sotto ma in posizione &#8220;distesa&#8221;.<\/p>\n<p><img decoding=\"async\" class=\"lazyload aligncenter wp-image-20958 size-full\" title=\"Ruota dei colori\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori.webp\" alt=\"Ruota dei colori\" width=\"800\" height=\"800\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27800%27%20viewBox%3D%270%200%20800%20800%27%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-66x66.webp 66w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-150x150.webp 150w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-200x200.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-300x300.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-400x400.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-600x600.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori-768x768.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/RuotaColori.webp 800w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3 class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 20; line-height: 1.4; --minfontsize: 20;\" data-fontsize=\"20\" data-lineheight=\"28px\">2. Stabilire il valore S \u2013 <i>Saturazione<\/i><\/h3>\n<p>Quella di definire come secondo valore la saturazione \u00e8 un mio consiglio pi\u00f9 che una regola, in realt\u00e0 si potrebbe definire a questo punto la brillantezza.<\/p>\n<p>Credo per\u00f2 sia pi\u00f9 comodo procedere cos\u00ec, perch\u00e9 lavorando con colori molto scuri \u00e8 pi\u00f9 difficile valutare in un secondo momento la loro saturazione.<\/p>\n<p>Ad ogni modo per saturazione cerchiamo di definire &#8220;la quantit\u00e0&#8221; di colore o per dirla in modo opposto &#8220;quanto tende al grigio&#8221;. <span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color-hover);\">Immaginate un monitor in bianco e nero: potremmo dire che rappresenta i colori con una saturazione pari a zero.<\/span><\/p>\n<p>Le tinte pi\u00f9 sature sono quindi colori pi\u00f9 vivi, alcuni dicono &#8220;pi\u00f9 pieni&#8221;. Tecnicamente si dice &#8220;pi\u00f9 saturi&#8221;.<\/p>\n<p>Nella figura che segue vediamo il medesimo colore, l&#8217;azzurro con varianti dove \u00e8 stato modificato solo il valore di saturazione &#8211; S nel metodo Hsb. <i>\u00c8 sempre lo stesso colore, inteso come &#8220;tinta&#8221;<\/i>.<\/p>\n<p>La saturazione, come la brillantezza assume valori tra il 100% e lo 0%&#8230; dalla Tv a colori a quella in bianco e nero.<\/p>\n<p><img decoding=\"async\" class=\"lazyload size-full wp-image-20948 aligncenter\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro.webp\" alt=\"\" width=\"800\" height=\"244\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27244%27%20viewBox%3D%270%200%20800%20244%27%3E%3Crect%20width%3D%27800%27%20height%3D%27244%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro-200x61.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro-300x92.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro-400x122.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro-600x183.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro-768x234.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSBazzurro.webp 800w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<h3 class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 20; line-height: 1.4; --minfontsize: 20;\" data-fontsize=\"20\" data-lineheight=\"28px\">3. Stabilire il valore B \u2013 <i>Brillantezza<\/i><\/h3>\n<p>Determiniamo ora la brillantezza che trasforma il mio colore da puro al nero con tutte le gradazioni di mezzo.<\/p>\n<p>Potremmo immaginare la brillantezza come &#8220;quanto \u00e8 illuminato il colore&#8221;, quasi manovrassimo una fonte esterna di luce a determinarlo.<\/p>\n<p>Un oggetto sotto la luce del giorno ci appare nel suo colore nel modo pi\u00f9 luminoso e naturale. Man mano che la sera arriva il colore tende a essere sempre meno brillante.<\/p>\n<p>Poich\u00e9 si potrebbe fare un po&#8217; di confusione tra i concetti di saturazione e di brillantezza, un confronto servir\u00e0 a chiarire i dubbi. Abbiamo preso un rosso di partenza alla massima brillantezza e saturazione e gli abbiamo, prima, tolto saturazione (immagine in basso) e poi, allo stesso rosso di partenza, brillantezza (immagine sotto).<\/p>\n<p><img decoding=\"async\" class=\"lazyload size-full wp-image-20941 aligncenter\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB.webp\" alt=\"\" width=\"839\" height=\"739\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27839%27%20height%3D%27739%27%20viewBox%3D%270%200%20839%20739%27%3E%3Crect%20width%3D%27839%27%20height%3D%27739%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-200x176.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-300x264.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-400x352.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-600x528.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-768x676.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB-800x705.webp 800w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/EsempiHSB.webp 839w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 839px) 100vw, 839px\" \/><\/p>\n<p>Nell&#8217;esempio sopra sto &#8220;togliendo colore&#8221; a un rosso alla massima saturazione possibile. Nell&#8217;esempio sotto sto &#8220;aggiungendo nero&#8221; al rosso.<\/p>\n<p>Quel riquadro quasi nero, \u00e8 sempre un rosso, tecnicamente parlando, anche si si fatica a descriverlo come tale.<\/p>\n<p>Avrai infatti sicuramente sperimentato che \u00e8 difficile capire il colore di un oggetto alla sera o peggio ancora di notte.<\/p>\n<h2 id=\"toc_Nel_metodo_Hsb_il_Bianco_NON_e_il\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Il bianco NON \u00e8 il contrario del nero!<\/h2>\n<p>\u00c8 interessante ma soprattutto utile comprendere che nel metodo Hsb, <i>il bianco non \u00e8 opposto al Nero<\/i>. <\/p>\n<p>In pratica significa che togliere solo il nero non \u00e8 il modo giusto di schiarire un colore che si \u00e8 appena scelto e produrr\u00e0 risultati limitati. Osserviamo infatti il riquadro di selezione Saturazione-Brillantezza di Photoshop:<\/p>\n<p><img decoding=\"async\" class=\"lazyload size-large wp-image-20960 aligncenter\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-1024x734.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-1024x734.webp\" alt=\"\" width=\"1024\" height=\"734\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271024%27%20height%3D%27734%27%20viewBox%3D%270%200%201024%20734%27%3E%3Crect%20width%3D%271024%27%20height%3D%27734%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-200x143.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-300x214.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-400x287.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-600x430.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-768x551.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-800x573.webp 800w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-1024x734.webp 1024w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore-1200x860.webp 1200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/MetodoHsb-schiarireColore.webp 1236w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Nell&#8217;immagine si vede che per avvicinarsi al bianco (schiarire un colore) devo muovere il selettore (il cerchietto nel riquadro grande) sia in alto che a sinistra, in diagonale, modificando quindi sia il valore S (diminuendolo), saturazione, sia B (aumentandolo), brillantezza.<\/p>\n<p>Sempre dalla stessa immagine sopra si evince che, per avvicinarsi al nero \u00e8 sufficiente abbassare il selettore solamente in senso verticale.<\/p>\n<p>Un colore che tende al bianco \u00e8 quindi <i>sia<\/i> un colore meno saturo <i>sia<\/i> un colore pi\u00f9 brillante. Interessante, no? Se agissi solo sulla brillantezza (nero) non otterrei mai il bianco a meno che non lavori su un grigio puro (gi\u00e0 alla minima saturazione).<\/p>\n<h2 id=\"toc_Creare_una_tavolozza_colori_col_metodo_Hsb_e\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Creare una tavolozza colori col metodo Hsb \u00e8 troppo semplice!<\/h2>\n<p>Creare una <i>palette<\/i> di colori non \u00e8 argomento da &#8220;illuminati&#8221; e nemmeno serve studiare i trattati sul colore di Newton o Goethe.<\/p>\n<p>Col metodo Hsb \u00e8 vergognosamente semplice creare una tavolozza (palette) di colori. Non occorrerebbe nemmeno comprendere il significato di <i>armonia del colore<\/i> o dilinguarci in spiegazioni sulla <i>teoria del colore<\/i>.<\/p>\n<p>Possiamo per\u00f2 dire che un insieme di colori \u00e8 armonico quando vi \u00e8 una &#8220;parentela&#8221; tra di essi. Non serve quindi diventare pazzi con formule astruse e ragionamenti cervellotici, basta trovare un sostema semplice per esprimere tale parentela.<\/p>\n<p>Individuato quello che tecnicamente si chiama <i>colore base<\/i>, da esso col metodo Hsb \u00e8 molto facile derivare i colori di una tavolozza adatta ai nostri scopi.<\/p>\n<p>Definisci il tuo colore base e lavora sui suoi valori Hsb (se l&#8217;hai creato con altro metodo di colore trova l&#8217;Hsb corrispondente), crea quindi dei campioni modificando solo uno o due di tali valori.<\/p>\n<p>Se vari il solo valore &#8220;H&#8221; otterrai una tavolozza come quella sotto. Se vari &#8220;H&#8221; e uno dei valori tra &#8220;S&#8221; e &#8220;B&#8221; otterrai un&#8217;emozione diversa, vedi il secondo esempio. \u00c8 sufficiente tenere costante uno o due dei valori H, S e B.<\/p>\n<p>Nient&#8217;altro. Avrai la tua tavolozza, un bel insieme di colori perfettamente armonizzati da usare nel tuo impaginato, nel tuo poster, nella tua copertina, dove vuoi.<\/p>\n<p>Tutto qui ma se vuoi una palette pi\u00f9 &#8220;complicata&#8221; prova delle varianti che seguano un logica, per esempio cambiando il valore di intervalli precisi o con una certa progressione.<\/p>\n<figure><a href=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette.webp\" data-caption=\"\"><img decoding=\"async\" class=\"lazyload aligncenter wp-image-38979 size-full\" title=\"tavolozza cromatica\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette.webp\" alt=\"tavolozza cromatica o palette realizzata usando il metodo colore Hsb variando solo il valore Tonalit\u00e0 \u2013 Hue\" width=\"800\" height=\"590\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27590%27%20viewBox%3D%270%200%20800%20590%27%3E%3Crect%20width%3D%27800%27%20height%3D%27590%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette-200x148.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette-300x221.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette-400x295.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette-600x443.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette-768x566.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette.webp 800w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Tavolozza ottenuta variando solo il valore &#8220;H&#8221; \u2013 tonalit\u00e0 del <em>colore base<\/em> in alto a sinistra<\/figcaption><\/figure>\n<figure><figcaption><a href=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3.webp\"><img decoding=\"async\" class=\"lazyload alignnone size-full wp-image-38987\" src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3.webp\" data-orig-src=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3.webp\" alt=\"\" width=\"800\" height=\"567\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27567%27%20viewBox%3D%270%200%20800%20567%27%3E%3Crect%20width%3D%27800%27%20height%3D%27567%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3-200x142.webp 200w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3-300x214.webp 300w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3-400x284.webp 400w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3-600x425.webp 600w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3-768x544.webp 768w, https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/11\/palette3.webp 800w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a>Tavolozza ottenuta variando i valori H e S del <em>colore base<\/em> in alto a sinistra. Il valore B \u00e8 costante. I colori hanno perci\u00f2 tutti la stessa brillantezza\/luminosit\u00e0<\/figcaption><\/figure>\n<h2 id=\"toc_Conclusioni\" class=\"fusion-responsive-typography-calculated\" style=\"--fontsize: 22; line-height: 1.2; --minfontsize: 22;\" data-fontsize=\"22\" data-lineheight=\"26.4px\">Conclusioni<\/h2>\n<p>Partire dai valori Rgb e Cmyk per creare un preciso colore \u00e8 molto meno intuitivo poich\u00e9 ci costringe ad usare dei numeri.<\/p>\n<p>\u00c8 molto pi\u00f9 comodo usare lo strumento Selettore Colore presente in tutti i programmi di grafica, impaginazione ed elaborazione testi. <span style=\"color: var(--awb-text-color); font-family: var(--awb-text-font-family); font-size: var(--awb-font-size); font-style: var(--awb-text-font-style); letter-spacing: var(--awb-letter-spacing); text-align: var(--awb-content-alignment); text-transform: var(--awb-text-transform); background-color: var(--awb-bg-color-hover);\">Bisogna per\u00f2 conoscere i passi corretti che ho appena descritto. <\/span><\/p>\n<p>Naturalmente, una volta creato il colore col metodo Hsb si dispone di conseguenza anche dei corrispondenti valori Rgb e Cmyk, forniti dal programma, che magari ci serviranno per un controllo pi\u00f9 approfondito e dettagliato o per ragioni tecniche.<\/p>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Il <em>Metodo Hsb<\/em>, sul quale \u00e8 basato il Selettore Colore dei programmi di grafica e impaginazione, \u00e8 il modo pi\u00f9 intuitivo di definire un colore poich\u00e9 basato essenzialmente su caratteristiche <i>visive<\/i>. Questo articolo ti mostra come sfruttare le potenzialit\u00e0 dello strumento Selettore Colore partendo dalla comprensione del metodo Hsb<\/p>\n","protected":false},"author":8,"featured_media":21005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108],"tags":[],"class_list":["post-20776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-colore"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica\" \/>\n<meta property=\"og:description\" content=\"Il Metodo Hsb, sul quale \u00e8 basato il Selettore Colore dei programmi di grafica e impaginazione, \u00e8 il modo pi\u00f9 intuitivo di definire un colore poich\u00e9 basato essenzialmente su caratteristiche visive. Questo articolo ti mostra come sfruttare le potenzialit\u00e0 dello strumento Selettore Colore partendo dalla comprensione del metodo Hsb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/\" \/>\n<meta property=\"og:site_name\" content=\"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-26T09:39:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-04T09:12:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Carlo Gislon\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Gislon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/\"},\"author\":{\"name\":\"Carlo Gislon\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#\\\/schema\\\/person\\\/e8f19d6a4b7cdbd2b4c78a1e5ff4939e\"},\"headline\":\"Il metodo HSB e il Selettore Colore. La gestione \u201cnaturale\u201d del colore\",\"datePublished\":\"2023-04-26T09:39:14+00:00\",\"dateModified\":\"2025-11-04T09:12:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/\"},\"wordCount\":2118,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Selettore-colore.webp\",\"articleSection\":[\"Colore\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/\",\"name\":\"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Selettore-colore.webp\",\"datePublished\":\"2023-04-26T09:39:14+00:00\",\"dateModified\":\"2025-11-04T09:12:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Selettore-colore.webp\",\"contentUrl\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/Selettore-colore.webp\",\"width\":800,\"height\":533},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Colore\",\"item\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/category\\\/colore\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Il metodo HSB e il Selettore Colore. La gestione \u201cnaturale\u201d del colore\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#website\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/\",\"name\":\"Gislon: creative direction studio\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#organization\"},\"alternateName\":\"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#organization\",\"name\":\"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/logo-segnopositivoRisorsa-2.svg\",\"contentUrl\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/logo-segnopositivoRisorsa-2.svg\",\"width\":186,\"height\":55,\"caption\":\"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica\"},\"image\":{\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/#\\\/schema\\\/person\\\/e8f19d6a4b7cdbd2b4c78a1e5ff4939e\",\"name\":\"Carlo Gislon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/litespeed\\\/avatar\\\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114\",\"url\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/litespeed\\\/avatar\\\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114\",\"contentUrl\":\"https:\\\/\\\/carlogislon.it\\\/staging\\\/wp-content\\\/litespeed\\\/avatar\\\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114\",\"caption\":\"Carlo Gislon\"},\"description\":\"di Carlo Gislon\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica","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:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/","og_locale":"it_IT","og_type":"article","og_title":"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica","og_description":"Il Metodo Hsb, sul quale \u00e8 basato il Selettore Colore dei programmi di grafica e impaginazione, \u00e8 il modo pi\u00f9 intuitivo di definire un colore poich\u00e9 basato essenzialmente su caratteristiche visive. Questo articolo ti mostra come sfruttare le potenzialit\u00e0 dello strumento Selettore Colore partendo dalla comprensione del metodo Hsb","og_url":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/","og_site_name":"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica","article_published_time":"2023-04-26T09:39:14+00:00","article_modified_time":"2025-11-04T09:12:36+00:00","og_image":[{"width":800,"height":533,"url":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp","type":"image\/webp"}],"author":"Carlo Gislon","twitter_misc":{"Scritto da":"Carlo Gislon","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#article","isPartOf":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/"},"author":{"name":"Carlo Gislon","@id":"https:\/\/carlogislon.it\/staging\/#\/schema\/person\/e8f19d6a4b7cdbd2b4c78a1e5ff4939e"},"headline":"Il metodo HSB e il Selettore Colore. La gestione \u201cnaturale\u201d del colore","datePublished":"2023-04-26T09:39:14+00:00","dateModified":"2025-11-04T09:12:36+00:00","mainEntityOfPage":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/"},"wordCount":2118,"commentCount":0,"publisher":{"@id":"https:\/\/carlogislon.it\/staging\/#organization"},"image":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#primaryimage"},"thumbnailUrl":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp","articleSection":["Colore"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/","url":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/","name":"Gislon: comunicazione di prodotto e d\u2019impresa per l\u2019industria tecnica","isPartOf":{"@id":"https:\/\/carlogislon.it\/staging\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#primaryimage"},"image":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#primaryimage"},"thumbnailUrl":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp","datePublished":"2023-04-26T09:39:14+00:00","dateModified":"2025-11-04T09:12:36+00:00","breadcrumb":{"@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#primaryimage","url":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp","contentUrl":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2023\/04\/Selettore-colore.webp","width":800,"height":533},{"@type":"BreadcrumbList","@id":"https:\/\/carlogislon.it\/staging\/il-metodo-hsb-basato-sulla-ruote-dei-colori-e-la-percezione-naturale\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/carlogislon.it\/staging\/"},{"@type":"ListItem","position":2,"name":"Colore","item":"https:\/\/carlogislon.it\/staging\/category\/colore\/"},{"@type":"ListItem","position":3,"name":"Il metodo HSB e il Selettore Colore. La gestione \u201cnaturale\u201d del colore"}]},{"@type":"WebSite","@id":"https:\/\/carlogislon.it\/staging\/#website","url":"https:\/\/carlogislon.it\/staging\/","name":"Gislon: creative direction studio","description":"","publisher":{"@id":"https:\/\/carlogislon.it\/staging\/#organization"},"alternateName":"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carlogislon.it\/staging\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/carlogislon.it\/staging\/#organization","name":"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica","url":"https:\/\/carlogislon.it\/staging\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/carlogislon.it\/staging\/#\/schema\/logo\/image\/","url":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/03\/logo-segnopositivoRisorsa-2.svg","contentUrl":"https:\/\/carlogislon.it\/staging\/wp-content\/uploads\/2025\/03\/logo-segnopositivoRisorsa-2.svg","width":186,"height":55,"caption":"Comunicazione pubblicitaria e immagine aziendale per l\u2019industria tecnica"},"image":{"@id":"https:\/\/carlogislon.it\/staging\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/carlogislon.it\/staging\/#\/schema\/person\/e8f19d6a4b7cdbd2b4c78a1e5ff4939e","name":"Carlo Gislon","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/carlogislon.it\/staging\/wp-content\/litespeed\/avatar\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114","url":"https:\/\/carlogislon.it\/staging\/wp-content\/litespeed\/avatar\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114","contentUrl":"https:\/\/carlogislon.it\/staging\/wp-content\/litespeed\/avatar\/bf9b066fe5acdd48e1d7ce6ed00867ad.jpg?ver=1788957114","caption":"Carlo Gislon"},"description":"di Carlo Gislon"}]}},"_links":{"self":[{"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/posts\/20776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/comments?post=20776"}],"version-history":[{"count":0,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/posts\/20776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/media\/21005"}],"wp:attachment":[{"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/media?parent=20776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/categories?post=20776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carlogislon.it\/staging\/wp-json\/wp\/v2\/tags?post=20776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}