Selettore colori

Che cos’è un selettore colori?

Un selettore colori è uno strumento online che permette di scegliere visivamente i colori utili per web design, grafica e sviluppo UI/UX e di convertirli in formati come HEX, RGB e HSL. Con la ruota dei colori e il selettore di saturazione e luminosità puoi trovare subito la tonalità desiderata e, grazie al controllo dell’opacità (Alpha), puoi generare anche codici colore in formato RGBA e HSLA.

Lo strumento funziona direttamente nel browser, quindi non richiede l’installazione di software aggiuntivo. I browser che supportano l’API EyeDropper, come Chrome ed Edge, consentono di prelevare colori da qualsiasi area dello schermo, così puoi recuperare rapidamente tonalità da riferimenti grafici o immagini.

Quando usare questo strumento

• Sviluppo web – Trovare e copiare rapidamente codici colore precisi (HEX, RGB, HSL) da applicare ai fogli di stile CSS
• Design UI/UX – Comporre palette armoniose per pulsanti, sfondi e testi di app o siti web
• Grafica – Scegliere e combinare colori per poster, banner e contenuti social
• Identità del brand – Definire i colori del marchio per la tua azienda o il tuo progetto e documentarli in più formati
• Verifica dell’accessibilità – Controllare i valori colore per valutare meglio il contrasto tra testo e sfondo
• Estrazione da riferimenti – Prelevare direttamente colori da siti web o immagini che ti piacciono con EyeDropper
• Creazione di presentazioni – Trovare codici colore per mantenere un tema cromatico coerente in slide e materiali

Funzioni principali

• Selezione dalla ruota dei colori – Scegli in modo intuitivo la tonalità desiderata su una ruota a 360 gradi. Puoi esplorare i colori con fluidità trascinando il mouse o con il tocco.
• Selettore 2D di saturazione e luminosità – Regola insieme saturazione e luminosità in base alla tonalità scelta. Puoi passare liberamente da colori pastello luminosi a toni scuri e profondi.
• Slider Alpha per l’opacità – Regola l’opacità dallo 0% al 100% per creare colori semitrasparenti nei formati RGBA e HSLA. Utile per overlay e gradienti.
• Supporto per più formati colore – Converti e visualizzi HEX, RGB e HSL in tempo reale. Quando l’opacità è inferiore al 100%, il tool passa automaticamente a RGBA e HSLA.
• Prelievo colori dallo schermo con EyeDropper – In Chrome o Edge puoi fare clic in qualsiasi punto dello schermo per acquisire un colore direttamente. Puoi prelevare tonalità anche da immagini aperte in altre schede o dal desktop.
• Generazione automatica di armonie cromatiche – In base al colore selezionato vengono generate palette complementari, analoghe, triadiche e monocromatiche. È un modo semplice per trovare combinazioni armoniose seguendo la teoria del colore.
• Copia del codice CSS con un clic – Copia il colore selezionato come codice CSS nel formato color: #D4AF37;. Puoi scegliere tra HEX, RGB e HSL.
• Storico dei colori – Gli ultimi 20 colori selezionati vengono salvati automaticamente. Lo storico resta disponibile anche dopo la chiusura del browser, così puoi riutilizzare rapidamente colori già usati.

Come usare lo strumento

1. Seleziona la tonalità – Fai clic o trascina sulla ruota dei colori per scegliere la famiglia di colore di base, come rosso, arancione, giallo, verde, blu o viola.
2. Regola saturazione e luminosità – Nell’area quadrata sottostante spostati a sinistra o destra per la saturazione e in alto o in basso per la luminosità. L’angolo in alto a destra mostra il colore più vivido e luminoso.
3. Imposta l’opacità – Se ti serve un effetto semitrasparente, regola lo slider Alpha. Il 100% è opaco, lo 0% è completamente trasparente.
4. Controlla e copia i valori colore – Verifica i valori HEX, RGB e HSL nel pannello a destra e usa il pulsante di copia accanto a ogni formato per salvarli negli appunti.
5. Usa il codice CSS – Nella sezione dedicata in basso scegli il formato che preferisci (HEX/RGB/HSL) e usa “Copia CSS” per ottenere un codice pronto da incollare nel foglio di stile.

