Scegli un colore o inserisci valori in qualsiasi formato. Converte istantaneamente tra HEX, RGB e HSL con un'anteprima live e copia con un click.
Ottieni l'accesso alla nostra suite completa di strumenti SEO locali, monitoraggio del posizionamento e ottimizzazione basata su AI.
Registrati GratisIl colore è uno degli elementi di design più potenti sul web, e scegliere il formato giusto per il tuo CSS può fare una reale differenza nell'efficienza del flusso di lavoro. I tre formati di colore più usati — HEX, RGB e HSL — rappresentano tutti lo stesso spettro di oltre 16 milioni di colori, ma differiscono significativamente per quanto siano intuitivi da leggere e manipolare. I codici HEX come #3b82f6 sono compatti e onnipresenti nel CSS, mentre i valori RGB come rgb(59, 130, 246) mappano direttamente i canali rosso, verde e blu che il tuo schermo utilizza per renderizzare il colore.
L'HSL (Tonalità, Saturazione, Luminosità) è sempre più preferito dai designer perché si allinea al modo in cui gli esseri umani pensano naturalmente al colore. Invece di mescolare valori di canale astratti, scegli una tonalità sulla ruota dei colori (0-360 gradi), imposti la sua intensità con la saturazione (0-100%) e controlli la luminosità con la luminosità (0-100%). Questo rende banale creare palette armoniose: mantieni la tonalità costante e varia saturazione e luminosità per produrre tinte, sfumature e tonalità dello stesso colore. Le proprietà personalizzate moderne del CSS funzionano particolarmente bene con l'HSL, permettendoti di definire una tonalità di base e derivare un'intera palette da essa.
Scegliere colori che siano esteticamente gradevoli è solo metà dell'equazione — devono anche essere accessibili. Le Web Content Accessibility Guidelines (WCAG 2.1) richiedono un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. Circa l'8% degli uomini e lo 0.5% delle donne presenta qualche forma di deficit della visione dei colori, quindi fare affidamento esclusivamente sul colore per trasmettere informazioni è una trappola comune di accessibilità. Associa sempre le tue scelte di colore a un verificatore di contrasto e considera come il tuo design appare sotto filtri di simulazione daltonismo. Questo convertitore ti aiuta a iterare rapidamente sui valori di colore così da poter testare diverse combinazioni e trovare il perfetto equilibrio tra estetica e leggibilità.