appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/deWie du eine mit der Kamera aufgenommene Farbe in CSS-Variablen für deine Website verwandelstLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Erfasse reale Farben, wandle sie in HSL um und erstelle CSS-Variablen und Design Tokens in Minuten. Schritt-für-Schritt-Anleitung.
DesignarticleAppStoryoWarum Designer Farben aus der echten Welt nehmenDie besten Farbpaletten entstehen selten auf einem Bildschirm. Sie kommen von einem Stoff, der die Identität einer Modemarke definiert, von einer Wand, die auf einer Reise fotografiert wurde und zur Hauptfarbe einer Reise-Website wird, oder von einem physischen Produkt, das im Digitalen originalgetreu abgebildet werden soll. Physische Materialien tragen eine emotionale Authentizität, die synthetische Swatches kaum reproduzieren können.
Die Herausforderung war immer die Übersetzung: Du siehst die Farbe, du brauchst den Code.
CSS-Variablen in einer MinuteCSS Custom Properties — kurz CSS-Variablen — erlauben es, einen Wert einmal zu definieren und überall wiederzuverwenden. Deklariere sie in :root, damit jedes Element der Seite sie erben kann:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}Ändere den Wert an einer einzigen Stelle und die Aktualisierung breitet sich auf alle Komponenten aus, die ihn verwenden.
Schritt für Schritt: Von der Kamera zur CSS-VariableÖffne Color Picker Camera: HEX RGB, richte die Live-Kamera auf beliebiges Material — eine Wand, eine Verpackung, einen gedruckten Katalog — und tippe, um die Farbe einzufrieren. Die App zeigt sofort HEX-, RGB- und HSL-Werte an. Kopiere den HSL-Wert mit einem einzigen Tipp.
Füge ihn direkt in dein Stylesheet ein und erzeuge mit nur einer Lichtigkeitsanpassung eine vollständige Skala:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}Design Tokens und Figma-IntegrationColor Picker Camera: HEX RGB ermöglicht den Export gespeicherter Paletten als JSON-Datei — das gleiche Format, das Figmas Tokens-Plugin und Tools wie Style Dictionary nativ verarbeiten. Die Farbharmonien-Funktion schlägt komplementäre und triadische Varianten direkt bei der Aufnahme vor, sodass du eine vollständige Palette erstellst, bevor du deinen Laptop öffnest.
Der vollständige Workflow — Kameraaufnahme, JSON-Export, CSS-Variablen — verringert den Abstand zwischen der physischen Welt und deinem Stylesheet auf wenige Minuten.
Laden Sie Color Picker Camera: HEX RGB kostenlos für iOS oder Android herunter — ohne Werbung, ohne Tracking und komplett offline nutzbar.