Цвет на карточке маркетплейса — это не вкус, а технический параметр. Площадки прописывают конкретные hex-коды фона, требуют контраст текста не ниже 4.5:1 и срезают то, что не проходит. Покупатель решает за 3-5 секунд, а исследования цветовой психологии в e-commerce фиксируют: 84,7% решений о покупке покупатель принимает с опорой на цвет (Striven (1)). В этой статье — что писать в hex-полях, какую палитру брать под категорию и как подобрать всю систему за 10 минут без дизайнера. Общий обзор трендов дизайна (типографика, композиция, видеообложка) — в статье про дизайн карточки 2026.
Зачем выбирать цвета осознанно
Визуал на маркетплейсе решает за 3-5 секунд — Brand Analytics зафиксировал эту цифру по выборке больше 10 000 карточек WB (vc.ru (2)). За эти секунды покупатель не читает шрифты и не анализирует композицию — он считывает общее цветовое пятно карточки в плитке выдачи и решает, кликать или скроллить.
Цвет в этой схеме делает три вещи: даёт карточке шанс выделиться в плитке среди 50 соседей, формирует ожидание «дорого / дёшево / для меня / не для меня», и закрывает технические требования площадки. Дополнительный аргумент: высокий контраст между текстом и фоном может поднимать конверсию до 200% (Striven (1)). Поэтому цветовую систему карточки удобно проектировать как технический спек, а не как эстетический выбор.
Что говорит наука: цвет и решение о покупке
Цветовая психология в e-commerce — не «розовый продаёт лучше синего», а несколько устойчивых паттернов из исследований (Striven (1)).
Приоритет цвета. 84,7% покупателей называют цвет основным фактором решения о покупке. Цвет — первый фильтр: если он «не тот», до характеристик дело не доходит.
Контраст усиливает действие. Красные и оранжевые CTA-кнопки дают на 32-40% выше CTR против других цветов. На карточке прямой кнопки нет, но та же логика работает с акцентом — на шильдике «новинка», на иконке выгоды, на цифре характеристики.
Единая палитра снижает отказы. Согласованная цветовая система снижает отказы на 12%. Все 5-7 кадров серии — в одной системе. Первый кадр — пастель, третий — неон → мозг читает разрыв как «несерьёзный магазин».
Категорийные ассоциации. Синий — доверие и безопасность (важно для онлайн-транзакций). Красный — срочность и импульс. Зелёный — натуральность и здоровье. Ассоциации не универсальны, но устойчивы — игнорируете = теряете часть аудитории, которая ждёт «своего» цвета.
Что не работает: «волшебные» советы вроде «поменяйте кнопку на красный — продажи вырастут». Без A/B-теста любой выбор цвета — гипотеза. Психология даёт точку старта, не финальный ответ.
Цветовые требования площадок
У WB и Ozon требования к фону главного фото разные. Скопировать карточку с одной площадки на другую без правки фона — гарантированный возврат модерации.
Ozon
Фон главного фото регламентирован жёстко (docs.ozon.ru (3)):
- #f2f3f5 (светло-серый) — для «Одежды» и «Обуви».
- Чёрный — для белых и прозрачных предметов (стекло, прозрачный пластик, белая упаковка).
- Белый или светлый нейтральный — для остальных категорий.
#f2f3f5 — конкретный цвет, не «примерно серый». Проверяется пипеткой за секунду. Кадры серии (lifestyle, detail) могут иметь свободный фон — регламент только на главное.
Wildberries
Конкретного hex нет. Инструкция требует «нейтральный фон, без градиентов, посторонних предметов, надписей и водяных знаков» (seller.wildberries.ru (4)). Рабочая практика — белый, светло-серый, off-white, бежевый. Цветной фон не запрещён, но в плитке выдачи проигрывает белым конкурентам — глаз цепляется за товар, а не за рамку.
Я.Маркет
Фон нейтральный (белый / светлый), отдельное требование — цветовой профиль sRGB, иначе цвета на экране покупателя поплывут. Различия между площадками подробно — в гайде про карточку Ozon vs Wildberries.
Универсальная схема фонов
Если карточка идёт сразу на три площадки, рабочий минимум — три варианта главного фото:
Площадка Фон главного Применение WB белый (#ffffff) или светло-серый все категории Ozon — одежда/обувь #f2f3f5 только одежда и обувь Ozon — прозрачное чёрный стекло, прозрачный пластик Ozon — остальное белый / светлый нейтральный все остальные категории Я.Маркет белый, профиль sRGB все категории
Кадры серии (2-7-й) на всех трёх площадках можно унифицировать — там фон свободный.
Контраст 4.5:1: правило WCAG и зачем оно работает на маркетплейсах
Контраст текста к фону — это технический параметр, который пришёл в дизайн интерфейсов из WCAG (Web Content Accessibility Guidelines) и теперь применяется на карточках маркетплейсов. Правило простое: основной текст должен иметь контраст к фону не ниже 4.5:1 (W3C WAI (5)).
Откуда взялась цифра 4.5
Цифра выведена эмпирически: пользователи с остротой зрения 20/40 (распространённый порог нарушений зрения) комфортно читают текст начиная с этого контраста (TestParty (6)). Для крупного жирного шрифта (от 18pt или 14pt bold) достаточно 3:1.
Почему это работает именно на маркетплейсе
Сжатие при отдаче в выдачу. Карточка в плитке отдаётся уменьшенной и сжатой. Серый текст по светло-серому при сжатии превращается в нечитаемую полосу. 4.5:1 даёт запас, который переживает сжатие.
Мобильные экраны на солнце. Большая часть покупателей смотрит карточку с телефона. На солнце экран теряет до половины контраста — запас 4.5:1 это перекрывает.
Требование WB. Официальная инструкция Wildberries прямо ссылается на 4.5:1 для основного текста (seller.wildberries.ru (4)). Не пройти контраст — повод для возврата карточки на доработку.
Как проверить
Любой бесплатный сервис контраста: WebAIM Contrast Checker, Coolors Contrast Checker, встроенные инструменты Figma. Берёте hex-код цвета текста, hex-код фона, видите результат. Меньше 4.5 для основного текста — переделывать. Подробный разбор частых ошибок с контрастом — в статье про 10 ошибок в карточке товара.
Рабочие пары
Несколько комбинаций, которые гарантированно проходят 4.5:1 и часто используются на карточках:
Текст Фон Контраст Применение #111111 #ffffff 19.3:1 универсал, инфографика на белом #ffffff #111111 19.3:1 инверс, тёмная плашка #1a1a1a #f2f3f5 16.3:1 под Ozon-одежду #ffffff #d32f2f 5.9:1 акцентная плашка «новинка» #ffffff #1976d2 5.2:1 иконка-выгода, синий бренд
Соотношения проверены WebAIM Contrast Checker.
Палитры по категориям
В категориях аудитория ждёт определённой палитры. Игнорировать категорийный код = тратить кадр на «доказывать, что мы из этой ниши» вместо того, чтобы продавать.
Одежда
База — нейтрали: белый, off-white, светло-серый, бежевый. Акцент = цвет самого товара. На Ozon — обязательный #f2f3f5 на главном. Премиум — холодные нейтрали и off-white; масс-маркет — тёплые нейтрали с одним акцентом. Разбор серии — карточка одежды через AI.
Косметика и бьюти
Спокойные нейтрали для премиума (бежевый, off-white, кремовый), яркие пастели и софт-пинк для масс-маркета. Тренды 2026: cotton candy pink, matcha green, sunwashed dusty pinks (Cosmetics Business (7)). Категорийный разбор — карточка косметики на Wildberries 2026.
Еда и продукты
Тёплая палитра: кремовый, песочный, тёплый белый. Акценты — зелёный (натуральность), красный (вкус, аппетит), коричневый (эко). Холодные тона работают только в специфике (морепродукты, мороженое). Зелёный — устойчивый сигнал натуральности, считывается за полсекунды.
Электроника
Холодная палитра: белый, чёрный, тёмно-серый, тёмно-синий, металлические акценты. Тёплые тона считываются как «бытовое». Акцент — цвет бренда (Apple серебристый, Xiaomi оранжевый, Samsung синий) или функциональный.
Дом и интерьер
Тёплые натуральные тона: дерево, лён, песочный, оливковый, терракота, графит. Категория, где Cloud Dancer 2026 (Pantone (8)) работает напрямую — спокойный белый как фон, тёплые акценты. Ярких неоновых акцентов избегать — они режут «домашнее» восприятие.
Детские товары
Пастель, мягкие цвета, белый. Розовый/голубой по гендерному коду ещё работает, но пробивает гендер-нейтральная пастель — мятный, лимонный, лавандовый. Кадры с детьми — lifestyle с естественным светом, без агрессивных решений.
Цвета бренда vs цвета карточки
Конфликт частый: у бренда — яркая палитра (фуксия и салатовый), а карточка должна вписаться в нейтральные требования площадки. Решение — разделить, где работает бренд, а где — площадка.
На главном фото — площадка. Фон такой, какой требует Ozon / WB / Я.Маркет, цвета бренда — на самом товаре (упаковка, шильдик, лейбл), не на фоне и не на плашках.
На кадрах серии (2-7) — бренд. Здесь фон свободный, сюда выносятся фирменные цвета: фоновые плашки, инфографические блоки, акцентные подписи. Лента кадров читается как «карточка магазина X» даже без логотипа в углу.
На последнем слайде — узнаваемость. «Информация о бренде»: логотип, ценности, контакты. Здесь фирменная палитра работает в полную силу.
Главная ошибка — втискивать фирменный цвет в фон главного. Если бренд фуксиевый, а Ozon-одежда требует #f2f3f5 — главное на #f2f3f5, фуксия идёт на упаковку товара. Спор с площадкой за фон главного никто не выигрывает.
Сезонные цветовые тренды 2026
Pantone в декабре 2025 года объявил цветом 2026 года Cloud Dancer (PANTONE 11-4201) — лёгкий оттенок белого (Pantone (8), NPR (9)). Это первый раз, когда Pantone выбрал белый — как «символ спокойствия в обществе, заново открывающем ценность тихой рефлексии».
Что это значит для карточки.
Белый возвращается как осознанный выбор. Cloud Dancer — не «дефолтный белый», а тёплый, чуть кремовый. На карточке работает как фон с характером, который не воспринимается как «пустой».
Премиум сдвигается к «тихим» цветам. В премиум-категориях (косметика, парфюм, ювелирка, аксессуары) побеждают спокойные нейтрали, off-white, тёплый серый. Яркий акцент на премиум-карточке в 2026 уже не «премиально», а «масс-маркет».
В бьюти и масс-маркете — softpink и matcha green. Тренды бьюти-упаковки 2026 фиксируют доминирование cotton candy pink, fluorescent yellow-green («Gen Z green»), sunwashed-палитры из dusty pinks и sage greens (Cosmetics Business (7)). Те же цвета хорошо считываются на карточках WB в категории «Красота».
Категории без сильного тренда работают на «вечной» палитре. Электроника, инструменты, бытовая химия — здесь тренды Pantone почти не работают, побеждает функциональная палитра.
Менять систему каждый сезон не нужно. Тренды Pantone — точка калибровки раз в год: не устарел ли акцентный цвет, не пора ли заменить «коралл 2019-го» на что-то 2026-го.
Как подобрать палитру за 10 минут
Не нужен дизайнер. Нужен алгоритм и три бесплатных tool'а.
Шаг 1. Определите базовый фон под площадку (1 минута). Откройте требования Ozon и WB, выберите hex для главного фото под свою категорию. Пишите прямо в файл проекта.
Шаг 2. Возьмите основной цвет товара или бренда (1 минута). Hex-пипетка в любом редакторе или imagecolorpicker.com (10). Это акцентный цвет — на нём строится всё остальное.
Шаг 3. Сгенерируйте палитру в Coolors (11) (3 минуты). Загружаете акцентный цвет, нажимаете Space — генератор выдаёт согласованную палитру из 5 цветов. Прогоняете 3-5 раз, выбираете ту, где есть нейтральный фон, два-три средних тона и акцент. Сохраняете палитру.
Шаг 4. Проверьте категорийный код (1 минута). Сравните выбранную палитру с тем, что доминирует в вашей категории в топ-выдаче. Если палитра радикально выбивается («розовый коралл в категории электроники») — это либо сильная гипотеза, либо ошибка. Чаще ошибка.
Шаг 5. Проверьте контраст в WebAIM Contrast Checker (12) (2 минуты). Для каждой пары «текст-фон», которую планируете использовать на инфографике, проверьте 4.5:1. Не проходит — замените цвет в палитре, перепроверьте.
Шаг 6. Проверьте альтернативу в Adobe Color (13) (2 минуты). Если Coolors дал «не очень», Adobe Color строит палитры по правилам цветовой теории (аналоговая, монохром, триадная, комплементарная). Триадная для CTA-акцента, аналоговая для премиум-карточки.
Итог за 10 минут — палитра из 4-6 цветов с проверенным контрастом и категорийным соответствием. Этот набор фиксируется в файле бренд-системы и применяется ко всей серии и ко всем новым артикулам.
FAQ
Как подобрать палитру для карточки, если у меня нет дизайнера?
По алгоритму выше: фон под площадку → акцентный цвет товара → генерация палитры в Coolors → проверка категорийного кода → проверка контраста в WebAIM. 10 минут на категорию. Палитра фиксируется в файле и используется на всех артикулах серии.
Что нельзя делать с цветом на карточке?
Жёсткие запреты: фон главного Ozon-одежды отличный от #f2f3f5 (модерация вернёт); градиенты и текстурированные фотофоны на главном (нарушение «нейтральный фон» WB и Ozon); контраст основного текста ниже 4.5:1 (правило WCAG, его же требует WB); больше 2-3 акцентных цветов на одной карточке; кричащие плашки «-90%» поверх главного.
Можно ли использовать яркий цветной фон на карточке WB?
Только на кадрах серии (2-7), не на главном — главное обязано быть нейтральным (seller.wildberries.ru (4)). На серии цветной фон допустим, если осознанно работает на категорию (детское, бьюти, акция) и не мешает контрасту. Цветной главный = карточка теряется в плитке рядом с белыми конкурентами.
Какой цвет лучше продаёт?
Однозначного ответа нет. Красные и оранжевые акценты дают +32-40% CTR на CTA в e-commerce (Striven (1)), синий формирует доверие в финансовых и B2B-категориях, зелёный — натуральность в еде и БАДах. Но это про акценты, не про базу. База — нейтральная, один акцент под категорию. Любая гипотеза о «лучшем» цвете проверяется A/B-тестом, не верой.
Нужно ли менять цвета карточки сезонно?
Базовую палитру — нет. Каждые три месяца перекрашивать = терять узнаваемость и время. Сезонно меняются только акценты: новогодний слайд с тёплым красным, весенний с пастелью, летний с ярким. Базовый фон, типографика, основная палитра — без изменений. Раз в год — калибровка по трендам (Pantone, категорийные).
Если хочется чтобы цвета подобрала нейросеть с учётом категории, площадки и контраста — попробуйте Obliq, стартовые искры бесплатно без карты. Сервис использует нейросеть Nano Banana 2: загружаете фото товара, указываете категорию и площадку, получаете серию кадров с правильным фоном (#f2f3f5 для Ozon-одежды, белый для WB, нейтральный для Я.Маркет), контрастной инфографикой и единой палитрой по всей серии. Один кадр — несколько десятков рублей по актуальным тарифам. Пошаговый процесс — в гайде по созданию карточки через нейросеть.
Источники
- (1) https://www.striven.com/blog/design-psychology-color-theorys-impact-on-conversion-rates
- (2) https://vc.ru/marketing/968137-kak-sozdat-effektivnuyu-infografiku-dlya-kartochek-tovarov-na-wildberries
- (3) https://docs.ozon.ru/global/products/upload/adding-content/image-requirements/
- (4) https://seller.wildberries.ru/instructions/ru/ru/material/item-photo-rules-recommendations-and-common-mistakes
- (5) https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
- (6) https://testparty.ai/blog/wcag-contrast-ratio-guide-2025
- (7) https://cosmeticsbusiness.com/colour-and-packaging-trends-set-to-dominate-beauty
- (8) https://www.pantone.com/color-of-the-year/2026
- (9) https://www.npr.org/2025/12/04/nx-s1-5632651/pantones-color-of-the-year-2026-white
- (10) https://imagecolorpicker.com
- (11) https://coolors.co
- (12) https://webaim.org/resources/contrastchecker/
- (13) https://color.adobe.com