Атлас цвета · Instagram-исследование

Как сочетает цвета Pierre Delcourr

Дизайнер Pierre Delcourr (@pierredelcourr, averlo.co) показывает сочетания цветов прямо на сайтах. Здесь разобраны все 18 его рилсов (2–12 ноября 2026): 40 палитр, и у каждой — настоящий кадр из рилса с его примером и плашками цветов, кнопка перехода в этот самый рилс и мини-сайт, собранный в той же палитре. Все 120 HEX перепроверены по кодам, напечатанным прямо в рилсах: 115 — коды из рилсов, 5 сняты с цвета плашки на кадре, где автор напечатал чужой код по ошибке.

Его главная формула

Два спокойных цвета задают настроение — один громкий акцент даёт характер и становится подписью бренда.

70% — основа: фон, задаёт настроение 20% — поддержка: поверхности и второй цвет 10% — акцент: одна кнопка и ключевые подсветки

Принципы Пьера

Правила, которые он повторяет из рилса в рилс. Это не палитры, а способ думать о цвете.

01

Два спокойных цвета и один громкий делают весь дизайн осмысленным — это его базовая формула.

02

Первые два цвета задают настроение, а акцент даёт характер — это подпись бренда, то, что запоминают.

03

Акцент занимает меньше всего места, но оставляет самое большое впечатление: он ведёт внимание и показывает, куда кликать.

04

Дизайну не нужно больше цветов — ему нужен небольшой контраст и один цвет, который удивляет.

05

Фон задаёт настроение ещё до того, как кто-то прочитал хоть слово.

06

Один неожиданный акцент спасает палитру, которая выглядит чисто, но предсказуемо, плоско или «готово, но не запоминается».

07

Акцент — только один. Два акцента конкурируют, и подпись бренда теряется.

40 палитр

Каждая карточка показывает сочетание так, как показывает Пьер: сверху — настоящий кадр из его рилса (его пример сайта и плашки с названиями и HEX), ниже — мини-сайт, собранный в той же палитре. Кнопка «Смотреть этот рилс» ведёт в то самое видео. Нажми на строку цвета, чтобы скопировать HEX.

HEX из рилса — код напечатан на плашке в самом видео, сверено кадр в кадр. цвет снят с кадра — в рилсе под этой плашкой напечатан чужой код (ошибка автора), поэтому HEX снят с реального цвета плашки. Всего: 115 из 120 HEX — из рилсов, 5 сняты с кадра (палитры PC-25 и PC-35).

Уроки из остальных рилсов

Не про цвет напрямую — про то, что вокруг него: ошибки, стили, фоны, исправления и логотипы.

РИЛС · 12.11.2026

Ошибки сайтов

Конкурирующие CTA, несогласованные стили кнопок, огромные меню, слишком много информации, одинаковые карточки товаров, кричащие промо-баннеры и предвыбранные размеры товаров.

РИЛС · 11.11.2026

Сочетание стилей

Запоминающиеся сайты рождаются из пары «тип сайта + один сильный стилевой приём»: стеклянный морфизм, швейцарские постеры, смелая типографика (типографический максимализм), текстуры (тактилизм), футуризм 2000-х.

РИЛС · 05.11.2026

Фоны задают ощущение

Синяя абстрактная волна — современно; красная текучая графика — кинематографично; тёмная фигура с оранжевыми очками — заявление; фиолетовая панель — энергия; мягкая пастельная геометрия — мягче, но не скучно.

РИЛС · 04.11.2026

Три быстрых исправления

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

РИЛС · 09.11.2026

Логотипы

Простые, минималистичные знаки запоминаются. Витиеватые логотипы «в AI-стиле» — нет.

Как пользоваться атласом

1

Выбирай одну палитру целиком, по её номеру — например: «делай как PC-12».

2

Никогда не смешивай акценты из разных палитр: подпись бренда — один цвет.

3

Акцент — только для главной кнопки (CTA) и ключевых подсветок. Всё остальное держат основа и поддержка.

База для Claude

Та же самая база знаний одним файлом: все 40 палитр с HEX, ролями, пропорциями 70/20/10, готовыми CSS-переменными и семью принципами Пьера. Файл можно отдать Claude перед любым дизайн-проектом — и ссылаться на палитры по номерам PC-01…PC-40, как в этом атласе.