Цветовые тренды. Самый кликабельный цвет в web

Что это — «сговор» модных дизайнеров, которые навязывают миру своё мнение и каждый год «продвигают» новый цвет? Дизайнеры при создании новых коллекций могут отталкиваться от уже набирающих популярность цветов, а компании — предлагать собственный выбор. Здесь полезно не смешивать экспертное решение и статистику: какой оттенок выбрали для коллекции, какие изображения скачивали пользователи и какие цвета сработали в изученной рекламе — разные вопросы.

Хочется «чего-то нового», «такого, чего не было раньше» или по крайней мере давно. В стремлении к оригинальности мы обращаем внимание на цветовые сочетания, идеи, детские имена, музыкальные стили и хиты. Повторяющиеся находки можно представить как информационную волну: замечаешь оттенок в одежде, потом в интерьере, потом на сайте. Но у этой волны нет единого измерителя: происхождение каждой подборки стоит смотреть отдельно.

Компании, которые занимаются цветами и изображениями, используют разные основания для своих прогнозов. Shutterstock в отчёте на 2022 год анализировал миллионы скачанных изображений и их пиксельные оттенки, а также данные о кликабельности рекламы. Производители красок публикуют собственный выбор цвета года и сочетаний к нему. Поэтому рядом с каждой палитрой полезно смотреть на год, источник и метод: готовый ориентир для веб-дизайна ещё не означает всеобщую любовь к одному цвету.

Институт цвета Pantone выбрал на 2023 год Viva Magenta 18-1750. Однако другие компании также предлагают свои результаты, причём выделяют не один цвет, а сразу несколько цветовых направлений. Ниже — трендовые цвета 2023 на базе нескольких разных прогнозов: фантазия не ограничивается одним пурпуром. Начнём с ориентиров 2026 года, а затем вернёмся к историческим палитрам и посмотрим, какие идеи можно взять из них для сайта.

Цветовые ориентиры 2026 года

У разных программ нет общего победителя. Pantone назвал цветом 2026 года PANTONE 11-4201 Cloud Dancer — белый оттенок. Benjamin Moore выбрал Silhouette AF-655 — тёмный тон жжёной умбры с угольными нотами. Это ориентиры конкретных компаний, а не итог всемирного голосования.

Для веб-дизайна предлагаем прочитать их как разные роли: светлая основа оставляет место фотографиям и тексту, тёмный цвет можно попробовать в выразительном крупном блоке. Соберите две версии первого экрана с одинаковым содержанием: одну на светлой основе, другую — с тёмным крупным блоком. Так можно выбрать роль цвета в композиции.

Если у бренда уже есть узнаваемая палитра, начните с совместимости: как новый оттенок соседствует с логотипом, фотографиями и привычным цветом ссылок. Иногда достаточно изменить фон одной серии публикаций или иллюстраций. Ежегодный выбор производителя сам по себе не повод перекрашивать весь сайт.

Источники: PANTONE 11-4201 Cloud Dancer — Pantone Color of the Year 2026; Silhouette AF-655 — Benjamin Moore Color Trends 2026.

Самые популярные цвета в мире в 2023

В подборке 2023 года соседствуют нейтральные, спокойно-голубые и тёплые природные тона, а также яркие, игривые и сложные оттенки, тяготеющие к тёплому краю спектра. Темы розово-бежевого и зелёного здесь можно рассматривать через легкость и возврат к природе, самовыражение и концепцию wellness — баланс здорового образа жизни, комфорта и хорошего настроения в гармонии с природой и окружающим миром. В этой исторической подборке интересно сравнить разные настроения: от мягкого бежевого до насыщенного кораллового.

Обволакивающая яркость и оригинальная база

Убедительный оранжевый / Impactful Orange and Red

Тёплые насыщенные оттенки красно-оранжевой и терракотовой тональности дают альтернативу нейтральной базе. В подборке 2023 года этот подход представлял Raspberry Blush. Но объявлять, что нейтральные тона уходят в прошлое, было бы слишком смело: рядом с яркими красками в том же обзоре остаются мягкие бежевые и древесные.

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

Benjamin Moore выбрал цветом 2023 года малиновый румянец — Raspberry Blush 2008-30. Это коралловый тон с розовым подтоном. В нём можно увидеть драйв, индивидуальность и максимализм, но рядом с приглушённым бежевым и розовым он допускает и более мягкое прочтение. На сайте попробуйте его в небольшом акценте рядом с нейтральным фоном: так проще оценить, сколько яркости действительно нужно.

Терракотовый персик / Canyon Ridge

