Vai al contenuto
SPCXTools

Generatore di Palette Colori

Scegli un colore e ottieni una palette armoniosa di cinque colori basata sulla teoria dei colori.

Funziona localmente: i file non lasciano mai il tuo dispositivo

Caricamento strumento…

Come usare Generatore di Palette Colori

  1. 1Scegli un colore di base con il selettore, inserisci un valore HEX/RGB/HSL, oppure clicca su Casuale.
  2. 2Scegli uno schema colori come complementare, analogo o triadico.
  3. 3Clicca su qualsiasi colore per copiarne il codice HEX.
  4. 4Copia l'intera palette come proprietà personalizzate CSS o JSON.

Crea una palette colori da un singolo colore

Abbinare i colori è una delle sfide più grandi quando si progetta un sito web, un'app, una presentazione, un logo o un poster. La teoria del colore offre relazioni consolidate all'interno del cerchio cromatico, e questo generatore di palette le applica in automatico per te. Parti da un colore che ti piace — o da quello del tuo brand — scegli uno schema e ottieni cinque colori armoniosi pronti da copiare nel tuo progetto.

Funzionalità

  • Sette schemi: complementare, analogo, triadico, complementare divergente, tetradico, monocromatico e sfumature.
  • Qualsiasi colore di partenza in formato HEX, RGB, HSL o come nome colore CSS, oppure scegline uno casuale.
  • Clicca per copiare qualsiasi campione.
  • Esporta come custom properties CSS o array JSON.
  • Etichette leggibili che alternano bianco e nero in base al contrasto.

Quale schema usare?

Schema Atmosfera Ideale per
Complementare Audace, alto contrasto Pulsanti call-to-action, sport, saldi
Analogo Calmo, armonioso Natura, benessere, sfondi
Triadico Vivace, bilanciato Prodotti per bambini, illustrazioni
Complementare divergente Vivido ma meno aggressivo Siti web che richiedono un colore d'accento forte
Tetradico Ricco, colorato Infografiche e grafici
Monocromatico Elegante, minimale Siti aziendali, portfolio
Sfumature Sistematico Design system, stati della UI

Dalla palette al design

Una volta scelta la palette, verifica che il testo sia leggibile su ogni sfondo con il Controllo contrasto colori, converti i colori in RGB, HSL o CMYK per la stampa con il Convertitore di colori e trasformane due in uno sfondo sfumato con il Generatore di gradienti CSS.

Domande frequenti

Cos'è uno schema di colori complementari?
I colori complementari si trovano ai lati opposti della ruota dei colori, come il blu e l'arancione. Il forte contrasto fa risaltare gli accenti e le call to action. Usa un colore come principale e il suo complementare con parsimonia.
Qual è la differenza tra colori analoghi, triadici e tetradici?
I colori analoghi sono vicini sulla ruota dei colori e creano un effetto calmo e coeso. I colori triadici sono distanziati uniformemente di 120° e risultano vivaci ma equilibrati. Le palette tetradiche (a quadrato) usano quattro tonalità distanziate di 90° e sono le più colorate — di solito rendono al meglio con un colore dominante.
Come dovrei usare una palette di cinque colori su un sito web?
Un approccio comune è la regola del 60-30-10: circa il 60% di sfondo neutro, il 30% di colore primario e il 10% di accento. Usa il colore più scuro per il testo e verifica ogni combinazione di testo e sfondo con un contrast checker.
Posso partire dal colore del mio brand?
Sì. Inserisci il codice HEX del tuo brand come colore di base; ogni schema verrà costruito attorno ad esso. Per estrarre il colore del brand da un logo o da uno screenshot, usa l'Image Color Picker.
Come vengono calcolati i colori?
Il colore di base viene convertito in HSL (tonalità, saturazione, luminosità). Gli schemi ruotano la tonalità secondo angoli fissi sulla ruota dei colori, mentre le palette monocromatiche e le sfumature mantengono la stessa tonalità variando la luminosità.

Strumenti correlati

Controllo Contrasto ColoriVerifica se il tuo testo è sufficientemente leggibile e ottieni il colore più simile conforme alle WCAG.Convertitore di ColoriConverti qualsiasi colore tra HEX, RGB, HSL, HSV e CMYK e verificane il contrasto.Color Picker da ImmagineClicca in un punto qualsiasi di un'immagine per ottenere il suo colore esatto in HEX, RGB e HSL — oltre alla sua palette di colori principali.Generatore di Gradienti CSSProgetta uno sfondo sfumato in modo visivo e copia il CSS — lineare, radiale o conico.Generatore di Box ShadowPerfeziona ombre morbide, nette, a livelli o interne con un'anteprima in tempo reale e copia il CSS.Simulatore di daltonismoVisualizza in anteprima le tue immagini attraverso gli occhi di chi ha un deficit della percezione dei colori per garantire che i tuoi design siano accessibili.