🎨 Convertitore di colori

Uno strumento completo di conversione colori per web designer e sviluppatori. Converti in tempo reale tra vari formati colore come HEX, RGB, HSL, HSV e visualizzali all'istante. Trova intuitivamente i colori desiderati con il selettore colore e i cursori, oppure lavora rapidamente con colori preimpostati.

Seleziona colore

Rosso (0-255) — 102

Verde (0-255) — 126

Blu (0-255) — 234

HEX

—

RGB

—

HSL

—

CMYK

—

Armonie cromatiche

Complementare

Analoghi

Triadico

Complementare diviso

Colori preimpostati

GUIDA

Scopri di piu

Che cos'è la conversione dei codici colore?

La conversione dei codici colore è il processo di traduzione tra diversi formati di rappresentazione del colore (HEX, RGB, HSL, HSV) usati nella progettazione digitale. È fondamentale nel web design, nella grafica e nello sviluppo di app. Ogni formato di codice colore ha vantaggi specifici, quindi è importante scegliere quello più adatto alla tua situazione.

Principali formati dei codici colore

HEX: formato #RRGGBB, il più usato sul web (ad esempio, #FF0000 è rosso). RGB: formato rgb(255, 0, 0), intervallo 0-255 per canale, supporta la trasparenza (rgba). HSL: formato hsl(0, 100%, 50%), regolazione intuitiva tramite tonalità/saturazione/luminosità. HSV: simile a HSL ma con un calcolo della luminosità diverso, usato soprattutto nei software di design.

Applicazioni per il web design

I codici HEX sono i più usati in CSS (come colori di brand ad esempio #3498db), mentre RGB è utile per il controllo dinamico dei colori con JavaScript. HSL è particolarmente comodo quando crei temi colore: cambiando solo la tonalità e mantenendo saturazione e luminosità, puoi generare facilmente palette coerenti.

Accessibilità e contrasto dei colori

Secondo le linee guida di accessibilità WCAG, il contrasto tra testo e sfondo è fondamentale. Il testo normale richiede un rapporto di contrasto minimo di 4.5:1, mentre il testo grande richiede 3:1. Quando usi un convertitore di colori, puoi regolare il valore di Luminosità per garantire un contrasto adeguato e una migliore leggibilità.

Armonia cromatica e palette

Metodi per creare palette armoniose: Monocromatico: cambia solo Saturazione/Luminosità con la stessa Tonalità. Analogo: varia la Tonalità entro 30 gradi. Complementare: Tonalità opposta a 180 gradi. Triadico: posiziona le Tonalità a 120 gradi l'una dall'altra (0°, 120°, 240°).

Suggerimenti per lo strumento di conversione colori

Fase di progettazione: usa HSL per la selezione dei colori (intuitivo). Scrittura CSS: usa HEX o RGB. Animazioni JavaScript: RGB/RGBA (controllo dell'opacità). Generazione palette: HSL (variazioni basate sulla tonalità). Compatibilità browser: HEX è la scelta più sicura. Archiviazione dei colori: documentali in tutti i formati.

Domande frequenti

Quale formato dovrei usare in CSS: HEX, RGB o HSL?

Tutti e tre rappresentano gli stessi colori, quindi uno qualsiasi va bene. HEX è comune per i colori fissi del brand, RGBA quando ti serve la trasparenza, e HSL è comodo quando vuoi modificare luminosità o saturazione mantenendo la stessa tonalità.

Convertire un codice colore cambia il colore reale?

No, cambia solo il modo in cui lo stesso colore viene scritto. Il colore visualizzato sullo schermo resta identico, anche se l'arrotondamento durante la conversione HSL/RGB può introdurre piccole differenze nei valori.

Come si calcola il colore complementare?

Si aggiungono 180 gradi al valore di Tonalità in HSL, ottenendo il colore direttamente opposto sulla ruota cromatica. Saturazione e Luminosità restano uguali, quindi il tono rimane coerente con il colore originale.

Che colore è quando R, G e B sono uguali (ad esempio 128,128,128)?

Valori uguali di R, G e B significano saturazione zero, cioè una tonalità di grigio. 0 è nero, 255 è bianco, e tutto ciò che sta in mezzo è un grigio con una luminosità diversa.

Cosa devo controllare per il contrasto del testo?

Confronta i valori di Luminosità dei colori del testo e dello sfondo. Il testo normale dovrebbe avere un rapporto di contrasto di almeno 4.5:1 rispetto allo sfondo.