appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/itCome Trasformare un Colore Catturato dalla Fotocamera in Variabili CSS per il tuo SitoLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Cattura colori reali, convertili in HSL e crea variabili CSS e design token in minuti. Guida passo passo con Color Picker Camera.
DesignarticleAppStoryoPerché i Designer Prendono i Colori dal Mondo RealeLe migliori palette di colori raramente nascono su uno schermo. Vengono da un tessuto che definisce l'identità di un brand di moda, da un muro fotografato durante un viaggio che diventa il colore principale di un sito di turismo, o da un prodotto fisico da riprodurre fedelmente nel digitale. I materiali fisici portano un'autenticità emotiva che i campioni sintetici faticano a replicare.
La sfida è sempre stata la traduzione: vedi il colore, hai bisogno del codice.
Variabili CSS in un MinutoLe proprietà personalizzate CSS — dette variabili CSS — permettono di definire un valore una volta e riutilizzarlo ovunque. Dichiarale in :root affinché ogni elemento della pagina possa ereditarle:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}Modifica il valore in un unico posto e l'aggiornamento si propaga in tutti i componenti che lo utilizzano.
Passo dopo Passo: dalla Fotocamera alla Variabile CSSApri Color Picker Camera: HEX RGB, punta la fotocamera in diretta su qualsiasi materiale — una parete, una confezione, un catalogo stampato — e tocca per bloccare il colore. L'app mostra immediatamente i valori HEX, RGB e HSL. Copia il valore HSL con un solo tocco.
Incollalo direttamente nel tuo foglio di stile e genera una scala completa modificando solo la luminosità:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}Design Token e Integrazione con FigmaColor Picker Camera: HEX RGB permette di esportare la palette salvata come file JSON — lo stesso formato consumato dal plugin Tokens di Figma e da strumenti come Style Dictionary. La funzione di armonie di colore suggerisce varianti complementari e triadiche nel momento in cui catturi il colore, così puoi costruire una palette completa prima ancora di aprire il laptop.
Il flusso completo — cattura con fotocamera, esportazione JSON, variabili CSS — riduce la distanza tra il mondo fisico e il tuo foglio di stile a soli pochi minuti.
Scarica Color Picker Camera: HEX RGB gratis per iOS o Android: senza pubblicità, senza tracciamento e funziona completamente offline.