Generatore di palette di colori — Palette armoniose, da zero o da una foto
Premi la barra spaziatrice per una nuova palette, blocca i colori che ti piacciono, scegli un'armonia o ricava la palette da una foto. Esporta in CSS, Tailwind, SCSS, JSON o PNG.
Fai clic su un campione per selezionarlo, sul lucchetto per mantenerlo quando generi, sulla matita per scegliere un nuovo colore, sul codice per copiarlo.
| HEX | RGB | HSL | |
|---|---|---|---|
| #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) | |
| #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) | |
| #e9c46a | rgb(233, 196, 106) | hsl(43, 74%, 66%) | |
| #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) | |
| #e76f51 | rgb(231, 111, 81) | hsl(12, 76%, 61%) |
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}
Palette da un'immagine
Carica una foto per inserirne i colori dominanti nei campioni non bloccati, poi fai clic in un punto qualsiasi dell'immagine per prelevare un pixel esatto nel campione selezionato (colore 1). L'immagine resta sul tuo dispositivo.
Le palette vengono generate nel tuo browser e le immagini caricate non lasciano mai il tuo dispositivo. Sfoglia tutti gli strumenti gratuiti.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Questo generatore di palette di colori gratuito crea un insieme da 2 a 10 colori che stanno bene insieme. Premi la barra spaziatrice (o Genera) per una nuova palette, blocca i campioni che vuoi tenere e rigenera finché anche gli altri non funzionano. Scegli un'armonia come analoga, complementare o triadica, oppure carica una foto e porta i suoi colori dominanti direttamente nella palette. Ogni campione mostra i valori HEX, RGB e HSL e il colore del testo, nero o bianco, che resta leggibile su di esso.
La maggior parte dei generatori ruota la tonalità in HSL, producendo palette in cui il giallo abbaglia e il blu sprofonda, perché la luminosità HSL non ha nulla a che vedere con quanto un colore appare chiaro. Questo calcola le armonie in OKLCH, uno spazio colore percettivo in cui una luminosità uguale appare ugualmente chiara, poi distribuisce la luminosità in modo che ogni palette abbia toni scuri, medi e chiari che puoi davvero usare per testo, sfondi e accenti. Non può dirti se una palette si addice al tuo brand: quella resta una tua scelta, e lo strumento Verifica contrasto indicato qui sotto ti dice quali coppie sono leggibili.
Come si usa
- Premi la barra spaziatrice o il pulsante Genera per creare una palette. Usa − e + per scegliere da 2 a 10 colori.
- Scegli un'armonia dal menu. Casuale dà insiemi vari ma equilibrati; le altre seguono le regole classiche della ruota dei colori.
- Fai clic sul lucchetto di un campione che ti piace, poi continua a generare: i colori bloccati restano e l'armonia viene ricostruita attorno al primo colore bloccato.
- Fai clic sulla matita per scegliere un colore a mano, oppure digita un valore HEX nell'editor sotto la striscia. Per partire da una foto, caricala in Palette da un'immagine e fai clic sull'immagine per prelevare pixel precisi.
- Esporta la palette come variabili CSS, configurazione Tailwind, SCSS o JSON, scarica un PNG o copia il link di condivisione.
Domande frequenti
Come si genera una palette di colori?
Premi la barra spaziatrice in questa pagina. Ogni pressione crea una nuova palette con l'armonia selezionata. Quando un colore ti sembra giusto, bloccalo con il lucchetto e continua a premere: cambiano solo i campioni non bloccati, e i nuovi colori vengono scelti per armonizzarsi con quello bloccato. Cinque colori sono una buona scelta predefinita per un sito web: uno scuro per il testo, uno chiaro per gli sfondi, un primario, un secondario e un accento.
Che cosa sono i colori complementari, analoghi e triadici?
Sono posizioni sulla ruota dei colori. I colori complementari stanno uno di fronte all'altro (a 180 gradi), il che dà il contrasto più forte. I colori analoghi sono vicini, a circa 30 gradi l'uno dall'altro, e risultano calmi e coerenti. I colori triadici sono tre tonalità distanziate di 120 gradi; la complementare divisa usa una tonalità di base più le due ai lati della sua complementare (a 150 e 210 gradi); la tetradica, o quadrata, usa quattro tonalità a 90 gradi l'una dall'altra. La monocromatica mantiene una sola tonalità e varia luminosità e saturazione.
Posso ricavare una palette di colori da un'immagine?
Sì. Carica una foto in Palette da un'immagine. Lo strumento la riduce a 200 pixel al massimo, il che attenua il rumore, e raggruppa i pixel con il clustering k-means nello spazio colore OKLab, così il risultato riflette i colori che vedi e non il semplice conteggio dei pixel. I cluster più grandi riempiono i campioni non bloccati, e per ogni colore è indicata la porzione di immagine che copre. Fai clic in un punto qualsiasi dell'immagine per prelevare un pixel esatto nel campione selezionato. L'immagine non lascia mai il tuo browser.
Come uso una palette in CSS o Tailwind?
Scegli l'esportazione come variabili CSS e incolla il blocco :root nel tuo foglio di stile, poi usa i colori come var(--color-1) e così via. L'esportazione Tailwind è un blocco theme.extend.colors che aggiunge da palette-1 a palette-N, così puoi scrivere bg-palette-1 o text-palette-3. Rinomina le variabili in base al ruolo (primary, surface, text) una volta deciso a cosa serve ogni colore; nomi come color-3 non sopravvivono a un restyling.
Perché questo generatore usa OKLCH invece di HSL?
Perché la luminosità HSL non è la luminosità percepita. In HSL, il giallo puro e il blu puro hanno entrambi una luminosità del 50 percento, eppure il giallo appare chiaro quanto un grigio chiaro e il blu sembra quasi nero. Ruotare la tonalità in HSL produce quindi insiemi sbilanciati in luminosità. OKLCH, definito in CSS Color Level 4 e supportato da tutti i browser attuali, separa luminosità, croma e tonalità, così ruotando la tonalità la luminosità apparente resta la stessa. I colori che escono dalla gamma sRGB vengono riportati dentro abbassando il croma e mantenendo tonalità e luminosità.
Posso condividere o salvare una palette?
Copia il link di condivisione: contiene i colori nell'indirizzo (ad esempio ?colors=264653-2a9d8f-e9c46a), quindi chiunque lo apra vede la stessa palette, e puoi salvarlo nei preferiti. Nulla viene memorizzato su un server. Puoi anche scaricare un PNG dei campioni con i rispettivi valori HEX e RGB per una moodboard o un'email a un cliente.
Trasformare una palette in un sistema di colori per l'interfaccia
Una palette di cinque bei colori non è ancora un design system. A un sito servono dei ruoli: un colore del testo con un contrasto di almeno 4,5:1 sullo sfondo, uno sfondo e una superficie leggermente diversa per le card, un colore primario per pulsanti e link e un accento da usare con parsimonia. La regola 60-30-10 dell'interior design è un ragionevole punto di partenza: circa 60 percento di sfondo neutro, 30 percento di colore secondario, 10 percento di accento.
• Testo: il colore più scuro, oppure un quasi-nero sfumato con la tonalità primaria. Il #000 puro su #fff puro è più duro del necessario.
• Sfondo e superficie: il colore più chiaro o i due più chiari. Molte palette generate ne includono uno; altrimenti blocca il primario e passa a Monocromatica per ottenerne delle tinte chiare.
• Primario: il colore che dice "cliccami". Verifica che il testo bianco o nero su di esso superi il 4,5:1 (il colore del testo leggibile indicato su ogni campione è un rapido primo controllo, lo strumento Verifica contrasto quello vero).
• Accento: il colore più saturo, per evidenziazioni e badge, non per grandi superfici.
Poi genera tinte e ombre del primario (più chiare per gli sfondi al passaggio del mouse, più scure per lo stato premuto) invece di introdurre nuove tonalità. Bloccare il primario e passare a Monocromatica con 7–10 colori ti dà questa scala.
Le modalità di armonia e quando funzionano
• Analoga: tonalità vicine. Calma, naturale, difficile da sbagliare. Adatta a siti di contenuti e a brand di benessere e alimentari. Serve un neutro a contrasto per il testo.
• Monocromatica: una tonalità, molti livelli di luminosità. La scelta più sicura per dashboard e app, dove il colore deve supportare i dati e non competere con essi.
• Complementare: due tonalità opposte. Massimo contrasto ed energia; usane una come colore principale e l'altra solo per le call to action, altrimenti sembra la divisa di una squadra.
• Complementare divisa: una tonalità più le due ai lati della sua opposta. Vivace quasi quanto la complementare ma con meno tensione; una buona scelta predefinita per i siti di marketing.
• Triadica e tetradica: tre o quattro tonalità equidistanti. Giocose e vivaci, adatte a prodotti per bambini, giochi e illustrazioni. Lascia dominare una tonalità e tieni piccole le altre.
• Casuale (gradevole): le tonalità si spostano di 20–70 gradi da un campione all'altro, con la luminosità distribuita sull'insieme. Utile per esplorare prima di impegnarti con una regola.
Come funziona l'estrazione dei colori da un'immagine
L'immagine caricata viene disegnata su un canvas di al massimo 200 pixel sul lato lungo. Il ridimensionamento fa la media dei pixel vicini, eliminando il rumore JPEG e le texture fini che altrimenti produrrebbero decine di colori quasi identici. I pixel completamente trasparenti vengono ignorati.
I pixel rimanenti vengono convertiti in OKLab e raggruppati con il clustering k-means, dove k è il numero di campioni. I centri di partenza sono scelti con una regola fissa (il pixel più vicino al colore medio dell'immagine, poi ogni volta il pixel più lontano da tutti i centri già scelti), quindi la stessa immagine dà sempre la stessa palette e le aree piccole ma distinte, come una giacca rossa in un paesaggio verde, non vanno perse. La media di ogni cluster diventa un campione, ordinato in base a quanta parte dell'immagine copre.
L'estrazione trova i colori presenti, non necessariamente quelli con cui progetteresti. Nelle foto dominano i mezzitoni smorzati, quindi blocca il colore o i due colori che catturano l'immagine e genera il resto, oppure fai clic sull'immagine per prelevare un punto luce specifico.
Strumenti gratuiti correlati
- Verifica contrasto — Controlla i colori di testo e sfondo secondo WCAG 2.x AA e AAA, leggi il valore APCA Lc e ottieni il colore più vicino che supera il test.
- Selettore e convertitore di colori — Preleva qualsiasi colore da qualsiasi punto dello schermo o converti all'istante tra HEX, RGB e HSL.
- Generatore di gradienti CSS — Crea gradienti lineari, radiali e conici con punti di colore trascinabili, una manopola per l'angolo e preset. Copia il CSS o una classe Tailwind.
- Generatore di box-shadow — Crea effetti box-shadow e text-shadow a più livelli con anteprima dal vivo e preset per elevazione, neumorfismo e bagliore, poi copia il CSS.