Il Convertitore formati colore traduce qualsiasi colore tra HEX, RGB, HSL, HSV e OKLCH. Scegli un colore con il selettore nativo, digita un valore esadecimale, incolla qualsiasi stringa di colore CSS o regola i cursori RGB — ogni formato si aggiorna dal vivo e ognuno ha il proprio pulsante Copia.
Il CSS moderno offre una dozzina di modi per scrivere lo stesso colore: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), oltre alle varianti alpha di ciascuno. Spesso è necessario convertire tra di loro — un design Figma ti fornisce un OKLCH, la tua base di codice usa HEX e le variabili del tuo tema preferiscono HSL per le regolazioni dell'hover. Il Convertitore formati colore esegue tutte le conversioni in un unico pannello. Scegli un colore dal selettore nativo, incolla un colore esistente in qualsiasi sintassi o trascina i cursori RGB per impostarne uno. Ogni formato comune viene renderizzato simultaneamente: HEX (con alpha), rgb()/rgba(), hsl()/hsla(), hsv() e oklch() — oltre a uno snippet di variabile CSS e al valore di luminanza calcolato per calcoli rapidi di contrasto. Il canale alpha è supportato end-to-end. Ogni formato ha il proprio pulsante Copia per l'uso con un clic e il parser accetta nomi di colori nativi e tutto ciò che il CSS supporta.
Mostra HEX, RGB/RGBA, HSL/HSLA, HSV e OKLCH simultaneamente — scegli il formato che il tuo codice di destinazione si aspetta senza dover convertire ogni volta.
Accetta HEX (#abc, #aabbcc o #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() e nomi di colori nativi. Incolla tutto ciò che supporta il CSS.
Gestisce il nuovo formato OKLCH utilizzato nel CSS moderno — uno spazio colore percettivamente uniforme che sta diventando il nuovo standard per i design system.
Ogni output ha il proprio pulsante Copia. Clicca per prelevare esattamente il formato che ti serve per il tuo codice, nessuna selezione manuale richiesta.
Regola i cursori Rosso/Verde/Blu/Alpha per una sintonizzazione fine. Ogni formato si aggiorna in tempo reale mentre trascini.
La trasparenza è gestita in ogni formato: #RRGGBBAA, rgba(...), hsla(...). Impostata una volta, convertita ovunque.
Figma ti fornisce un OKLCH o HSL — incollalo, copia l'equivalente HEX per la tua configurazione Tailwind o variabili CSS senza lasciare il browser.
Trascina i cursori per esplorare le tonalità, annotando i valori OKLCH per una tavolozza di design system sistematica.
Converti un colore di marca nella sua forma HSL così puoi usare hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) per gli stati hover.
Il campo della luminanza ti fornisce il valore grezzo utilizzato nei calcoli del contrasto WCAG — utile per i calcoli di accessibilità.
Incolla un oklch(...) da un file CSS che stai leggendo e vedi istantaneamente quale colore produce effettivamente.
Clicca sull'icona Formati colore nel dock di DevSuite Pro. Si aprirà un pannello con un selettore di colori, input esadecimale e cursori RGB.
Usa il selettore di colori, digita un valore esadecimale o incolla qualsiasi stringa di colore CSS (rgb(...), oklch(...), ecc.). L'anteprima del colore è istantanea.
Ogni formato viene renderizzato in basso: HEX, RGB, HSL, HSV, OKLCH, variabile CSS e luminanza. Tutti rimangono sincronizzati mentre regoli.
Trascina i cursori R/G/B/A per regolazioni fini. Ottimo per individuare una tonalità specifica che corrisponda a una specifica di design.
Clicca su Copia nella riga del formato desiderato — il valore finisce negli appunti con la sintassi corretta.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
