appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/frComment Transformer une Couleur Capturée par Caméra en Variables CSS pour Votre SiteLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Capturez des couleurs réelles, convertissez-les en HSL et créez des variables CSS et design tokens en minutes. Guide étape par étape.
DesignarticleAppStoryoPourquoi les Designers Puisent dans le Monde RéelLes meilleures palettes naissent rarement sur un écran. Elles viennent d'un tissu qui définit l'identité d'une marque de mode, d'un mur photographié lors d'un voyage qui devient la couleur principale d'un site de voyage, ou d'un produit physique qu'il faut retranscrire fidèlement dans le numérique. Les matériaux physiques portent une authenticité émotionnelle que les swatches synthétiques peinent à reproduire.
Le défi a toujours été la traduction : vous voyez la couleur, vous avez besoin du code.
Les Variables CSS en Une MinuteLes propriétés personnalisées CSS — appelées variables CSS — permettent de définir une valeur une fois et de la réutiliser partout. Déclarez-les dans :root pour que chaque élément de la page puisse les hériter :
:root {
--color-brand-500: hsl(220, 60%, 45%);
}Modifiez la valeur en un seul endroit et la mise à jour se répercute sur tous les composants qui l'utilisent.
Étape par Étape : de la Caméra à la Variable CSSOuvrez Color Picker Camera: HEX RGB, pointez la caméra en direct sur n'importe quel matériau — un mur, un emballage, un catalogue imprimé — et appuyez pour fixer la couleur. L'application affiche immédiatement les valeurs HEX, RGB et HSL. Copiez la valeur HSL en un seul geste.
Collez-la directement dans votre feuille de styles et générez une gamme complète en ajustant uniquement 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 Tokens et Intégration avec FigmaColor Picker Camera: HEX RGB permet d'exporter votre palette sauvegardée sous forme de fichier JSON — le même format utilisé par le plugin Tokens de Figma et par des outils comme Style Dictionary. La fonction d'harmonies de couleurs suggère des variantes complémentaires et triadiques dès la capture, pour construire une palette complète avant même d'ouvrir votre ordinateur.
Le flux complet — capture par caméra, export JSON, variables CSS — réduit la distance entre le monde physique et votre feuille de styles à quelques minutes seulement.
Téléchargez Color Picker Camera: HEX RGB gratuitement sur iOS ou Android — sans publicité, sans pistage, et l’appli fonctionne entièrement hors ligne.