Dlaczego Projektanci Sięgają po Kolory z Realnego Świata

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

Wł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 CSS

Otwó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.