Другой интересный микс на стыке привычных цветов — розово-оранжевый или терракотово-персиковый Canyon Ridge, выбор Better Homes & Gardens на 2023 год. Он отсылает нас к образам нагретой солнцем глины, скалистых уступов североамериканских каньонов и тёплого Средиземноморья. Это уже другая интонация красно-оранжевого: меньше резкости, больше землистого тепла.

Сам по себе этот оттенок уже довольно привычен и вовсе не нов. В подборке Better Homes & Gardens его рекомендуют смешивать с яркими кобальтовыми акцентами; добавим к ним белый как спокойную паузу. Получается картина, в которой можно увидеть встречу классики с модерном или песочных дюн с волнами синего моря. На сайте такую пару можно разыграть через тёплый фон и синий декоративный акцент, оставив тексту свой контрастный цвет.

Розовая земля / Terra Rosa

В 2023 году Dunn-Edwards выбрал Terra Rosa DE5096 — мягкий оттенок, смешивающий терракотовую глину с розовым. Нам он напоминает и розовый тон бургундского вина. Это интересный вариант для создания деликатных приглушённых акцентов: мягкий и сладкий без приторности, сложный тон, в котором можно поискать изящность и драматизм. При этом выбор «терра-розы» не означает, что она заменила собой всю терракотовую гамму.

Бежево-перламутровый / Redend Point

Redend Point SW 9081 — выбор Sherwin-Williams на 2023 год. Тёплое смешение бежевого с розовым предлагаем использовать там, где хочется подчеркнуть комфорт, элегантность и натуральность. Это направление спокойнее яркого кораллового: его удобно рассматривать как основу композиции, а не единственный заметный акцент.

Представьте зоны приёма гостей в отелях и общественных пространствах, а также витрины магазинов в этих тонах: дерево, мягкий свет, расслабленная атмосфера с намёком на премиальность. Такой образ можно перенести и в веб-пространство, где сайт становится своеобразной витриной. Для страницы гостиницы это могут быть тёплые фоновые блоки, фотографии материалов и чёткий тёмный текст. Соберите их на реальном макете, чтобы увидеть сочетание целиком.

Богатство натуральных материалов

В подборках 2023 года природные оттенки связаны и с различными ремёслами. Речь не просто об отсылках к природе, а к природным материалам — дереву, металлам, драгоценным камням, которые были каким-то образом обработаны человеком. Нам интересна именно эта разница между цветом природы и цветом материала. На сайте её можно передать крупными фотографиями фактур, не перегружая фон декоративными эффектами.

Состаренное дерево/ Aged Barrel

Спокойный тон состаренного дерева с ноткой теплоты, органики и ностальгии Aged Barrel стал цветом Minwax на 2023 год. Предлагаем попробовать его для интерьеров и дизайна мебели как базовый цвет, отсылающий к природе и создающий солидную, но одновременно расслабленную композицию. На сайте такую роль может получить крупная фотография деревянной поверхности рядом со светлым текстовым разделом.

В цвете состаренного дерева нам видится обнадёживающее и одновременно умиротворённое настроение, связанное с природной красотой и процессами естественного созревания. Рисунок и особенности деревянных поверхностей добавляют индивидуальность. Такой образ можно связать с более вдумчивым подходом к жизни: показать материал крупно и оставить вокруг достаточно воздуха, чтобы текст с ним не спорил.

Попробуйте дополнить состаренное дерево акцентами цвета авокадо или жжёного апельсина — получится композиция с ностальгическими нотками. В компании с мягкими розовыми, голубыми или бежевыми оттенками тот же древесный фон можно прочитать свежее. Сравните оба варианта на одинаковом макете: сначала меняйте акценты, сохраняя фотографии и содержание.

Тирамису / Tiramisu

Медно-коричневый цвет тирамису — Tiramisu C2-600 — стал выбором C2 Paint на 2023 год. В нём нам видятся комфорт и стабильность, в то же время он имеет ярко выраженный характер и кажется сложнее привычных коричнево-бежевых оттенков благодаря золотистым и медным подтонам. На сайте мебели попробуйте сравнить светлую фотографию и тёмный текстовый блок: так будет видно, какая роль подходит этому цвету.

Шоколадно-фиолетовый / Wenge

Чёрный можно взять за основу для «расширения» понятия чёрного как такового и поиска «альтернативных чёрных» для создания новых смыслов и акцентов. Один из примеров палитры Benjamin Moore 2023 года — венге, Wenge AF-180, или цвет тёмного шоколада с нотками чёрного и фиолетового. Нам в нём интересны глубина, обволакивающая мягкость и элегантность. Сравните его с нейтральным чёрным в одном крупном блоке, прежде чем выбирать базу сайта.

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

