Adobe Color — бесплатный веб-сервис на сайте color.adobe.com, который строит гармоничные цветовые палитры из пяти оттенков по правилам цветового круга. Чтобы начать работу, достаточно открыть страницу в браузере: базовые функции доступны даже без учётной записи Adobe, а регистрация нужна только для сохранения палитр в библиотеки Creative Cloud. Инструмент одинаково полезен дизайнерам интерфейсов, иллюстраторам, SMM-специалистам и всем, кто подбирает сочетания цветов для сайта, презентации или бренда.
Сервис работает полностью в браузере — ничего устанавливать не требуется. Основные режимы: цветовой круг (Color Wheel), извлечение темы из изображения (Extract Theme), извлечение градиента и проверка доступности (Accessibility Tools). Ниже разберём каждый режим по шагам.
Регистрация и вход в сервис
Откройте в браузере адрес color.adobe.com. Если у вас уже есть учётная запись Adobe (например, от Photoshop или Illustrator), нажмите Sign In в правом верхнем углу и войдите. Без аккаунта можно строить палитры и копировать коды цветов, но кнопка сохранения в библиотеку будет недоступна.
Для нового аккаунта достаточно электронной почты: регистрация бесплатна и не требует подписки Creative Cloud. После входа все сохранённые палитры синхронизируются с программами Adobe — они появятся в панели Библиотеки (Libraries) в Photoshop, Illustrator и других приложениях, если вы вошли под той же учётной записью.
Цветовой круг: строим палитру по правилам гармонии
Основной экран сервиса — цветовой круг с пятью подвижными маркерами. Каждый маркер отвечает за один цвет будущей палитры, а их взаимное расположение определяется выбранным правилом гармонии в выпадающем списке слева. Перетаскивайте маркеры по кругу — все цвета перестраиваются автоматически, сохраняя заданные соотношения.
Доступные правила гармонии:
- 🎨 Аналоговая (Analogous) — соседние оттенки круга, мягкие спокойные сочетания для фонов и интерфейсов;
- ⚡ Комплементарная (Complementary) — противоположные цвета, максимальный контраст для акцентов и кнопок;
- 🔺 Триада (Triad) — три равноудалённых цвета, яркие сбалансированные палитры;
- ➗ Раздельно-комплементарная (Split Complementary) — контраст мягче классической комплементарной схемы;
- ◼️ Монохромная (Monochromatic) — вариации одного оттенка, строгий минималистичный стиль;
- 🧩 Пользовательская (Custom) — свободное перемещение всех маркеров без привязки к правилам.
Под кругом отображаются пять цветовых полос с кодами в форматах HEX, RGB, CMYK, HSB и LAB. Кликните по значку копирования рядом с нужным кодом — значение попадёт в буфер обмена. Чтобы «заморозить» один цвет и менять только остальные, нажмите на иконку замка под соответствующей полосой.
Извлечение палитры из фотографии
Режим Extract Theme (иконка изображения в верхней части страницы) позволяет загрузить фотографию и получить из неё готовую палитру из пяти цветов. Перетащите файл в окно браузера или выберите его через диалог загрузки — сервис автоматически разместит на снимке пять точек-пробников.
Каждую точку можно перетащить вручную, чтобы захватить именно тот оттенок, который нужен. Справа выбирается настроение извлечения: Colorful (красочное), Bright (яркое), Muted (приглушённое), Deep (глубокое), Dark (тёмное) — сервис перестроит подбор под выбранный характер сцены. Это удобно, когда палитра сайта должна сочетаться с конкретной фотографией товара или обложкой.
В соседнем режиме Extract Gradient из того же изображения строится плавный градиент: задайте количество промежуточных точек и скопируйте коды для CSS или графического редактора.
☑️ Проверка готовой палитры перед использованием
Проверка доступности: контраст и дальтонизм
Раздел Accessibility Tools решает две практические задачи. Первая — проверка контрастности: укажите цвет текста и цвет фона, и сервис покажет коэффициент контраста с оценкой соответствия рекомендациям WCAG для обычного и крупного текста. Если пара не проходит порог, подвиньте ползунки яркости или насыщенности, пока индикатор не станет зелёным.
Вторая функция — симуляция восприятия палитры людьми с различными формами нарушений цветовосприятия (дейтеранопия, протанопия, тританопия). Инструмент показывает, как ваши пять цветов увидят такие пользователи, и помечает оттенки, которые могут визуально «слипнуться». Если два ключевых цвета интерфейса совпадают при симуляции, их нельзя использовать как единственный способ различения элементов — например, для обозначения ошибок только красным цветом.
⚠️ Внимание: автоматическая проверка контраста оценивает только числовое соотношение цветов. Она не учитывает размер шрифта, толщину начертания и качество экрана пользователя — финальную читаемость всегда проверяйте на реальном макете.
Сохранение, экспорт и перенос в другие программы
Готовую палитру сохраняют кнопкой Save: задайте имя, добавьте теги и выберите библиотеку. После этого набор появится в панели Окно → Библиотеки (Window → Libraries) в приложениях Adobe при условии входа под тем же аккаунтом. Точное название пунктов меню может отличаться в зависимости от версии программы — сверяйтесь со справкой вашего приложения.
Способы переноса палитры:
- 📋 Копирование кодов
HEX/RGBвручную — универсально для Figma, Canva, CSS; - ☁️ Сохранение в библиотеку Creative Cloud — автоматическая синхронизация с Photoshop и Illustrator;
- 🔗 Кнопка Share — ссылка на палитру для коллег;
- 🖼️ Публикация в разделе Explore — палитра станет видна другим пользователям сервиса.
Как вставить палитру в CSS
Скопируйте HEX-коды и оформите их как переменные: :root { --color-main: #3A86FF; --color-accent: #FF006E; --color-bg: #F1FAEE; }. Затем используйте: color: var(--color-accent); Так смена всей палитры потребует правки только одного блока.
Галерея Explore и поиск готовых решений
Если строить палитру с нуля не хочется, откройте раздел Explore: там публикуются тысячи готовых тем от сообщества. Поиск работает по ключевым словам (например, «осень», «неон», «пастель») и по цвету — можно кликнуть по оттенку на мини-круге и получить все палитры, где он доминирует.
Любую найденную тему открывают в редакторе кнопкой Edit и дорабатывают под свою задачу: сдвигают маркеры, меняют правило гармонии, проверяют контраст. Это быстрый способ получить рабочую основу, когда дедлайн не оставляет времени на самостоятельный подбор.
Таблица режимов сервиса
| Режим | Назначение | Результат |
|---|---|---|
| Color Wheel | Построение палитры по правилам гармонии | 5 цветов с кодами HEX/RGB/CMYK |
| Extract Theme | Палитра из загруженного фото | 5 оттенков из изображения |
| Extract Gradient | Градиент из фотографии | Плавный переход с промежуточными точками |
| Accessibility Tools | Контраст и симуляция дальтонизма | Оценка по WCAG, предупреждения о конфликтах |
| Explore | Готовые палитры сообщества | Темы для редактирования и сохранения |
⚠️ Внимание: палитры из раздела Explore создаются другими пользователями. Перед коммерческим использованием чужой темы убедитесь, что её применение не нарушает условия сервиса и права автора — особенно если палитра повторяет фирменные цвета известного бренда.
Частые вопросы
Бесплатен ли Adobe Color?
Да, все основные функции — круг, извлечение из фото, проверка доступности, галерея — бесплатны. Платная подписка не требуется; учётная запись Adobe нужна лишь для сохранения палитр в библиотеки.
Работает ли сервис без интернета?
Нет, это веб-приложение, требующее подключения к сети. Зато сохранённые в библиотеку палитры после синхронизации доступны внутри настольных программ Adobe и при нестабильном соединении.
Как перенести палитру в Figma или Canva?
Прямой интеграции нет, поэтому коды копируют вручную: нажмите значок копирования рядом с HEX-значением каждого цвета и вставьте его в настройки заливки нужного элемента.
Почему палитра не появляется в Photoshop?
Проверьте, что в Photoshop выполнен вход под той же учётной записью Adobe, что и на сайте, и откройте панель «Библиотеки». Возможная причина задержки — синхронизация облака: подождите несколько минут или перезапустите программу.
Сколько цветов может быть в одной палитре?
Стандартная палитра состоит из пяти цветов — так устроены и круг, и извлечение из фото. Если нужно больше оттенков, создайте несколько связанных палитр или используйте режим градиента с дополнительными промежуточными точками.