Selettore di Colori
Scegli qualsiasi colore e copia all'istante il suo valore in formato HEX, RGB o HSL.
Cos'è un selettore di colori?
Un selettore di colori è uno strumento digitale che consente di scegliere visivamente una tinta e convertirla istantaneamente in codici cromatici formattati per lo sviluppo web. Indispensabile per designer e programmatori frontend per mantenere coerenza visiva.
Caratteristiche principali
- Selezione visuale fluida: Trascina il cursore sull'area cromatica per calibrare saturazione e luminosità.
- Copia rapida: Valori HEX, RGB e HSL pronti per essere incollati direttamente nei tuoi file CSS o Tailwind.
- Riservatezza totale: Tutto viene eseguito localmente nel browser tramite HTML5 Canvas, senza trasferimenti a server esterni.
Strumenti correlati
Per estrarre colori da foto o schermate, usa il nostro Selettore da Immagine. Per controllare l'accessibilità del testo rispetto allo sfondo, scopri il Verificatore di Contrasto WCAG.
Knowledge Base & FAQ
Domande Frequenti (FAQ)
Risposte dirette e soluzioni a dubbi comuni, sfide tecniche e standard di settore.
Come si calcola il colore complementare, analogo o triadico esatto da un codice HEX?expand_more
Il calcolo delle armonie cromatiche si basa sulle rotazioni angolari sulla ruota dei colori a 360 gradi:
- Complementare: Ruota la tonalità di 180° (es:
(hue + 180) % 360). Un blu a 240° si abbina a un arancione vivace a 60°. - Analogo: Ruota di ±30°. Un verde a 120° si armonizza con verde mela (90°) e verde acqua (150°).
- Triadico: Ruota di +120° e +240° formando un triangolo equilatero vibrante ed equilibrato.
Che cos'è un codice HEX a 8 caratteri (#RRGGBBAA) e come si legge?expand_more
Un codice esadecimale a 8 caratteri (come
#4F46E580) include un canale alfa (trasparenza). I primi 6 caratteri definiscono Rosso, Verde e Blu (#RRGGBB), mentre il 7° e l'8° definiscono l'opacità da 00 (0% / completamente trasparente) a FF (100% / opaco). Il valore 80 in base 16 equivale a 128 in decimale, ovvero il 50% di opacità.Qual è la differenza tra HSV (HSB) e HSL nei selettori di colore?expand_more
Sebbene entrambi derivino da RGB:
- HSV / HSB (Tonalità, Saturazione, Valore/Luminosità): Definisce la luminosità in base al canale cromatico più intenso. È il modello standard nei riquadri 2D di software come Figma o Photoshop.
- HSL (Tonalità, Saturazione, Chiarezza): Distribuisce la luce simmetricamente (0% nero, 50% colore puro, 100% bianco) ed è nativamente supportato nei CSS con
hsl().
Come creare tinte chiare (tints) e scure (shades) armoniose per un brand?expand_more
Per ottenere scale coerenti:
- Tinte chiare (Tints): Mantieni costante la tonalità, aumenta la chiarezza verso il 100% e riduci leggermente la saturazione per non creare un effetto slavato fluorescente.
- Tinte scure (Shades): Riduci la chiarezza verso lo 0% ruotando lievemente la tonalità verso colori più freddi (indaco o blu notte) anziché aggiungere semplicemente nero opaco.