Parti da un colore e genera armonie complementari, analoghe, triadiche e altro; poi esporta come CSS, Tailwind v4, SVG o PNG.
Guida alla teoria del colore
La ruota dispone le tonalità in cerchio così le relazioni diventano spaziali. La distanza significa contrasto, la vicinanza calma. Tutto qui sotto è interattivo: cambia la ruota e queste idee si fissano più in fretta.
Suggerimento: condividi ogni risultato — l’URL conserva sempre base, armonia e luminosità.
Una sola tonalità non basta mai per le interfacce. Mescolala col nero per le ombre (titoli, hover), col bianco per le tinte (sfondi, modali) e col grigio per i toni (testo tenue, bordi).
Indaco da ombra a tinta. La stessa logica muove ogni palette qui sopra.
Nella classica ruota RYB, rosso, giallo e blu sono primari; mescolandoli nascono arancione, verde e viola. A schermo mescoliamo luce (RGB), quindi lo strumento calcola in HSL/HSV: lo stesso cerchio, tarato per i pixel.
Twelve stops around the disc; every other color contains a trace of a primary.
Ease Colors è una ruota dei colori online e gratis per designer e sviluppatori che hanno bisogno di colori affidabili senza lasciare il browser. Scegli un colore base nel selettore a ruota interattivo, visualizza sei armonie insieme e copia codici HEX, RGB, HSL o OKLCH pronti per la produzione. Nulla viene caricato sui server, nessun account da creare, e ogni risultato riceve un URL condivisibile che ripristina colore base, armonia e luminosità esatti. Una rampa di sfumature integrata estende ogni colore base dal chiaro allo scuro, e l’intera pagina si usa da tastiera, con focus visibile a ogni passo.
La ruota dei colori è un diagramma circolare delle tinte dove i colori sono ordinati per rendere spaziali le relazioni: i vicini calmano, gli opposti creano tensione. La classica ruota dei primari delle lezioni d’arte mescola pittura rossa, gialla e blu, mentre la ruota RGB del tuo schermo mescola luce. Questo strumento calcola ogni armonia nello spazio HSV/HSL, tarato sui pixel invece che sul pigmento. Trascina un punto sul disco per fissare la tinta, avvicinalo al bordo per la saturazione e ruota l’anello esterno di luminosità per portare una stessa tinta dallo sfondo chiaro al testo scuro. Poiché il disco è sempre disegnato a massima vivezza, gli indicatori restano distribuiti e trascinabili anche con palette quasi nere o quasi bianche — la geometria non collassa mai agli estremi.
Questa ruota dei colori online è anche un selettore colori online e uno strumento colore completo:
In cerca di direzioni? Premi Shuffle nella galleria delle palette per un giro casuale tra oltre 400 set selezionati.
Prima di pubblicare, avvia la simulazione del daltonismo per visualizzare protanopia, deuteranopia, tritanopia e acromatopsia, e mantieni il testo leggibile con etichette a contrasto automatico su ogni striscia.
Ogni selettore colori di questa pagina parla quattro formati. Il campo esadecimale accetta qualsiasi codice come #EDEA37, il selettore RGB legge triplette come rgb(99, 102, 241), e HSL più OKLCH coprono l’uniformità percettiva fuori portata del solo RGB. I team front-end ricevono un flusso selettore HTML e selettore CSS pronto all’uso: esporta variabili CSS, token tema Tailwind v4, oggetto di configurazione Tailwind v3, JSON Figma o solo i codici. Il contagocce da schermo integrato (EyeDropper) campiona qualsiasi pixel del tuo monitor, e i punti della ruota di selezione restano trascinabili a qualsiasi luminosità. Questo selettore colori online è gratis, con esportazioni con alfa che coprono ogni uso RGBA. La modalità personalizzata congela qualsiasi set generato in un elenco modificabile a mano: schiarisci o scurisci un campione, trascina per riordinare, inserisci un medio miscelato o estendi un’estremità — ogni modifica riflessa subito nell’URL condivisibile.
Fotografi e brand designer ricorrono al selettore colori da immagine per prendere in prestito palette dal mondo reale. Carica una foto — o incolla l’URL di un’immagine — e il selettore da immagine mostra una lente con griglia di pixel e mirino, per leggere il pixel esatto che punti, anche al zoom 800%. Blocca il colore, copialo come HEX, RGB, HSL o OKLCH e invialo alla ruota con un clic. Regola la palette estratta da due a dieci colori, scarica la striscia come PNG o conservala nel vault del browser per riaprirla dopo. Ogni immagine che apri resta sul tuo dispositivo — nulla viene caricato.
Quando un campione non basta, il generatore di palette di colori costruisce una palette pronta da immagine in secondi. Valuta i pixel per frequenza e saturazione, filtra i quasi-duplicati e ordina i vincitori per tinta — da due a dieci colori da riordinare, estendere ed eliminare. Chi ritocca ritratti apprezzerà i set dedicati alle tonalità della pelle, accanto alle collezioni pastello, blu e verdi. Salva i preferiti nel vault del browser, scarica qualsiasi palette di colori come PNG o SVG ed esporta token per la consegna. Le manopole trascinabili viaggiano sull’immagine nei loro punti di campionamento: ricampionare un colore diventa un trascinamento, non un’ipotesi.
Una ruota complementare accoppia tinte a 180° per la massima tensione — arancione contro blu, viola contro giallo. La striscia dei complementari segna il tuo colore base con un punto nero, per vedere esattamente quale campione riservare a pulsanti e link mentre la tinta dominante guida il layout. Le rotazioni divisa, triadica, tetradica e quadrata la affiancano nel pannello delle armonie come alternative più morbide o audaci.
Dodici sistemi di analisi stagionale vivono nella galleria — diciassette palette ciascuno. I brief caldi e soft partono dalla palette autunno soft, e quelli freddi e soft puntano alla palette estate soft. I set ad alta calidità della palette autunno servono campagne autunnali e food brand, e la palette inverno profondo consegna brilli gioiello su quasi-nero per lusso e sera. I design chiari e caldi pescano dalla palette primavera chiara, il minimalismo arioso dalla palette estate fredda e il lavoro scuro opulento dalla palette autunno profondo. Il contrasto glaciale appartiene alla palette inverno freddo, il calore brillante alla palette primavera calda, i mezzi toni morbidi alla palette estate vera e il lusso silenzioso alla palette neutra. Atmosfere più ampie di estate, inverno, primavera e autunno completano oltre 400 set, ciascuno con copia HEX, RGB, HSL e OKLCH in un clic.
Se sei arrivato cercando Adobe color wheel, Adobe color picker, Canva color wheel o Google color picker, conosci già il compito: trasformare un colore brand in un set equilibrato. Ease Colors copre lo stesso terreno — armonie, codici HEX/RGB/HSL/OKLCH, campionamento immagini ed export palette — gratis nel browser, con URL condivisibili e nessun account tra te e i campioni. Controlli keyboard-first, etichette per screen reader e modalità a movimento ridotto inclusi.
Apri la ruota dei colori, prova il selettore da immagine o esplora oltre 400 palette di colori. La tua prossima palette è a un trascinamento.
Fai clic su un campione. Cambia formato in HEX, RGB, HSL o OKLCH prima di copiare.
Premi “Copia link”. L’URL codifica colore base, armonia e luminosità.
Sì. Ogni HEX, token ed export è tuo — senza attribuzione.
La ruota dei colori è un diagramma circolare che ordina le tinte per rendere spaziali le relazioni: i colori vicini calmano, mentre gli opposti creano tensione. A lezione d’arte si insegna una ruota rosso-giallo-blu per mescolare pittura; gli schermi usano una ruota RGB che mescola luce. I designer la usano per scegliere colori base, costruire armonie e verificare il contrasto prima che una palette arrivi al layout.
Parti da un colore base — digita un codice HEX, apri il selettore di sistema o campiona il tuo schermo. Scegli un’armonia come analoga, complementare o triadica e regola la luminosità con l’anello esterno fino ad avere toni di sfondo, testo e accento. Copia ogni campione come HEX, RGB, HSL o OKLCH e incolla i codici in CSS, Tailwind o Figma.
Il suo scopo principale è combinare i colori senza tirare a indovinare. Invece di accoppiare a occhio, leggi la geometria: la distanza significa contrasto e la vicinanza significa calma. Questo dà a ogni interfaccia una gerarchia chiara — una tinta dominante, alcune di supporto e un accento riservato — così pulsanti, link e titoli cadono dove l’occhio li aspetta.
La letteratura di design di solito ne elenca otto: monocromatico (una tinta, più luminosità), analogo (vicini), complementare (opposti), complementare diviso (una base più due vicini del suo opposto), triadico (triangolo), tetradico o rettangolare (due coppie complementari), quadrato (quattro angoli) e acromatico o neutro (neri, bianchi e grigi). Questo strumento ne copre sei direttamente, più una modalità personalizzata per elenchi da due a otto colori.
Trascina un punto sul disco: l’angolo fissa la tinta e la distanza dal centro fissa la saturazione. Trascina l’anello esterno per fissare la luminosità senza toccare tinta né saturazione. Puoi anche digitare un valore HEX esatto, aprire la casella colori di sistema o scegliere qualsiasi pixel del tuo monitor con il selettore da schermo — tutti i metodi arrivano allo stesso colore base condivisibile.
Un selettore colori trasforma una scelta visiva in un valore esatto e riutilizzabile. Legge qualsiasi colore come codici HEX, RGB, HSL o OKLCH così designer e sviluppatori parlano la stessa lingua: ciò che clicchi è identico al bit che arriva in CSS, token Tailwind o stili Figma — senza approssimare tinte a occhio.
I tipi principali sono selettori a ruota o disco (tinta più saturazione a colpo d’occhio), selettori a cursori (canali RGB o HSL), campi HEX (valori diretti), contagocce o selettori da schermo (campionano il tuo monitor), selettori da immagine (lente su foto) e librerie di palette (set selezionati come la galleria da oltre 400 qui). Questo sito li combina tutti in un unico flusso.
Un codice colore è un valore di testo che descrive un colore esatto. HEX lo scrive come sei cifre esadecimali (#EDEA37); RGB elenca i canali rosso, verde e blu; HSL elenca tinta, saturazione e luminosità; OKLCH è un formato percettivo più nuovo dove passi numerici uguali sembrano ugualmente diversi. Tutti e quattro descrivono lo stesso campione — il formato cambia solo come lo leggi e modifichi.
Scegli un colore con la ruota, un cursore, il campo HEX o il selettore da schermo, e copialo nel formato richiesto dal tuo progetto — HEX per il web, RGB o RGBA per codice app, HSL per ritocchi rapidi, OKLCH per uniformità percettiva. Incolla il valore nel tuo foglio di stile, config Tailwind o tool di design, e conserva il link per ritrovare il colore esatto in un clic più tardi.
Una palette di colori mantiene tutte le superfici di un prodotto nello stesso linguaggio visivo. Assegna ruoli — sfondo, testo, accenti, stati — così le interfacce risultano coerenti invece di assemblate con campioni a caso. Una buona palette integra contrasto e gerarchia fin dall’inizio, il che significa meno correzioni di leggibilità e un brand più forte e riconoscibile.
I tipi comuni includono palette monocromatiche, analoghe e complementari costruite con geometria di ruota; palette pastello e neon definite dall’energia; palette stagionali secondo i sottotoni di pelle (da autunno soft a neutro); palette brand fissate sui colori aziendali; e palette estratte campionate da fotografie. La galleria qui le riunisce tutte — oltre 400 set in più di 60 categorie.
Parti da un colore base adatto all’atmosfera — caldo e soft, freddo e arioso, o scuro e drammatico. Espandilo con un’armonia e verificalo come lo vedranno gli utenti: contrasto del testo, accenti dei pulsanti e simulazione daltonismo per protanopia, deuteranopia e tritanopia. Se supera tutte e tre, condividi il link e pubblica.