Торжество зеленого

Популярная тема зелёных цветов в подборке 2023 года опиралась в том числе на отчёт Shutterstock Color Trends 2022. В изученных тогда рекламных изображениях оттенки зелёного выделялись по кликабельности и конверсиям. Нотки изумрудного, лаймового, мятного, нефритового и других похожих цветов можно попробовать в рекламных материалах, но максимальный отклик вашей аудитории нельзя вывести из одного оттенка: нужна проверка конкретного изображения и предложения.

Испанский мох / Spanish Moss

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

Глубокий приглушённый зелёный цвет — одновременно таинственный и сдержанный — подходит для эскиза с природной темой. Spanish Moss стал цветом 2023 года по версии Krylon. Сравните его в крупном фоне и на отдельных предметах в фотографии: какое решение лучше поддерживает содержание страницы?

Нам такой полуночный зелёный напоминает природное изобилие, первозданные леса и болотистые массивы. Попробуйте поставить рядом и тёплые, и холодные оттенки: так легче найти баланс, который нужен именно вашей композиции. Например, песочная керамика даст тёплый акцент, а сине-зелёное стекло продолжит прохладную гамму.

Тёмно-зелёный базовый цвет попробуйте дополнить акцентами золотого, песочного или медного. Такое сочетание позволяет развить тему природных богатств, не добавляя множество новых красок. На сайте начните с фотографии металла или небольшой декоративной детали: крупная золотая заливка может оказаться лишней для выбранной композиции.

Зеленая саванна / Savannah Green

Другой вариант — более провокационные и сочные оттенки зелёного. Например, жёлто-зелёный цвет саванны Savannah Green 2150-30 входит в палитру Benjamin Moore Color Trends 2023. Это участник подборки марки; её цветом года был Raspberry Blush.

Цвет зелёной саванны — интересный пример необычного зелёного: цитрусовость и кислотность дают возможность собрать игривую и сложную гамму. Попробуйте оставить такой оттенок для небольшого акцента, а рядом разместить нейтральный блок. Для сравнения сделайте второй эскиз с большой заливкой того же оттенка: оставьте те же фотографии и текст, меняя только площадь цвета.

Сине-голубой плющ / Vining Ivy

Смешение приглушённых тонов синего и зелёного даёт интересный цвет плюща — Vining Ivy PPG1148-6, выбор Glidden на 2023 год. Его можно обыграть и в современной, и в классической композиции. Прежде чем переносить такую гамму на сайт целиком, сравните её в фоне карточки и в большом разделе.

Его двойственность как бы загадывает зрителю загадку: является ли он скорее синим или скорее зелёным? Нам нравится использовать это пограничное настроение рядом со стеклом, керамикой или водой. Предмет в такой гамме интересно выделить светом или поставить на контрастный фон — тогда пограничный оттенок станет частью общего образа.

Другие оттенки зеленого

Для поиска сочетаний можно рассматривать зелёные оттенки от инопланетно неонового до насыщенного тропического: аспарагус, камуфляжный зелёный, виридиан, лайм, цитрусовый, малахитовый, цвет морской волны, весенне-зелёный, пихтовый, крокодиловый, грушевый, фисташковый и шалфейный. Это словарь цветовых идей, а не рейтинг актуальности всех перечисленных тонов. Для воспроизводимой палитры рядом с образным названием нужен точный код.

На схеме — выбранные зелёные образцы с HEX, опубликованными в отчёте Shutterstock на 2022 год. Сравните светлые, насыщенные и тёмные варианты, чтобы выбрать основу и акцент для своей композиции.

Самые популярные цвета 2022 по версии Shutterstock

Это историческая палитра Color Trends 2022, опубликованная Shutterstock 17 ноября 2021 года. В основе — данные скачиваний изображений и анализа цвета на платформе. Три оттенка ниже не образуют рейтинг любимых цветов населения и не заменяют актуальную проверку на вашей аудитории.

#E9967A Calming Coral / Умиротворяющий коралловый

Calming Coral — один из трёх быстрорастущих оттенков отчёта Shutterstock на 2022 год. Коралловая пастель напоминает нам пустынные дюны, лучи заходящего солнца, нагретый кирпич или песок, спелые персики, нежные облака, лепестки розы и гибискуса, золотые листья и перья фламинго. Выберите из этих образов тот, который подходит содержанию страницы.

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

Попробуйте сочетать его с небесно-голубым — такой совет есть и в отчёте Shutterstock. Для рабочего макета выберите конкретный голубой и проверьте его рядом с коралловым: словесного названия недостаточно, чтобы воспроизвести гамму.

