# Selettore colori

> Ruota colori HSV, HSL e RYB, armonie pronte e conversione tra HEX, RGB, HSL, OKLCH e CMYK. Token Tailwind più vicino incluso. Gratis, senza installazione.

URL: https://acrafto.com/it/selettore-colori-online/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

Scegli un colore sulla ruota, affinalo sul quadro di saturazione e luminosità e leggilo in ogni formato che il tuo progetto usa, da `#RRGGBB` a `oklch()`. Lo strumento copre anche ciò che altri selettori di colore tralasciano: tre geometrie di ruota compresa la tradizionale ruota RYB dei pittori, armonie che costruiscono una palette da sole, un canale di trasparenza ed esportazione con un clic dell’intera palette come variabili CSS, SCSS o JSON. Tutto viene calcolato nel tuo browser.

## RYB o RGB? Tre ruote colore invece di una

Il selettore **Modalità ruota** cambia la disposizione delle tonalità sulla ruota:

- **HSV** e **HSL** sono ruote digitali. Le tonalità stanno dove le mescola la luce sullo schermo. Cambia il quadro: in HSV l’angolo più luminoso è la tonalità pura, in HSL le tonalità pure stanno a metà luminosità con il bianco sopra.
- **RYB (pittori)** dispone le tonalità come le imparano gli artisti: rosso, giallo e blu come primari, con arancione, verde e viola tra loro ([modello RYB su Wikipedia](https://it.wikipedia.org/wiki/Modello_di_colore_RYB)). La differenza si nota soprattutto nelle armonie. Sulla ruota RYB il complementare del rosso è il **verde** e il complementare del blu è l’**arancione**, le classiche coppie pigmentarie. Una ruota digitale abbina invece il rosso al ciano. Se una palette “complementare” di un selettore di colore comune ti è sempre sembrata sbagliata, ecco il motivo.

## Armonie di colore: una palette che si costruisce da sola

Nel campo **Armonia dei colori** scegli una regola. La ruota segna i colori abbinati e sotto compare la palette già pronta:

- **Complementare:** un colore opposto. Il contrasto più forte, adatto a un singolo accento accanto al colore principale del brand.
- **Complementare divisa:** i due vicini del complementare. Contrasto quasi uguale, ma più facile da bilanciare.
- **Triadica:** tre tonalità distribuite in modo uniforme. Vivace ma stabile, se una domina e le altre due si usano con parsimonia.
- **Tetradica (quadrato):** quattro tonalità. Schemi ricchi per illustrazioni e grafici, difficili da bilanciare nell’interfaccia di un’app.
- **Analoga:** i vicini più prossimi. Combinazione tranquilla per sfondi e sfumature.
- **Monocromatica:** una tonalità su più livelli di luminosità. La scelta più sicura per gli stati dei pulsanti (hover, attivo, disabilitato).

Copia l’intera palette con un clic nel formato che preferisci: **HEX** semplice, **RGB**, **HSL**, **OKLCH**, **variabili CSS** (`--color-1: …`) pronte da incollare, **variabili SCSS** o **JSON** per il codice. Per verificare se la palette mantiene il contrasto anche per chi distingue le tonalità con difficoltà, fai uno screenshot e passa alla [conversione in scala di grigi](https://acrafto.com/it/converti-immagini-in-scala-di-grigi-online/).

## Converti HEX, RGB, HSL, OKLCH e CMYK: incolla qualsiasi cosa, ottieni tutto

I campi di input accettano quasi ogni notazione di colore: `#f80`, `#ff8800`, esadecimale a otto cifre con trasparenza, `rgb()` e `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` e nomi di colore CSS come `rebeccapurple`. Qualunque cosa inserisci, ottieni sette output sincronizzati: **HEX, RGB, HSL, HSV, LCH, OKLCH e CMYK**, ciascuno con il proprio pulsante di copia.

Il cursore **Opacità (alfa)** sotto l’anteprima passa gli output alle forme trasparenti `#RRGGBBAA`, `rgba()` e `hsla()`. L’anteprima è disegnata su una scacchiera, così vedi subito la trasparenza.

## Il token Tailwind CSS più vicino a qualsiasi colore

Due etichette sotto l’anteprima nominano il colore: il **colore CSS con nome più vicino** (utile per prototipi rapidi) e il **token Tailwind più vicino**, per esempio `orange-500`. Resti così dentro il tuo design system invece di inventare valori estemporanei. Clicca su un’etichetta per copiarla.

Risolve la domanda che torna a ogni consegna di un progetto: il grafico mi ha mandato un codice hex, quale classe Tailwind gli corrisponde meglio? La corrispondenza è calcolata sulla palette predefinita di Tailwind CSS 4 (vedi la [documentazione di Tailwind](https://tailwindcss.com/docs/colors), in inglese), quindi puoi usare subito il token nel nome della classe.

## Quale formato di colore usare?

| Formato | Nome completo | Quando usarlo |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **La scelta predefinita per il web.** Corto, supportato ovunque, facile da copiare. Otto cifre aggiungono la trasparenza. |
| **RGB** | Red, Green, Blue | **Come ragionano gli schermi.** Tre canali di luce da 0 a 255. Il formato che la maggior parte delle API e del codice per canvas si aspetta. |
| **HSL** | Hue, Saturation, Lightness | **Per le modifiche a occhio.** “Un po’ più chiaro” o “meno saturo” significa cambiare un solo numero. |
| **HSV** | Hue, Saturation, Value | **Programmi grafici.** Il modello su cui si basano i selettori di colore di Photoshop e GIMP. |
| **LCH** | Lightness, Chroma, Hue | **Uniformità percettiva.** Gli stessi passi numerici sembrano gli stessi passi visivi, cosa che l’HSL simula soltanto. |
| **OKLCH** | OK Lightness, Chroma, Hue | **La scelta moderna per il CSS.** Corregge gli spostamenti di tonalità nei blu che affliggono l’LCH. Supportato da tutti i browser attuali, ideale per i design token. |
| **CMYK** | Cyan, Magenta, Yellow, Key | **Un riferimento per la stampa.** Conversione approssimativa per parlare con la tipografia, i valori finali dipendono dal suo profilo colore. |

Perché OKLCH sia percettivamente più uniforme dei modelli più vecchi lo spiega Björn Ottosson, che ha ideato lo spazio Oklab, nel suo [articolo originale](https://bottosson.github.io/posts/oklab/) (in inglese). Sintassi e supporto dei browser sono riassunti su [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (in inglese). Come funziona il modello di stampa lo spiega [Wikipedia alla voce CMYK](https://it.wikipedia.org/wiki/CMYK).

## Dettagli che fanno risparmiare tempo

- **La cronologia si salva da sola.** Gli ultimi 24 colori sopravvivono al ricaricamento della pagina. Restano solo nella memoria del tuo browser e non vengono mai inviati altrove.
- **Contagocce.** Nei browser con l’API EyeDropper (Chrome ed Edge) scegli un colore da qualsiasi punto dello schermo, anche fuori dalla finestra del browser. Ti serve il colore di una foto o di un file con un logo? Usa il [contagocce colore online](https://acrafto.com/it/selettore-colori-online-da-immagine/).
- **Controllo da tastiera.** La ruota e il quadro di saturazione e luminosità rispondono ai tasti freccia, così regoli il colore a piccoli passi.
- **I predefiniti** offrono i colori base più comuni quando ti serve solo un punto di partenza rapido.

## Domande frequenti

### Come converto OKLCH in HEX?

Incolla il valore `oklch()` nel campo OKLCH e tutti gli altri output, HEX incluso, si aggiornano subito. Funziona anche al contrario: inserisci un HEX e leggi l'`oklch()` corrispondente. Un'avvertenza: OKLCH può descrivere colori fuori dal gamut sRGB, che vengono ritagliati a ciò che sRGB può mostrare. Un `oklch()` molto saturo non apparirà quindi identico alla sua versione HEX su uno schermo a gamut ampio.

### Posso usare oklch() in CSS di produzione?

Sì. Tutte le versioni attuali di Chrome, Edge, Firefox e Safari supportano `oklch()`, diventato un formato diffuso per i design token (Tailwind CSS 4 vi definisce l'intera palette). Per i browser molto vecchi, metti un HEX di riserva sulla riga precedente. Questo strumento ti dà entrambi i valori.

### Perché le armonie cambiano quando passo alla ruota RYB?

Perché ciò che è "opposto" dipende da come sono distribuite le tonalità sul cerchio. La ruota RYB distribuisce i primari pigmentari in modo uniforme, quindi le coppie complementari corrispondono a ciò che sanno i pittori: rosso e verde, blu e arancione, giallo e viola. Le ruote HSV e HSL distribuiscono le tonalità secondo la mescolanza della luce, per questo abbinano il rosso al ciano. Nessuna delle due sbaglia: RYB segue l'educazione artistica tradizionale, HSV e HSL seguono ciò che fanno gli schermi.

### Posso fidarmi dei valori CMYK per la stampa?

Considerali un'indicazione. La conversione reale per la stampa dipende dal [profilo ICC](https://it.wikipedia.org/wiki/Profilo_ICC) della stampante, della carta e dell'inchiostro. Lo stesso colore RGB rende in modo diverso su carta patinata e non patinata. I valori qui usano la formula standard, che ti avvicina, ma la prova finale spetta alla tipografia.

### Dov'è il pulsante del contagocce in Firefox o Safari?

È nascosto di proposito. L'[EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN, in inglese) su cui si basa il pulsante è al momento disponibile solo nei browser basati su Chromium (Chrome, Edge, Opera). Tutte le altre funzioni dello strumento funzionano ovunque, manca solo la selezione dallo schermo. Se ti serve il colore di un'immagine, usa il [contagocce colore online](https://acrafto.com/it/selettore-colori-online-da-immagine/), che funziona in ogni browser.

### La mia cronologia dei colori resta privata?

Sì. La cronologia è salvata nel localStorage del tuo browser, sul tuo dispositivo. Nulla di ciò che scegli, incolli o copi viene inviato altrove. L'intero strumento gira come JavaScript nel browser, cosa che puoi verificare nella scheda Rete degli strumenti per sviluppatori.

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- ไทย (th): [วงล้อสี](https://acrafto.com/th/online-color-picker/) ([Markdown](https://acrafto.com/th/online-color-picker/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))