Разработка цифровой системы подбора и сравнения цветов
Объединили 2528 цветов из трёх каталогов в цифровую систему: с удобным поиском, сравнением оттенков, примеркой на металле и подбором по фотографии.
Задача
В строительстве, производстве и металлообработке цвета согласовывают по системе RAL. Код оттенка позволяет зафиксировать выбор и передать его исполнителю.
Для «Промцветметалла» разработали систему поиска, сравнения и предварительной оценки цвета покрытия. Ею можно пользоваться самостоятельно или при согласовании заказа с клиентом — онлайн и на встрече. Одновременно сервис привлекает посетителей из поиска по запросам о цветах RAL.
Что сделали
- UX-проектирование и UI-дизайн
- Разработка сервиса
- Поиск и классификация цветов
- Сравнение оттенков по ΔE2000
- Подбор по фотографии и примерка на металле
- Адаптация полного функционала для планшетов и телефонов
- Интеграция с портфолио
Три каталога в одной системе
В основу вошли RAL Classic, RAL Design и RAL Effect. Для каждого каталога разработали поиск и систему распределения оттенков по цветовым группам.
Чтобы объединить цвета в понятные категории, программа оценивает их светлоту, насыщенность и тон. Отдельные правила предусмотрели для пограничных оттенков: светлый малонасыщенный жёлтый может относиться к бежевым, тёмный тёплый — к коричневым, а почти бесцветный — к серым.
Так из тысяч записей формируются группы, соответствующие привычному восприятию цвета: «Бежевые / кремовые», «Зелёные / оливковые», «Белые / серые / чёрные» и другие. Пользователь может искать оттенок по внешнему виду, не зная его названия или кода RAL.
Посадочные страницы цветов
Каждый цвет RAL получил собственную страницу с кодом, названием и цифровыми значениями HEX, RGB, CMYK, HSL и Lab.
На странице показываются реальные работы компании в выбранном цвете, если они есть в портфолио. Далее — похожие оттенки из того же каталога и других систем RAL. Они подбираются по формуле ΔE2000, которая оценивает визуальное сходство с учётом различий в светлоте, насыщенности и тоне.
Каждая страница охватывает несколько поисковых запросов: название цвета, его цифровые значения, применение и вид на металле. Для поиска по картинкам формируется изображение с оттенком и его обозначением. Человек приходит за информацией о цвете, видит выполненные компанией работы и может сразу запросить покраску в этот оттенок.
Похожие цвета — по восприятию
Близкие номера в каталоге не всегда означают близкие оттенки. Для поиска похожих цветов использовали формулу CIEDE2000 — ΔE2000, учитывающую особенности человеческого восприятия.
Программа переводит цвета в пространство Lab и сравнивает их по светлоте, насыщенности и тону. Чем меньше полученное значение ΔE2000, тем ближе оттенки. Из 2528 записей сервис выбирает ближайшие — внутри одной палитры или среди RAL Classic, Design и Effect.
Тот же алгоритм работает при подборе по фотографии: пользователь выбирает точку на снимке и получает ближайшие оттенки RAL. Фото остаётся в браузере, на сервер передаётся только HEX-код. Результат помогает сузить выбор, а окончательный цвет согласовывается по физическому образцу.
Техническая часть
Адаптивность. Каталоги, сравнение оттенков и подбор по фотографии доступны на компьютерах, планшетах и телефонах. Функционал в полном объеме адаптирован под сенсорный экран.
Обработка фотографий. Изображение остаётся в клиентском браузере. Для поиска ближайших оттенков передаётся только код, около-нулевая нагрузка на сервер.
SEO-подготовка. Для цветов подготовлены отдельные адреса, метаданные, описания и изображения для поиска по картинкам.
Стек. Next.js 16, React 19 и TypeScript, собственные CSS-стили и Tailwind CSS. Сравнение цветов реализовано по формуле CIEDE2000, выбор цвета на фотографии — через Canvas.