#800080 Velvet Violet / Бархатно фиолетовый

Интригующий, загадочный, глубокий, но не броский — в таком фиолетовом нам видится тихий шёпот вместо крика и тайна, которую хочется раскрыть. Это образ царственной уверенности: цвет может «звучать» достойно и грациозно. Для сайта попробуйте передать это настроение через крупную спокойную заливку и простую композицию.

Фиолетовая гамма простирается от тёмно-лилового до лавандового; в отчёте 2022 года выделен конкретный Velvet Violet. Попробуйте сочетать его с изумрудно-зелёным, а блестящие или неоново-электрические акценты оставить для небольших деталей. Не обязательно использовать всё сразу: сравните сдержанную и более яркую версии.

#DB7093 Pacific Pink / Спокойный розовый

Нежный, скромный, приглушённый, с нотками ретро — так можно описать настроение Pacific Pink. Он напоминает нам закатные краски на берегу Тихого океана, лепесток засушенного цветка между страниц старинной книги или лёгкий румянец. Если хочется более тактичной розовой гаммы, попробуйте этот образ рядом со спокойной фотографией и свободным пространством.

В качестве цветового дополнения попробуйте другие оттенки розового и персикового. Для сайта сначала соберите их на одной небольшой композиции: фон, фотография, заголовок, ссылка. Так будет проще выбрать сочетание, чем оценивать каждый образец отдельно.

Самый популярный цвет в России и в мире в 2022-м

Shutterstock также привёл оттенки по странам в отчёте на 2022 год. В этой выборке встречаются приглушённые розовые, персиковые и песочные тона, зелёные и синие акценты. Светлые розовые оттенки здесь соседствуют с более насыщенными розовыми, а тёплые песочные — с оранжевыми. Ниже — точные коды из первоисточника. Они описывают данные платформы того периода; вывод о любимом цвете всех жителей страны из них делать нельзя.

• В России в отчёте отмечен чуть более насыщенный песочно-оранжевый #F4AF60 с нотками горчицы. В Испании и ЮАР тоже тёплая оранжевая гамма, но разные образцы: #F4A460 и #FFA500 соответственно. Близкое словесное описание не делает эти три цвета одинаковыми.
• Тайвань, Турция и Южная Корея представлены светлыми оттенками персика, миндаля и песочной гаммы: #FFDAB9, #FAF0E6 и #FFEBCD соответственно. В Японии указан #F5DEB3, во Франции — светло-бежевый #FAF0E6. В этой группе различия легче заметить по образцам, чем по общему слову «песочный».
• Бразилия, Индия, Мексика, Нидерланды, Великобритания и ОАЭ — розовый #FFC0CB. Италия выделяется другим кодом: #FFB6C1. Розовое направление общее, но итальянский образец чуть отличается от соседей по группе.
• США, Таиланд, Норвегия, Чили и Канада — более светлый розовый #FFE4E1. Это одна из групп с одинаковым кодом в отчёте; сравнивать её с другими странами удобнее по образцу, чем по словам «спокойный» или «приглушённый».
• В Германии — зелёный #66CDAA, в Аргентине — цвет морской волны #20B2AA. Швейцария выделяется синим #4682B4. Эти оттенки сохраняем как исторические данные Shutterstock, без переноса на предпочтения жителей в 2026 году.

На схеме собраны все страны из опубликованной таблицы, включая Австралию с #FAF0E6. Для России это ответ на вопрос об отчёте Shutterstock 2022, а не установленный самый популярный цвет в 2026 году.

Как перенести палитру на сайт

Начните с задачи страницы. Для каталога мебели можно попробовать древесную основу и спокойные фотографии материалов; для яркого события — коралловый акцент; для предметной коллекции со стеклом — сине-зелёные оттенки. Это варианты для эскизов. Один и тот же цвет стоит посмотреть на реальном содержании: длинном названии товара, цене, фотографии и форме заявки.

1. Разведите роли цветов. Отдельно выберите фон страницы, фон карточек, основной текст, ссылки и акценты. Модный оттенок не обязан выполнять все эти задачи.
2. Соберите небольшой набор реальных блоков. Возьмите шапку, карточку товара, текстовый раздел и форму. Сравнивайте палитры на одинаковом содержании, чтобы оценивать именно цвет, а не разные фотографии.
3. Проверьте контраст текста. WCAG 2.2 для уровня AA задаёт минимум 4,5:1 для обычного текста и 3:1 для крупного, с предусмотренными стандартом исключениями. Крупным считается текст от 18 pt обычного начертания или от 14 pt полужирного. Не оценивайте читаемость только по впечатлению от большого образца.
4. Добавьте смысловые подсказки. Цвет не должен быть единственным способом передачи информации: ошибку поля обозначьте ещё и текстом, выбранный вариант — отметкой, ссылку в тексте — различимым оформлением.
5. Посмотрите состояния элементов. В макете должны быть видны ссылка, наведение, фокус с клавиатуры, ошибка и недоступная кнопка. Убедитесь, что декоративный акцент не путается с основным действием.
6. Сравните варианты на аудитории. Если проверяете гипотезу о цвете, постарайтесь сохранить предложение, текст и расположение элементов. Заранее решите, что будете оценивать: переход к товару, отправку формы или другое нужное действие.

