Очень простой алгоритм подбора цвета, который работает

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

Первоначальная реализация

  • неправильное определение цвета,
  • «грязные» цвета из-за усреднения,
  • тусклые кнопки, скучные карточки.
Примеры проблемных карточек

Чего на самом деле хотелось

Минимальными силами улучшить алгоритм определения цветов, придумать как покрасить карточку красиво, не изобретая при этом космический корабль.

Новый алгоритм определения цветов

Исходная иконка → Квадрат из отфильтрованных пикселей
Результат после второго шага. Исходная иконка → Цвета
  • фон — самый светлый цвет,
  • кнопка — ближайший к светлому,
  • текст — самый тёмный.
  • фон — самый тёмный цвет,
  • кнопка — ближайший к тёмному,
  • текст — самый светлый.
Получившиеся карточки. Исходная иконка → Цвета → Карточка

Результат

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

Напоследок, больше примеров

--

--

Senior Product Designer @Yandex

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store