{"id":22660,"date":"2023-08-21T12:43:58","date_gmt":"2023-08-21T10:43:58","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=22660"},"modified":"2023-08-21T12:43:58","modified_gmt":"2023-08-21T10:43:58","slug":"libreria-manipolazione-dei-colori-javascript","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/","title":{"rendered":"La migliore libreria per la manipolazione dei colori in JavaScript"},"content":{"rendered":"\n<p>SASS offre funzioni come&nbsp;<code>lighten()<\/code>&nbsp;e&nbsp;<code>darken()<\/code>&nbsp;per modificare i colori. Queste forniscono un approccio pratico alla manipolazione dei colori in CSS. E se volessi<strong> ottenere lo stesso risultato in JavaScript?<\/strong><\/p>\n\n\n\n<p>Considerando quanto popolare sia modificare lo stile dei componenti HTML direttamente JavaScript, quella \u00e8 ormai una esigenza basica. Ecco perch\u00e9 sono nate <strong>diverse librerie per i colori in JavaScript<\/strong>. Il loro obiettivo \u00e8 rendere pi\u00f9 semplice la gestione dei colori in JS. <strong>Qui, avrai modo di approfondire&nbsp;<code>color<\/code>, la pi\u00f9 popolare di tutte!<\/strong><\/p>\n\n\n\n<p>In questo articolo, scoprirai perch\u00e9 hai bisogno di una<strong> libreria di manipolazione dei colori in JavaScript<\/strong>, perch\u00e9&nbsp;<strong><code>color<\/code>&nbsp;<\/strong>\u00e8 la migliore e quali funzionalit\u00e0 e metodi offre.<\/p>\n\n\n\n<p>Iniziamo!<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-4c69d201 gb-headline-text\">Perch\u00e9 manipolare i colori in JavaScript<\/h2>\n\n\n\n<p>I colori svolgono un ruolo vitale nel design web, nelle interfacce utenti, nell\u2019accessibilit\u00e0, nella UX e nella visualizzazione dei dati.<strong> Con la giusta libreria <a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/come-programmare-con-javascript-tutto-sul-linguaggio-per-il-web\/\" class=\"ek-link\">JavaScript<\/a><\/strong>, puoi manipolare i colori in modo dinamico e programmatico<strong> sia nel frontend che nel backend.<\/strong><\/p>\n\n\n\n<p>Nel dettaglio, ci sono almeno tre scenari reale in cui poter interagire <strong>con i colori in JavaScript \u00e8 fondamentale:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settare i colori direttamente da JavaScript<\/strong>: Supponiamo che un&#8217;API restituisca informazioni relative allo stile di un componente o che tu debba cambiare colori in base all\u2019interazione dell\u2019utente. In questo caso, non puoi fare affidamento su CSS ma devi invece impostare lo stile degli elementi HTML nel frontend tramite codice JavaScript. Ad esempio, in React questo si traduce nel settare la prop&nbsp;<code>style<\/code>.<\/li>\n\n\n\n<li><strong>Convertire i colori<\/strong>: HEX, RGB, RGBA, HLS e HLSA sono i principali formati supportati dalle applicazioni web per la rappresentazione dei colori. Dal momento che il miglior formato cambia da caso d\u2019uso a caso d\u2019uso, potresti aver bisogno di convertire i colori per renderli pi\u00f9 facili da comprendere o manipolare.<\/li>\n\n\n\n<li><strong>Migliorare l\u2019accessibilit\u00e0<\/strong>: Un esempio \u00e8 dare agli utenti la possibilit\u00e0 di selezionare un tema specifico e fare in modo che tutti i colori cambino di conseguenza. Questo \u00e8 un ottimo modo per rendere le tue applicazioni web e i tuoi siti altamente accessibili.<\/li>\n<\/ul>\n\n\n\n<p>Ora, la domanda \u00e8: \u201cc\u2019\u00e8 una libreria per tutto ci\u00f2 in JavaScript?\u201d S\u00ec, c&#8217;\u00e8, e si chiama&nbsp;<code>color<\/code>!<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-5a78ae70 gb-headline-text\">Cos\u2019\u00e8 la Libreria JavaScript&nbsp;<code>color<\/code>?<\/h2>\n\n\n\n<p><code><a href=\"https:\/\/github.com\/Qix-\/color\" class=\"ek-link\">C<\/a><\/code><a href=\"https:\/\/github.com\/Qix-\/color\" class=\"ek-link\"><code>olor<\/code><\/a>&nbsp;\u00e8 una libreria JavaScript<strong> per la conversione e la manipolazione dei colori<\/strong>. Il pacchetto npm ha pi\u00f9 di 15 milioni di download settimanali, <strong>rendendola la libreria di gestione dei colori pi\u00f9 popolare tra tutte le alternative disponibili.<\/strong><\/p>\n\n\n\n<p><code>color<\/code>&nbsp;espone un costruttore&nbsp;<code>Color()<\/code>&nbsp;che accetta un colore in diversi formati:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ con stringhe dei colori in CSS<\/span>\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"red\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"rgb(255, 0, 0)\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"#FF0000\"<\/span>)\n<span class=\"hljs-keyword\">const<\/span> color = Color(<span class=\"hljs-string\">\"hsl(0, 100%, 50%)\"<\/span>)\n\n<span class=\"hljs-comment\">\/\/ con un oggetto<\/span>\n<span class=\"hljs-keyword\">const<\/span> color = Color({<span class=\"hljs-attr\">r<\/span>: <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-attr\">g<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-attr\">b<\/span>: <span class=\"hljs-number\">0<\/span>})<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Dietro le quinte, i costruttori che accettano stringhe vengono gestiti con il pacchetto&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/color-string\"><code>color-string<\/code><\/a>.<\/p>\n\n\n\n<p>L\u2019oggetto restituito da&nbsp;<code>Color()<\/code>&nbsp;espone diversi metodi per la conversione e manipolazione dei colori. Questi metodi sono <strong>immutabili<\/strong> poich\u00e9 restituiscono sempre un <strong>nuovo oggetto colore,<\/strong> <strong>senza modificare la struttura dati originale.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167-1024x683.jpg\" alt=\"libreria per la manipolazione dei colori\" class=\"wp-image-22640\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167-1024x683.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167-300x200.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167-768x512.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167-600x400.jpg 600w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/iStock-1497617167.jpg 1254w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"gb-headline gb-headline-eb5322bd gb-headline-text\">Utilizzare&nbsp;<code>color<\/code>&nbsp;in JavaScript<\/h2>\n\n\n\n<p>Vediamo ora<strong> le funzionalit\u00e0 offerte da&nbsp;<code>color<\/code>&nbsp;<\/strong>per rendere pi\u00f9 semplice le operazioni di manipolazione del colore.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-a56923d9 gb-headline-text\">Prima di iniziare<\/h3>\n\n\n\n<p>Installa il pacchetto npm&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/color\"><code>color<\/code><\/a>&nbsp;con:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install color<\/code><\/span><\/pre>\n\n\n<p>Se sei un utente TypeScript, dovrai anche installare la dichiarazione dei tipi con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@types<\/span>\/color<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Poi, puoi importare&nbsp;<code>color<\/code>&nbsp;in Node.js con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> Color = <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">\"color\"<\/span>)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Oppure, come modulo ES con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> Color <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"color\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Come accennato in precedenza,&nbsp;<code>Color<\/code><strong>&nbsp;\u00e8 un costruttore che accetta un color in diversi formati<\/strong> e restituisce un oggetto che espone molti metodi utili. Ora \u00e8 il momento di vederli in azione!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Lettura consigliata: <em><a href=\"https:\/\/www.codemotion.com\/magazine\/it\/linguaggi-programmazione\/react-tutto-sulla-library-javascript\/\" class=\"ek-link\">React, tutto sulla libreria Javascript<\/a><\/em><\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"gb-headline gb-headline-16aac122 gb-headline-text\">Da RGB a HEX e da HEX a RGB<\/h3>\n\n\n\n<p>Puoi usare&nbsp;<code>color<\/code>&nbsp;per convertire un colore da RGB a HEX in JavaScript come nell\u2019esempio qui sotto:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> blueRGB = <span class=\"hljs-string\">\"rgb(0, 0, 255)\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> blue = Color(blueRGB)\n<span class=\"hljs-keyword\">const<\/span> blueHEX = blue.hex().toString()\n<span class=\"hljs-built_in\">console<\/span>.log(blueHEX) <span class=\"hljs-comment\">\/\/ \"#0000FF\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Il metodo&nbsp;<code>hex()<\/code>&nbsp;restituisce un oggetto colore con i dati di rappresentazione cromatica memorizzati nel formato HEX. Nello specifico, se provi a loggare&nbsp;<code>blue.hex()<\/code>&nbsp;con&nbsp;<code>console.log()<\/code>, otterrai:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">{ <span class=\"hljs-attribute\">model<\/span>: <span class=\"hljs-string\">'rgb'<\/span>, color: &#91; <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">255<\/span> ], valpha: <span class=\"hljs-number\">1<\/span> }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Poi,&nbsp;<code>toString()<\/code>&nbsp;trasforma quell\u2019oggetto in una&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\">stringa con il colore in CSS<\/a>.<\/p>\n\n\n\n<p>In maniera simile, puoi passare da HEX a RGB in JavaScript con:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> blueHEX = <span class=\"hljs-string\">\"#0000FF\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> blue = Color(bluHEX)\n<span class=\"hljs-keyword\">const<\/span> blueRGB = blue.rgb().toString()\n<span class=\"hljs-built_in\">console<\/span>.log(blueRGB) <span class=\"hljs-comment\">\/\/ \"rgb(0, 0, 255)\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Qui, devi per\u00f2 fare affidamento sul metodo&nbsp;<code>rgb()<\/code>.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-bb750f9a gb-headline-text\">Convertire un colore da uno spazio all\u2019altro<\/h3>\n\n\n\n<p><code>color<\/code>&nbsp;offre diversi metodi per convertire da uno spazio dei colori a un altro. Al momento della scrittura di questo articolo, <strong>i metodi di conversione sono:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>rgb()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/RGB_color_model\">RGB<\/a>.<\/li>\n\n\n\n<li><code>hsl()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV\">HSL<\/a>.<\/li>\n\n\n\n<li><code>hsv()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HSL_and_HSV\">HSV<\/a>.<\/li>\n\n\n\n<li><code>hwb()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HWB_color_model\">HWB<\/a>.<\/li>\n\n\n\n<li><code>cmyk()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CMYK_color_model\">CMYK<\/a>.<\/li>\n\n\n\n<li><code>xyz()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CIE_1931_color_space\">CIE XYZ<\/a>.<\/li>\n\n\n\n<li><code>lab()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/CIELAB_color_space\" class=\"ek-link\">L*a*b<\/a>.<\/li>\n\n\n\n<li><code>lch()<\/code>:Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/HCL_color_space\">LCH<\/a>.<\/li>\n\n\n\n<li><code>ansi16()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a 16 ANSI.<\/li>\n\n\n\n<li><code>ansi256()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a 256 ANSI.<\/li>\n\n\n\n<li><code>hcg()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato a&nbsp;<a href=\"https:\/\/github.com\/d3\/d3-hcg\">HCG<\/a>.<\/li>\n\n\n\n<li><code>apple()<\/code>: Per convertire un colore da un qualsiasi spazio dei colori supportato allo spazio di colori di&nbsp;<a href=\"https:\/\/support.apple.com\/guide\/motion\/about-color-space-motn3f5342e9\/mac\">Apple<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"gb-headline gb-headline-c2afb869 gb-headline-text\">Verificare se un colore \u00e8 chiaro o scuro<\/h3>\n\n\n\n<p>Per valutare se un colore \u00e8 chiaro o scuro, puoi semplicemente utilizzare il metodo&nbsp;<code>isLight()<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> lightBlue = Color(<span class=\"hljs-string\">\"lightblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isLight()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>O il metodo opposto&nbsp;<code>isDark()<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> darkBlue = Color(<span class=\"hljs-string\">\"darkblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isDark()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Nota che se&nbsp;<code>isLight()<\/code>&nbsp;restituisce&nbsp;<code>true<\/code>, allora&nbsp;<code>isDark()<\/code>&nbsp;restituir\u00e0&nbsp;<code>false<\/code>&nbsp;e viceversa:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> lightBlue = Color(<span class=\"hljs-string\">\"lightblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isLight()) <span class=\"hljs-comment\">\/\/ true<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(lightBlue.isDark()) <span class=\"hljs-comment\">\/\/ false<\/span>\n\n<span class=\"hljs-keyword\">const<\/span> darkBlue = Color(<span class=\"hljs-string\">\"darkblue\"<\/span>)\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isLight()) <span class=\"hljs-comment\">\/\/ false<\/span>\n<span class=\"hljs-built_in\">console<\/span>.log(darkBlue.isDark()) <span class=\"hljs-comment\">\/\/ true<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Dietro le quinde, questi due metodi si basano sull\u2019<a href=\"https:\/\/24ways.org\/2010\/calculating-color-contrast\">equazione YIQ per il calcolo del contrasto dei colori<\/a>.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-33175000 gb-headline-text\">Manipolare i colori<\/h3>\n\n\n\n<p>Altri utili metodi per manipolare i colori offerti da&nbsp;<code>color<\/code>&nbsp;sono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>lighten()<\/code>: Per schiarire un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.lighten(<span class=\"hljs-number\">0.3<\/span>) <span class=\"hljs-comment\">\/\/ #4D4DFF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>darken()<\/code>: Per scurire un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.darken(<span class=\"hljs-number\">0.2<\/span>) <span class=\"hljs-comment\">\/\/ #0000CC<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>lightness()<\/code>: Per impostare la luminosit\u00e0 di un colore su un valore specifico.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.lightness(<span class=\"hljs-number\">35<\/span>) <span class=\"hljs-comment\">\/\/ #0000B3<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>saturate()<\/code>: Per saturare un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.saturate(<span class=\"hljs-number\">1<\/span>) <span class=\"hljs-comment\">\/\/ #0000FF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>desaturate()<\/code>: Per desaturare un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.desaturate(<span class=\"hljs-number\">0.5<\/span>) <span class=\"hljs-comment\">\/\/ #4040BF<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>whiten()<\/code>: Per sbiancare un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.whiten(<span class=\"hljs-number\">0.1<\/span>) <span class=\"hljs-comment\">\/\/ #BEDCE6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>blacken()<\/code>: Per annerire un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.blacken(<span class=\"hljs-number\">1<\/span>) <span class=\"hljs-comment\">\/\/ #ADC5CD<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>rotate()<\/code>: Per applicare una&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter-function\/hue-rotate\">rotazione hue<\/a>&nbsp;su un colore di un grado specificato.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.rotate(<span class=\"hljs-number\">180<\/span>) <span class=\"hljs-comment\">\/\/ #FFFF00<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>fade()<\/code>: Per sbiadire un colore di una percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.fade(<span class=\"hljs-number\">0.2<\/span>) <span class=\"hljs-comment\">\/\/ #ADD8E6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>opaquer()<\/code>: Per rendere un colore pi\u00f9 o meno opaco in base alla percentuale specificata.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">lightBlue.opaquer(<span class=\"hljs-number\">0.8<\/span>) <span class=\"hljs-comment\">\/\/ #ADD8E6<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>grayscale()<\/code>: Per ottenere l\u2019equivalente in scala di grigi del colore corrente.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">blue.grayscale() <span class=\"hljs-comment\">\/\/ #1C1C1C<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Incolla il colore risultante nel commento JavaScript in un&nbsp;<a href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\">visualizzatore di colori HEX<\/a>&nbsp;per vedere gli effetti di ciascun metodo.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-3d7e34fb gb-headline-text\">Altri metodi getter<\/h3>\n\n\n\n<p><code>Color<\/code>&nbsp;fornisce anche molti metodi getter per ottenere informazioni specifiche su un colore:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>red()<\/code>: Per ottenere il componente \u201crosso\u201d del colore nello spazio RGB.<\/li>\n\n\n\n<li><code>green()<\/code>: Per ottenere il componente \u201cverde\u201d del colore nello spazio RGB.<\/li>\n\n\n\n<li><code>blue()<\/code>: Per ottenere il componente \u201cblu\u201d del colore nello spazio RGB.<\/li>\n\n\n\n<li><code>alpha()<\/code>: Per ottenere il componente \u201calpha\u201d del colore nello spazio RGBA.<\/li>\n\n\n\n<li><code>lightness()<\/code>: Per ottenere la luminosit\u00e0 del colore secondo lo spazio HSL.<\/li>\n\n\n\n<li><code>keyword()<\/code>: Per ottenere il nome CSS del colore.<\/li>\n\n\n\n<li><code>cyan()<\/code>: Per ottenere il componente \u201cciano\u201d del colore nello spazio CMY.<\/li>\n\n\n\n<li><code>magenta()<\/code>: Per ottenere il componente \u201cmagenta\u201d del colore nello spazio CMY.<\/li>\n\n\n\n<li><code>yellow()<\/code>: Per ottenere il componente \u201cgiallo\u201d del colore nello spazio CMY.<\/li>\n\n\n\n<li><code>black()<\/code>: Per ottenere il componente \u201cnero\u201d del colore nello spazio CMYK.<\/li>\n\n\n\n<li><code>x()<\/code>: Per ottenere il componente \u201cx\u201d del colore nello spazio CIE XYZ.<\/li>\n\n\n\n<li><code>y()<\/code>: Per ottenere il componente \u201cy\u201d del colore nello spazio CIE XYZ.<\/li>\n\n\n\n<li><code>z()<\/code>: Per ottenere il componente \u201cz\u201d del colore nello spazio CIE XYZ.<\/li>\n\n\n\n<li><code>l()<\/code>: Per ottenere il componente \u201cL\u201d del colore nello spazio L*a*b.<\/li>\n\n\n\n<li><code>a()<\/code>: Per ottenere il componente \u201ca\u201d del colore nello spazio L*a*b.<\/li>\n\n\n\n<li><code>b()<\/code>: Per ottenere il componente \u201cb\u201d del colore nello spazio L*a*b.<\/li>\n<\/ul>\n\n\n\n<p>Con tutti questi metodi, <strong>la manipolazione dei colori in JavaScript non \u00e8 mai stata cos\u00ec semplice!<\/strong><\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-6dcd9446 gb-headline-text\">Conclusioni<\/h2>\n\n\n\n<p>In questo articolo, abbiamo visto quanto sia importante avere <strong>la capacit\u00e0 di poter agire<\/strong> sui colori direttamente in JavaScript. Come visto qui, la libreria JavaScript&nbsp;<code>color<\/code>&nbsp;\u00e8 dotata di tutto ci\u00f2 di cui hai bisogno per eseguire la manipolazione e la conversione dei colori.<\/p>\n\n\n\n<p>Attraverso diversi esempi, hai avuto <strong>l\u2019opportunit\u00e0 di capire come utilizzare&nbsp;<code>color<\/code>&nbsp;in scenari pratici e reali<\/strong>. Convertire da HEX a RGB e viceversa \u00e8 ormai un gioco da ragazzi!<\/p>\n\n\n\n<p><strong><em>Grazie per aver letto questo articolo! Speriamo che ti sia stato utile!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SASS offre funzioni come&nbsp;lighten()&nbsp;e&nbsp;darken()&nbsp;per modificare i colori. Queste forniscono un approccio pratico alla manipolazione dei colori in CSS. E se volessi ottenere lo stesso risultato in JavaScript? Considerando quanto popolare sia modificare lo stile dei componenti HTML direttamente JavaScript, quella \u00e8 ormai una esigenza basica. Ecco perch\u00e9 sono nate diverse librerie per i colori in&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\">Read more<\/a><\/p>\n","protected":false},"author":160,"featured_media":22665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10289],"tags":[9961],"collections":[],"class_list":{"0":"post-22660","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript-it","8":"tag-javascript","9":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Libreria per la manipolazione dei colori: la migliore in Javascript<\/title>\n<meta name=\"description\" content=\"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La migliore libreria per la manipolazione dei colori in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-21T10:43:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1253\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonello Zanini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonello Zanini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\"},\"author\":{\"name\":\"Antonello Zanini\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\"},\"headline\":\"La migliore libreria per la manipolazione dei colori in JavaScript\",\"datePublished\":\"2023-08-21T10:43:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\"},\"wordCount\":1345,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"keywords\":[\"JavaScript\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\",\"name\":\"Libreria per la manipolazione dei colori: la migliore in Javascript\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"datePublished\":\"2023-08-21T10:43:58+00:00\",\"description\":\"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg\",\"width\":1253,\"height\":836,\"caption\":\"Script coding and programming in php, python, javascript, other languages. Cartoon professional programmer working with laptop online among windows and programs flat vector illustration. Code concept\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"La migliore libreria per la manipolazione dei colori in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a\",\"name\":\"Antonello Zanini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g\",\"caption\":\"Antonello Zanini\"},\"description\":\"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Libreria per la manipolazione dei colori: la migliore in Javascript","description":"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.","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:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/","og_locale":"en_US","og_type":"article","og_title":"La migliore libreria per la manipolazione dei colori in JavaScript","og_description":"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-08-21T10:43:58+00:00","og_image":[{"width":1253,"height":836,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","type":"image\/jpeg"}],"author":"Antonello Zanini","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Antonello Zanini","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/"},"author":{"name":"Antonello Zanini","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a"},"headline":"La migliore libreria per la manipolazione dei colori in JavaScript","datePublished":"2023-08-21T10:43:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/"},"wordCount":1345,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","keywords":["JavaScript"],"articleSection":["JavaScript"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/","name":"Libreria per la manipolazione dei colori: la migliore in Javascript","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","datePublished":"2023-08-21T10:43:58+00:00","description":"Ti sei mai chiesto qual \u00e8 la migliore libreria per la manipolazione dei colori in JavaScript? In questo articolo troverai la risposta.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg","width":1253,"height":836,"caption":"Script coding and programming in php, python, javascript, other languages. Cartoon professional programmer working with laptop online among windows and programs flat vector illustration. Code concept"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/libreria-manipolazione-dei-colori-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/javascript-it\/"},{"@type":"ListItem","position":4,"name":"La migliore libreria per la manipolazione dei colori in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/1fd4f55ec0d9743347559c715b9edf4a","name":"Antonello Zanini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8df9ffe2e0d01ee1cf62c1307c69fd078041934eefd24c47eda05b4f57b4550e?s=96&d=mm&r=g","caption":"Antonello Zanini"},"description":"I'm a software engineer, but I prefer to call myself a Technology Bishop. Spreading knowledge through writing is my mission.","sameAs":["https:\/\/www.linkedin.com\/in\/antonello-zanini?originalSubdomain=it"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x600.jpg","author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-768x512.jpg",768,512,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",1253,836,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript.jpg",100,67,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/08\/Color-Manipulation-Library-for-JavaScript-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Antonello Zanini","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/antonello-zanini\/"},"uagb_comment_info":0,"uagb_excerpt":"SASS offre funzioni come&nbsp;lighten()&nbsp;e&nbsp;darken()&nbsp;per modificare i colori. Queste forniscono un approccio pratico alla manipolazione dei colori in CSS. E se volessi ottenere lo stesso risultato in JavaScript? Considerando quanto popolare sia modificare lo stile dei componenti HTML direttamente JavaScript, quella \u00e8 ormai una esigenza basica. Ecco perch\u00e9 sono nate diverse librerie per i colori in&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/160"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=22660"}],"version-history":[{"count":6,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22660\/revisions"}],"predecessor-version":[{"id":22676,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/22660\/revisions\/22676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/22665"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=22660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=22660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=22660"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=22660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}