Convertitore HSL Gratis: Convertire Colori HSL HEX RGB Online

A RGB per canali. HSL per tonalità/saturazione/luminosità, più intuitivo.

A Mantieni H e S, cambia L. L=90% chiaro, L=50% normale, L=10% scuro.

A Spostare il cursore della Luminosità al 100% risulterà sempre in bianco, indipendentemente dai valori di Tonalità o Saturazione selezionati. La luminosità massima lava completamente qualsiasi colore. Vedrai il codice HEX cambiare in #FFFFFF e i valori RGB diventare 255, 255, 255. È un modo rapido per reimpostare un colore al suo stato più luminoso.

A Ogni monitor riproduce i colori in modo diverso. Un valore HSL vivido sul tuo display calibrato potrebbe apparire spento su un laptop non calibrato. Non è un difetto dello strumento — è una questione hardware. Prova il tuo colore su almeno due dispositivi prima di finalizzare un progetto. Per il web, includi nel CSS sia i valori HEX che RGB come fallback per ridurre le differenze tra schermi.

A Non direttamente — questo strumento non ha un pulsante di salvataggio né una funzione di esportazione. Ma puoi farlo da solo in due secondi. Copia il codice HEX che si aggiorna in tempo reale mentre muovi i cursori e incollalo nel tuo software di design, in un file CSS o in un'app note. Ti consiglio di tenere aperto un documento separato per raccogliere la tua palette mentre esplori diverse combinazioni HSL.

A Questo convertitore HSL non gestisce la trasparenza alpha — produce solo colori pieni. Se ti serve opacità, abbina i codici HEX o RGB ottenuti a un canale alpha separato in CSS, tipo rgba(255, 100, 50, 0.7). Lo strumento si concentra sui colori opachi, coprendo tranquillamente il 90% delle esigenze progettuali.

A Non direttamente in questo convertitore — non include un controllo contrasto. Ma c'è un trucco: imposta il colore di sfondo con i cursori, copia il suo codice HEX, poi fai lo stesso per il colore del testo. Inserisci entrambi i valori HEX in un calcolatore di contrasto WCAG gratuito online. Serve almeno un rapporto di 4.5:1 per testo normale e 3:1 per testo grande. Tengo sempre aperta una scheda di controllo contrasto quando scelgo colori per un marchio.

A Sì, ma la miscelatura la devi fare tu. Scegli il primo colore con i cursori, copia il suo codice HEX, poi regola i cursori per il secondo colore. Per una sfumatura CSS fluida, mantieni le tinte entro 30 gradi di differenza e varia la luminosità almeno del 20%. Un trucco efficace: imposta entrambe le saturazioni tra 50-70% per transizioni ricche. Incolla entrambi i codici HEX nella proprietà gradiente, ad esempio 'background: linear-gradient(#HEX1, #HEX2)'.

A Quel range non è arbitrario: si allinea con il concetto originale della ruota dei colori. Il rosso è a 0°, il verde a 120° e il blu a 240°, quindi 360° torna perfettamente al rosso. So che passare ogni singolo grado sembra esagerato, ma ti dà una precisione assoluta. Per la maggior parte dei lavori di design, incrementi di 5 o 10° sono più che sufficienti. Prova a tenere premuto Shift mentre trascini il cursore: scatterà automaticamente su questi passi più grandi.

A Sì, ed è meglio che tirare a indovinare. Apri lo screenshot in un editor di immagini con il contagocce e campiona il pixel esatto che ti serve. Così ottieni un valore RGB. Inserisci quei tre numeri nei campi RGB del nostro convertitore e vedrai subito la scomposizione HSL insieme al HEX corrispondente. Funziona benissimo per estrarre colori da loghi, foto o mockup UI. Un consiglio: fai lo screenshot al 100% di zoom, altrimenti catturi pixel anti-aliased che alterano il colore.