Почему Дизайнеры Берут Цвета из Реального Мира

Лучшие цветовые палитры редко рождаются на экране. Они приходят из ткани, определяющей идентичность модного бренда, стены, сфотографированной в путешествии и ставшей основным цветом туристического сайта, или физического продукта клиента, который нужно точно воспроизвести в цифровом пространстве. Физические материалы несут эмоциональную подлинность, которую синтетические образцы едва могут воспроизвести.

Сложность всегда заключалась в переводе: вы видите цвет, вам нужен код.

Основы CSS-Переменных

CSS-кастомные свойства — известные как CSS-переменные — позволяют определить значение один раз и использовать его везде. Объявите их в :root, чтобы каждый элемент страницы мог их наследовать:

:root {
  --color-brand-500: hsl(220, 60%, 45%);
}

Измените значение в одном месте, и обновление распространится на все компоненты, которые его используют.

Шаг за Шагом: От Камеры к CSS-Переменной

Откройте Color Picker Camera: HEX RGB, направьте живую камеру на любой материал — стену, упаковку, печатный каталог — и нажмите, чтобы зафиксировать цвет. Приложение мгновенно показывает значения HEX, RGB и HSL. Скопируйте HSL-значение одним касанием.

Вставьте его прямо в таблицу стилей и создайте полную цветовую шкалу, изменив только яркость:

:root {
  --color-brand-900: hsl(220, 60%, 20%);
  --color-brand-500: hsl(220, 60%, 45%);
  --color-brand-100: hsl(220, 60%, 90%);
}

Дизайн-Токены и Интеграция с Figma

Color Picker Camera: HEX RGB позволяет экспортировать сохранённую палитру как JSON-файл — тот же формат, который нативно поддерживают плагин Tokens в Figma и инструменты вроде Style Dictionary. Функция цветовых гармоний предлагает комплементарные и триадические варианты в момент захвата цвета, позволяя создать полную палитру до открытия ноутбука.

Полный рабочий процесс — захват камерой, экспорт JSON, CSS-переменные — сокращает расстояние между физическим миром и таблицей стилей до нескольких минут.

Скачайте Color Picker Camera: HEX RGB бесплатно для iOS или Android — без рекламы, без слежки и полностью офлайн.