Cos'e' Convertitore di Colori?
Un convertitore colore è uno strumento indispensabile per sviluppatori web, grafici e chiunque lavori con colori digitali.
Quando Usare Questo Calcolatore
- Stai convertendo una specifica colore da designer di Figma o Sketch in valori compatibili con CSS.
- Stai creando un design system.
- Stai creando una palette colori con HSL.
- Stai verificando l'accessibilità rispetto agli standard WCAG.
- Stai convertendo un vecchio valore colore in un formato diverso.
- Stai debuggando problemi di colore CSS e verificando come appare effettivamente un colore.
Passaggi:
- Inserisci un valore colore in qualsiasi formato.
- Seleziona il formato di input con le schede HEX / RGB / HSL.
- Vedi i valori convertiti nei tre formati sotto il campo di input.
- Copia il valore desiderato con il pulsante di copia.
- Controlla il badge di contrasto WCAG per l'accessibilità.
Formula
HEX → RGB: Dividi #RRGGBB in valori decimali
RGB → HSL: Normalizza RGB → Trova Tonalità/Saturazione/Luminosità
HSL → RGB: Usa la formula di crominanza per convertire
Casi d'Uso
- Convertire valori di colore CSS
- Creare palette colori da un colore base
- Abbinare colori del sistema di progettazione
- Comprendere le relazioni colore con HSL
Vantaggi Principali
- Conversione istantanea e precisa tra formati HEX, RGB e HSL
- Anteprima colore in vivo in tempo reale mentre scrivi
- Badge automatici AA e AAA per verifica contrasto WCAG
- Accesso a uno storico conversioni con i tuoi colori recenti
- Copia qualsiasi valore formato con un clic
- Funziona completamente nel tuo browser senza inviare dati ai server
Consigli Pro
- Usa HSL per creare variazioni colore
- Usa sempre HEX in CSS e HTML
- Verifica la tua scelta colore con i requisiti di contrasto WCAG
- Definisci la tua palette base in HSL quando crei un design system
- Ricorda che i valori HEX non sono case-sensitive
Errori Comuni da Evitare
- Dimenticare il prefisso # quando si inseriscono colori HEX
- Usare valori di canale RGB fuori dall'intervallo 0-255
- Confondere l'intervallo di tonalità HSL con l'intervallo di canale RGB
- Supporre che la luminosità HSL e la luminosità RGB siano equivalenti
Termini Chiave Spiegati
- HEX: Una notazione colore esadecimale usata in CSS e design web, scritta come #RRGGBB.
- RGB: Il modello colore Rosso-Verde-Blu dove ogni colore è definito da tre valori numerici.
- HSL: Il modello colore Tonalità-Saturazione-Luminosità.
- Spazio colore: Un modello matematico per organizzare e rappresentare i colori.
- Rapporto contrasto WCAG: Una misura numerica della differenza di luminosità tra il colore di primo piano e lo sfondo.
Concetti correlati
- Convertitore unità CSS: Converti px, rem, em, vw e altre unità CSS.
- Encoder/Decoder Base64: Codifica e decodifica stringhe Base64.
- Formattatore JSON: Formatta e valida dati JSON.
- Tester Regex: Testa espressioni regolari contro testo di esempio
- Encoder/Decoder URL: Codifica e decodifica stringhe URL-safe.
Esempio
Input: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Input: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.
Interpretazione dei risultati
Il convertitore mostra il tuo colore in tre formati simultaneamente. HEX è il formato più comune per lo sviluppo web. RGB offre controllo diretto sui canali colore. HSL è il più naturale per la comprensione umana.