Warum Designer Farben aus der echten Welt nehmen

Die 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 Minute

CSS 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-Integration

Color 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.