Generatore di palette di colori

Genera una palette di colori in cinque modi diversi

Questo generatore di palette di colori sostituisce una serie di strumenti separati. Premi Genera per una palette casuale, scegli un'armonia cromatica da un colore base, estrai colori da un'immagine o foto, espandi un singolo codice hex in uno schema completo, oppure trasforma un nome colore o parola in una palette riproducibile. Imposta tra 3 e 10 colori, blocca quelli che ti piacciono e rigenera gli altri — senza account e nulla esce dal tuo browser.

Clicca su qualsiasi campione per copiarne il valore, passa tra HEX, RGB e HSL, e trascina i campioni per riordinarli. Premi Spazio per generare istantaneamente una nuova palette — lo stesso flusso che Coolors ha reso popolare, disponibile qui senza paywall.

Estrai colori da un'immagine, codice hex o nome

Da un'immagine: Trascina una foto e lo strumento la elabora su un canvas HTML5 nascosto usando un algoritmo di taglio mediano per estrarre i colori dominanti — utile per abbinare una palette a una foto prodotto, un'immagine del brand o una moodboard. L'immagine rimane sul tuo dispositivo e non viene mai caricata su server. Coolors addebita questo agli abbonati Pro; qui è gratuito.

Da un codice hex: Incolla un colore del brand e mantienilo come ancora mentre il generatore costruisce colori analoghi, complementari e varianti di tinta/ombra attorno ad esso. Da un nome: Digita qualsiasi parola e un hash deterministico genera la palette, così lo stesso nome produce sempre gli stessi colori — un'alternativa offline affidabile ai generatori di palette basati su AI che danno risultati diversi a ogni esecuzione.

Armonie cromatiche basate sulla vera teoria del colore

La modalità Armonia applica la teoria del colore ruotando la tonalità attorno alla ruota dei colori. I colori complementari si trovano a 180° per un contrasto marcato; i colori analoghi rimangono entro ±30° per un aspetto calmo e uniforme; il triadico usa tre tonalità a 120°; il tetradico usa quattro a 90°; lo split-complementare attenua lo scontro di contrasto a 150°/210°; e il monocromatico mantiene una tonalità e varia la luminosità nella palette.

Ogni colore generato viene anche fornito con una scala completa di tinte e ombre da 50 a 900 — i livelli più chiari e scuri necessari per gli stati hover, i colori dei bordi e le varianti di sfondo in un sistema di design dell'interfaccia reale.

Come si confronta UtiloKit con Coolors, Adobe Color e Paletton

Coolors è lo strumento di palette più popolare, con un eccellente flusso di blocco e rigenerazione e una grande community. Coolors Pro (4 $/mese) nasconde l'estrazione di immagini, l'esportazione avanzata e la cronologia delle palette dietro un paywall. L'esportazione nativa per Tailwind non è nel piano gratuito. Adobe Color fa bene la verifica dell'accessibilità WCAG e la visualizzazione delle armonie cromatiche, ma salvare le palette richiede un account Adobe gratuito e servono più clic per arrivare all'esportazione.

Paletton è forte nella teoria del colore ma mostra solo quattro tipi di armonia e non include l'estrazione di immagini. UtiloKit combina i punti di forza di tutti e tre — il blocco stile Coolors, il pannello WCAG di Adobe Color, l'estrazione di immagini e l'esportazione Tailwind/SCSS — senza account, senza paywall e senza pubblicità nello strumento.

Blocca i preferiti e continua a iterare

Le buone palette nascono dall'iterazione, non da una singola generazione. Blocca un campione e rimane fisso. Tutto ciò che è sbloccato viene rigenerato quando premi Genera o la Barra spaziatrice. Tieni il colore dominante che ti piace, mescola gli accenti e affina finché la palette completa non funziona — poi vai direttamente all'esportazione.

Puoi bloccare più colori contemporaneamente. Blocca il colore principale del tuo brand e uno sfondo neutro, poi lascia che lo strumento suggerisca gli accenti. Quando trovi accenti che funzionano, bloccali e rigenera le tonalità di supporto. Questo imita il modo in cui i designer creano palette manualmente, solo molto più velocemente.

Esporta in CSS, Tailwind, SCSS, JSON, PNG e link condivisibile

Quando la palette è pronta, esportala nel formato che il tuo progetto richiede. CSS genera un blocco :root di proprietà personalizzate. Tailwind genera un oggetto theme.extend.colors pronto da incollare in tailwind.config.js. SCSS genera dichiarazioni di $variabili compatibili con Sass. JSON elenca ogni colore in HEX, RGB e HSL per JavaScript o pipeline di token di design. Scarica un foglio di campioni in PNG per un documento di brand o una presentazione. Copia un link condivisibile che codifica la palette nell'URL in modo che un collaboratore apra esattamente quello che vedi tu.

Verifica del contrasto WCAG integrata

Una palette non è finita finché il testo su di essa non è leggibile. Il pannello contrasto mostra il rapporto di contrasto WCAG di ogni colore rispetto al testo bianco e nero, con badge di superamento/fallimento AA e AAA. WCAG 2.1 AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. AAA richiede 7:1 per il testo normale. La maggior parte degli strumenti di palette salta questo passaggio o lo mette dietro un livello premium — qui è integrato e funziona in tempo reale mentre generi o modifichi i campioni.

Nessuna registrazione, nessun caricamento, nulla esce dal tuo browser. Ogni operazione sulla palette — generazione casuale, estrazione di immagini, calcolo delle armonie, verifica del contrasto ed esportazione — viene eseguita in JavaScript locale. Aggiungi questo generatore di palette di colori gratuito ai preferiti per il web design, l'identità del brand, l'illustrazione, le presentazioni e le palette stagionali o matrimoniali.