Generatore di palette di colori

Scegli un colore di partenza e lo strumento ricava il resto della serie seguendo la ruota dei colori. Clicca un campione per copiarne il codice, oppure carica una foto e prendi la palette direttamente da lì.

Schema

Clicca su un campione per copiarne il codice

    Palette da una foto

    La foto non lascia il tuo dispositivo — la legge direttamente il browser.

      Come si usa

      1. Scrivi un codice colore o apri il selettore: la palette si ridisegna mentre scegli.
      2. Cambia schema: il complementare sta all’opposto sulla ruota, una triade la divide in tre.
      3. Clicca un campione per copiarne il codice, o copia l’intera serie come variabili CSS.
      4. Per prendere i colori da una foto, scegli un’immagine: viene letta sul tuo dispositivo.

      Da sapere

      Da dove vengono gli angoli

      Uno schema di colori non è questione di gusto ma di geometria sulla ruota cromatica. Il colore complementare sta esattamente all’opposto, a 180°; una triade divide il cerchio in tre parti uguali di 120°; i colori analoghi sono vicini entro trenta gradi. Lo strumento ruota la tonalità mantenendo saturazione e luminosità, così i colori di accompagnamento restano vivi e profondi quanto quello di partenza.

      Perché una foto dà colori veri e non fango

      Contare i pixel più frequenti non funziona su una fotografia: il solo cielo contiene un milione di azzurri leggermente diversi, ciascuno presente una volta sola. Questo strumento divide lo spazio dei colori a metà lungo il canale più esteso e ripete l’operazione finché non ha abbastanza scatole, così la serie tiene separati il cielo, il viso e l’ombra invece di restituire un unico marrone medio.

      Fonti

      Domande frequenti

      Quale schema conviene per un sito?

      Monocromatico o analogo sono i più sicuri: tengono la pagina calma e non si contendono l’attenzione. Prendi un colore complementare per l’unico elemento che deve farsi notare — un pulsante, un’etichetta, un avviso.

      Come uso la palette nel codice?

      Copia il blocco di variabili CSS sotto i campioni e incollalo nel tuo foglio di stile. I nomi escono come --color-1 … --color-6, più leggibili di una fila di codici esadecimali nel progetto di qualcun altro.

      La mia foto viene caricata da qualche parte?

      No. L’immagine è decodificata nella pagina e ridotta a 160 pixel prima di contare i colori: nulla lascia il dispositivo e la risposta arriva subito.

      Perché la fila delle ombre non finisce in nero?

      Il nero puro e il bianco puro non portano informazione — li conoscono tutti, e in una palette occupano solo un posto. La fila si ferma appena prima del bordo, così ogni campione resta un colore utilizzabile.

      Strumenti correlati