appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/plJak Przekształcić Kolor Pobrany Aparatem w Zmienne CSS dla Twojej StronyLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Przechwyć prawdziwe kolory aparatem, konwertuj do HSL i twórz zmienne CSS oraz tokeny projektowe w minutach. Przewodnik krok po kroku.
ProjektowaniearticleAppStoryoDlaczego Projektanci Sięgają po Kolory z Realnego ŚwiataNajlepsze palety kolorów rzadko rodzą się na ekranie. Pochodzą z tkaniny definiującej tożsamość marki modowej, ściany sfotografowanej podczas podróży, która staje się głównym kolorem serwisu turystycznego, lub fizycznego produktu klienta, który musi być wiernie odwzorowany w cyfrze. Fizyczne materiały niosą emocjonalną autentyczność, którą syntetyczne próbki kolorów trudno odtworzyć.
Wyzwaniem zawsze był etap tłumaczenia: widzisz kolor, potrzebujesz kodu.
Podstawy Zmiennych CSSWłaściwości niestandardowe CSS — znane jako zmienne CSS — pozwalają zdefiniować wartość raz i używać jej wszędzie. Zadeklaruj je w :root, aby każdy element strony mógł je dziedziczyć:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}Zmień wartość w jednym miejscu, a aktualizacja rozprzestrzeni się na wszystkie komponenty, które jej używają.
Krok po Kroku: od Aparatu do Zmiennej CSSOtwórz Color Picker Camera: HEX RGB, skieruj kamerę na żywo na dowolny materiał — ścianę, opakowanie, drukowany katalog — i dotknij, aby zablokować kolor. Aplikacja natychmiast wyświetla wartości HEX, RGB i HSL. Skopiuj wartość HSL jednym dotknięciem.
Wklej ją bezpośrednio do arkusza stylów i wygeneruj pełną skalę, dostosowując tylko jasność:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}Tokeny Projektowe i Integracja z FigmąColor Picker Camera: HEX RGB umożliwia eksport zapisanej palety jako plik JSON — ten sam format, który plugin Tokens w Figmie i narzędzia takie jak Style Dictionary obsługują natywnie. Funkcja harmonii kolorów sugeruje warianty komplementarne i triadyczne od razu po pobraniu koloru, umożliwiając zbudowanie kompletnej palety przed otwarciem laptopa.
Pełny przepływ pracy — przechwytywanie aparatem, eksport JSON, zmienne CSS — skraca dystans między fizycznym światem a arkuszem stylów do zaledwie kilku minut.
Pobierz Color Picker Camera: HEX RGB za darmo na iOS lub Android — bez reklam, bez śledzenia i działa całkowicie offline.