Например, песочно-оранжевый из исторической таблицы можно попробовать в иллюстрации или небольшом акценте. Дальше проверьте текст и границы элементов на выбранном фоне. Отчёт не отвечает, каким цветом должна быть кнопка именно вашего магазина: её роль определяется всей композицией страницы.

Правила контраста и передачи смысла цветом приведены в рекомендациях W3C: Contrast (Minimum) и W3C: Use of Color.

Частые вопросы

Какой цвет самый популярный в России?

Нужно уточнить год и способ измерения. В таблице Shutterstock Color Trends 2022 для России указан #F4AF60. Это данные платформы, а не опрос любимых цветов всех жителей. Выдавать этот образец за победителя 2026 года нельзя.

Какой цвет выбрали на 2026 год?

Pantone выбрал PANTONE 11-4201 Cloud Dancer, Benjamin Moore — Silhouette AF-655. Это разные программы. Их удобно использовать для поиска идей, сохраняя рядом название компании и год выбора.

Зелёная кнопка даст больше кликов?

Заранее обещать это нельзя. Исторический вывод Shutterstock относился к изученной рекламе с оттенками зелёного. Для своей кнопки проверьте заметность, читаемость подписи и понятность действия, а гипотезу о кликах сравните на своей аудитории.

Можно ли использовать палитру 2022 или 2023 года сейчас?

Да, как отправную точку для дизайна. Предлагаем выбирать сочетание по задаче, содержанию и совместимости с брендом. Год нужен, чтобы верно описывать происхождение подборки; он сам по себе не делает цвет непригодным для нового макета.

Можно ли взять точный цвет пипеткой с фотографии?

Для этих палитр лучше скопировать опубликованный HEX из текста или схемы. Названия красок и номера Pantone оставьте с исходным обозначением производителя. Наши сгенерированные иллюстрации показывают настроение сочетаний и не служат точными образцами краски.

Источники

• Официальный выпуск отчёта Color Trends 2022, метод и дата — Shutterstock, Inc., «Shutterstock Releases Its 2022 Color Trends Report», 17 November 2021 — пресс-релиз.
• Оттенки, HEX и данные по странам — Shutterstock, «2022 Color Trends: Serenity takes center stage in 2022» — отчёт.
• Белый оттенок программы 2026 года — Pantone, «Color of the Year 2026: PANTONE 11-4201 Cloud Dancer» — Pantone.
• Выбор 2023 года — Pantone, «18-1750 TCX Viva Magenta», официальная карточка цвета с указанием Color of the Year 2023 — карточка цвета.
• Raspberry Blush, Wenge и Savannah Green — Benjamin Moore, «Color of the Year & Color Trends 2023» — палитра 2023.
• Silhouette AF-655 — Benjamin Moore, «Color of the Year & Color Trends 2026» — палитра 2026.
• Canyon Ridge — Better Homes & Gardens, Megan Boettcher, «The Better Homes & Gardens 2023 Color of the Year Is Here», 20 September 2022 — страница собственного выбора марки.
• Terra Rosa — Dunn-Edwards, «Dunn-Edwards Corporation Announces 2023 Color Of The Year», 4 October 2022 — пресс-релиз.
• Redend Point SW 9081 — Sherwin-Williams, «Color of the Year 2023» — страница программы.
• Aged Barrel — Minwax, «2023 Color of the Year» — страница программы.
• Tiramisu C2-600 — C2 Paint, «Color of the Year + Capsule Collection 2023» — публикация производителя.
• Spanish Moss — Krylon, «2023 Color of the Year» — страница программы.
• Vining Ivy PPG1148-6 — Glidden, «2023 Color Of The Year: Vining Ivy» — страница программы.
• Контраст текста — W3C, WCAG 2.2, «Understanding SC 1.4.3: Contrast (Minimum)», Level AA — пояснение критерия.
• Передача информации цветом — W3C, WCAG 2.2, «1.4.1 Use of Color», Level A — текст рекомендации.