Capire la teoria del colore e le armonie cromatiche

Il principio della ruota dei colori

La ruota dei colori nasce dall’esperimento di Isaac Newton del 1666, quando scompose la luce con un prisma. Oggi si distinguono la ruota tradizionale RYB, basata su rosso, giallo e blu, e la ruota digitale RGB, fondata su rosso, verde e blu. Questo strumento usa il modello HSL (Hue, Saturation, Lightness), in cui la tonalità è espressa come un angolo da 0° a 360°.

HSL vs RGB vs HEX

• HEX (esadecimale) – È il formato più diffuso sul web. Rappresenta rosso, verde e blu come valori da 00 a FF (0-255) nel formato #RRGGBB. Esempio: #D4AF37 corrisponde a una tonalità oro.
• RGB (rosso, verde, blu) – Si basa sui tre colori primari della luce, con ciascun canale espresso da 0 a 255. In CSS si usa nel formato rgb(212, 175, 55).
• HSL (Hue, Saturation, Lightness) – È un modello vicino al modo in cui percepiamo i colori. Comprende tonalità (0°-360°), saturazione (0%-100%) e luminosità (0%-100%). È comodo quando vuoi regolare luminosità o intensità restando nella stessa famiglia di colore.

Tipi di armonie cromatiche

• Complementare – Due colori opposti sulla ruota dei colori. Creano un contrasto deciso e sono ottimi per attirare l’attenzione. Esempio: il complementare del blu (240°) è il giallo (60°).
• Analoga – Colori vicini tra loro sulla ruota. Si ritrovano spesso in natura e danno un’impressione armoniosa e gradevole. Esempio: arancione, giallo e verde lime.
• Triadica – Colori posizionati a distanza regolare, come se dividessero la ruota in tre parti uguali. Offrono un contrasto equilibrato ma più morbido rispetto ai complementari. Esempio: rosso, giallo e blu.
• Monocromatica – Colori che variano solo per saturazione e luminosità all’interno della stessa tonalità. Trasmettono un aspetto pulito e raffinato, molto usato nel brand design.

Usare l’opacità (Alpha)

Il canale Alpha regola l’opacità di un colore. Lo 0% è completamente trasparente, il 100% completamente opaco. I colori semitrasparenti sono molto usati nel web design per overlay, gradienti e stati hover. I formati RGBA e HSLA sono supportati da CSS3, mentre i codici HEX con trasparenza (#RRGGBBAA) sono gestiti dai browser moderni.

Informazioni sull’API EyeDropper

L’API EyeDropper è una Web API che permette di prelevare colori direttamente dallo schermo nel browser. Al momento questa funzione è supportata in Chrome 95+ ed Edge 95+. Firefox e Safari non la supportano ancora.

Con EyeDropper puoi acquisire colori non solo dalla scheda corrente, ma anche da altre schede, da altre applicazioni e perfino dal desktop. È molto utile quando vuoi ottenere rapidamente valori colore accurati da riferimenti grafici, siti concorrenti o foto che ti ispirano.

Suggerimenti d’uso

• Documenta i colori del brand – Dopo aver scelto i colori principali della tua azienda o del tuo progetto, annota tutti i valori HEX, RGB e HSL per mantenere coerenza tra web, stampa e video.
• Tieni conto dell’accessibilità – Quando scegli i colori di testo e sfondo, assicurati che ci sia una differenza di luminosità sufficiente. Le linee guida WCAG raccomandano un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande.
• Crea palette complete – Dopo aver scelto un colore principale, usa la funzione di armonie cromatiche per costruire facilmente palette professionali. In genere si usano un colore principale, uno o due secondari e un colore di accento.
• Sfrutta gli effetti semitrasparenti – Quando inserisci testo sopra immagini di sfondo, un overlay semitrasparente come rgba(0, 0, 0, 0.5) può migliorare molto la leggibilità.

Dettagli

I risultati di questo selettore colori vengono generati in base ai valori inseriti e alle opzioni selezionate.

Per decisioni finali, verifica sempre con linee guida ufficiali o con una revisione esperta.

Domande frequenti