Convertitore HSL Gratis: Convertire Colori HSL HEX RGB Online

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.

A Sono collegati ma non identici. L'HSL usa uno spazio a doppio cono dove la luminosità va dal nero al bianco. A L=50% ottieni la forma più pura della tinta. L'HSV usa un cono singolo dove la brillantezza scala dal nero al colore pieno. Un giallo puro corrisponde a HSL(60, 100%, 50%) ma HSV(60, 100%, 100%). Questo convertitore segue il modello HSL. Se importi valori dai cursori HSV di Photoshop, dovrai regolare saturazione e luminosità manualmente. Per il CSS, l'HSL corrisponde direttamente alla funzione moderna `hsl()`.

A Falso mito, ma no. Descrivono esattamente lo stesso colore: HSL(210, 50%, 40%) e il suo gemello HEX #336699 sono valori identici, scritti in modo diverso. La precisione dipende dallo schermo, non dalla notazione. Per le regolazioni, però, HSL vince: alzare la saturazione del 5% è più rapido che indovinare le cifre HEX. Esplora in HSL e copia il HEX alla fine.

A Molti insegnanti proiettano la nostra schermata per mostrare come la saturazione modifica la tonalità di base. Puoi far vedere in tempo reale che impostando la luminosità a zero si ottiene sempre il nero puro, rendendo la lezione più intuitiva.

A I reparti marketing richiedono codici precisi per grafica e volantini. Blocchi il colore principale inserendo il codice HEX per ricavare i valori HSL esatti nella guida di stile. I grafici possono aumentare la luminosità del 15 per cento per generare uno stato hover conforme. Condividi sempre questi codici con i tuoi partner esterni.