Comments 12
при выборе идеальной цветовой палитры нельзя полагаться только на математику
Можно почитать и Иттена, и кого посовременнее. Одними точными науками точно не обойтись.
Хорошо было бы, если бь такие статейки писали и по тёмному дизайну интерфейсов. А то их итак мало, так о них ещё никто и не говорит, а белый лично меня нередко раздражает.
просто анализируйте работы других дизайнеров, например на Dribbble или в инстаграме.
Я на десктопе в хром поставил расширение Eye Dropper и периодически смотрю используемые цвета на других сайтах. Очень помогает.

Не стоит стремиться к единому стилю, а то мы опять начнем создавать одинаковые плоские сайты и снова уйдем в старые добрые 2000-ые. Сейчас такой тренд, сочетать не сочетаемое, одни градиенты для svg графиков и различных шкал, под темный дизайн, чего стоят. На все это явно 3-6 цветов не хватит. И ведь не поспоришь, эффектно смотрятся.
Давненько задавался вопросом как работают такие сервисы по подбору палитры, было бы интересно понять по каким формулам и критериям они подбирают цвета (есть универсальные решения или кто во что горазд) и распространяются ли одни и те же правила на не столь яркие цвета, как в статье, например, на пастель и тёмные интерфейсы в том числе.
Присоединяюсь к вопросу, каждый год в выдаче гугла нахожу самые разнообразные сервисы, но почти все они выдают именно пестрые цвета (тут и популярные http://mycolor.space и даже adobe color.adobe.com, https://designmodo.com, https://infosphere.top и т.д.)
Если с семантическими состояниями помогает Bootstrap (getbootstrap.com)/Grid, то идеальный набор цветов для сайта приходится выводить экспериментальным путём.
Там в основе почти всегда цветовой круг. И, соответственно, все варианты гаммы составляются из чистых тонов (hue), исходя из их расположения на этом цветовом круге.

Подробности
Берется один любой тон, а остальные строятся относительно него:
  • комплиментарый тон — напротив основного;
  • триадные образуют равнобедренный треугольник, где доп. точки всегда смещены на 90 и более градусов от основного;
  • тетрадные — ось (основной + комплиментарный) пересекается другой осью (вторичный + комплиментарный вторичному), угол пересечения варьируется;
  • аналоговые строятся как триадные, только смещение доп. точек всегда меньше 90 градусов;
  • акцентированные аналоговые — то же самое, только добавляется четвертый цвет (комплиментарный основному).


В результате получается гамма чистых тонов. После этого всю гамму при необходимости можно сместить по яркости (brightness, от темного до светлого) и насыщенности (saturation, от бледных-пастельных до кислотных). Это цветовая модель HSB. Поскольку все цвета гаммы корректируются одновременно, каждый цвет сохраняет свои параметры HSB относительно других и это, формально, должно сохранять гармонию.



Цветовой круг «не работает» на практике по одной простой причине: человеческий глаз воспринимает цвет не совсем равномерно. У нас разное количество светочувствительных клеток для разных цветовых диапазонов. И плюс часть информации достраивается мозгом искусственно. (Апельсин воспринимается как оранжевый даже ночью, когда он темно-синий :).

Кто-то, помнится, строил трехмерное цветовое веретено HSL, где были хорошо показаны основные проблемы «плоского» цветового круга: жёлтый тон при понижении яркости резко «грязнится», чистый синий похож выглядит фиолетовым и др. То есть если цветовой круг растянуть вниз, добавив этим шкалу светлоты (или яркости в HSB), то математика образует ровный конус, а вот человеческий глаз вместо него видит кривоватую половину веретена с выбоинами в некоторых местах)

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

В результате, дизайнеру гораздо проще воспитать в себе вкус (читай, использовать готовые паттерны из культурной базы человечества), чем составить миллион поправок для частных случаев к чистой математической модели. Это правильный подход, но он не отрицает теорию цвета.

P.S. Автору большой респект за хороший и практичный пост.
Я точно так же строю)

Мелкое дополнение: можно получать интересные палитры, если брать в качестве границ основного ряда не просто светлые и темные оттенки базового, а разные тона. Тогда вся палитра будет градиентной. Плюс иногда помогает сохранить узнаваемость, если у заказчика двухцветный фирменный стиль.
Как только сказали про 10 серых оттенков, так я сразу вспомнил про стандартное упражнение для начинающих художников — нарисовать десять оттенков серого карандашом. Которых достаточно для любого карандашного рисунка (и весь светотенеовй скилл состоит в том, чтобы определить где какой и как его границы выглядят).
Спасибо большое за статью. Очень приятно читать и смотреть такие иллюстрации. Отлично сложена мысль, для тех кто особо не разбирается в создании дизайна (вроде меня) неплохая инструкция и пара лайфхаков, как не сделать пестрое чудище.
Поддерживаю, но немного с другой стороны. Много статей применительно к дизайну про цветовосприятие (типа «синий вызывает чувство расслабленности») или объяснения всяких «комплементарных схем» или еще что-то что мной лично воспринимается сложно. А здесь прям какая-то конкретика и соль для того чтобы брать и делать.
А как же «accessibility»? Contrast ratio параметр серого на сером явно не выше 4х будет
Чего-то не нашел в статье мест где контраст был бы не достаточен. Чтобы сделать его меньше четырёх — нужно постараться.
ИМХО, чисто черный и белый — это перебор, глаза режет.
Only those users with full accounts are able to leave comments. Log in, please.