$ tools/color-wheel

Ruota dei colori

Scegli un colore, scegli un'armonia — complementare, analoga, triadica e altro — e genera una palette coordinata. Hex, RGB, HSL e CMYK, clicca per copiare.

# Scegli un colore

luminosità50%
RGB
HSL
HSB
CMYK

$ Armonia

$ Palette

$ Come usare la ruota dei colori

Clicca ovunque sulla ruota per impostare il colore base — l'angolo sceglie la tonalità, la distanza dal centro imposta la saturazione. Usa il cursore della luminosità sotto per schiarirlo o scurirlo, oppure digita direttamente un codice hex. Poi scegli una regola di armonia a destra e la palette si aggiorna all'istante. Clicca un campione per copiarne l'hex, o prendi tutto l'insieme in una volta.

Cosa significano le armonie

La complementare usa il colore direttamente opposto sulla ruota per alto contrasto ed energia. L'analoga usa i vicini per una sensazione calma e coesa. La triadica spazia tre colori uniformemente per un set equilibrato ma vivace. La split-complementare ammorbidisce una coppia complementare. La quadrata e la tetradica ti danno schemi a quattro colori con più portata. La monocromatica e tinte & sfumature restano su una tonalità, variando solo la luminosità — perfette per UI pulite e minimali.

Perché conta per la tua app

Una palette coerente fa sì che i tuoi screenshot App Store, l'icona e il feature graphic sembrino un singolo prodotto invece di un mucchio di colori casuali. Scegli il colore del tuo brand, genera un'armonia e riusa quegli stessi hex nelle didascalie degli screenshot, sfondi e asset dello store.

$ FAQ

È gratis?

Sì — completamente gratis, senza registrazione, senza limiti. Gira interamente nel tuo browser.

Qual è la differenza tra HSL e HSB?

Entrambi descrivono tonalità e saturazione, ma il terzo valore differisce: HSL usa la luminosità (0% nero, 100% bianco), mentre HSB usa la brillantezza. I designer preferiscono spesso HSL per il web; HSB compare in strumenti come Photoshop. Questa ruota ti dà entrambi.

Posso partire dal mio colore brand?

Sì. Digita il tuo codice hex nella casella e la ruota e la palette si aggiornano per corrispondere. Poi scegli un'armonia per costruirci attorno.

Come uso la palette nel mio design?

Clicca un campione per copiarne l'hex, oppure usa "Copia tutti gli hex" / "Copia come variabili CSS" per prendere tutto l'insieme. Incolla direttamente nel tuo strumento di design o foglio di stile.

Altri strumenti colore

Ti piace LaunchShots?
Gratis per sempre — se ti ha fatto risparmiare tempo, puoi offrirmi un caffè.
Sostieni →
copiato ✓