Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 12
при выборе идеальной цветовой палитры нельзя полагаться только на математикуМожно почитать и Иттена, и кого посовременнее. Одними точными науками точно не обойтись.
Хорошо было бы, если бь такие статейки писали и по тёмному дизайну интерфейсов. А то их итак мало, так о них ещё никто и не говорит, а белый лично меня нередко раздражает.
просто анализируйте работы других дизайнеров, например на Dribbble или в инстаграме.
Я на десктопе в хром поставил расширение Eye Dropper и периодически смотрю используемые цвета на других сайтах. Очень помогает.
Не стоит стремиться к единому стилю, а то мы опять начнем создавать одинаковые плоские сайты и снова уйдем в старые добрые 2000-ые. Сейчас такой тренд, сочетать не сочетаемое, одни градиенты для svg графиков и различных шкал, под темный дизайн, чего стоят. На все это явно 3-6 цветов не хватит. И ведь не поспоришь, эффектно смотрятся.
Я на десктопе в хром поставил расширение Eye Dropper и периодически смотрю используемые цвета на других сайтах. Очень помогает.
Не стоит стремиться к единому стилю, а то мы опять начнем создавать одинаковые плоские сайты и снова уйдем в старые добрые 2000-ые. Сейчас такой тренд, сочетать не сочетаемое, одни градиенты для svg графиков и различных шкал, под темный дизайн, чего стоят. На все это явно 3-6 цветов не хватит. И ведь не поспоришь, эффектно смотрятся.
Давненько задавался вопросом как работают такие сервисы по подбору палитры, было бы интересно понять по каким формулам и критериям они подбирают цвета (есть универсальные решения или кто во что горазд) и распространяются ли одни и те же правила на не столь яркие цвета, как в статье, например, на пастель и тёмные интерфейсы в том числе.
Присоединяюсь к вопросу, каждый год в выдаче гугла нахожу самые разнообразные сервисы, но почти все они выдают именно пестрые цвета (тут и популярные http://mycolor.space и даже adobe color.adobe.com, https://designmodo.com, https://infosphere.top и т.д.)
Если с семантическими состояниями помогает Bootstrap (getbootstrap.com)/Grid, то идеальный набор цветов для сайта приходится выводить экспериментальным путём.
Если с семантическими состояниями помогает Bootstrap (getbootstrap.com)/Grid, то идеальный набор цветов для сайта приходится выводить экспериментальным путём.
Там в основе почти всегда цветовой круг. И, соответственно, все варианты гаммы составляются из чистых тонов (hue), исходя из их расположения на этом цветовом круге.
Цветовой круг «не работает» на практике по одной простой причине: человеческий глаз воспринимает цвет не совсем равномерно. У нас разное количество светочувствительных клеток для разных цветовых диапазонов. И плюс часть информации достраивается мозгом искусственно. (Апельсин воспринимается как оранжевый даже ночью, когда он темно-синий :).
Кто-то, помнится, строил трехмерное цветовое веретено HSL, где были хорошо показаны основные проблемы «плоского» цветового круга: жёлтый тон при понижении яркости резко «грязнится», чистый синий похож выглядит фиолетовым и др. То есть если цветовой круг растянуть вниз, добавив этим шкалу светлоты (или яркости в HSB), то математика образует ровный конус, а вот человеческий глаз вместо него видит кривоватую половину веретена с выбоинами в некоторых местах)
Поэтому я бы не сказал, что «это не наука». Это наука. Эта часть той же самой теоретической базы, которая позволяет довольно достоверно вычислять освещенность в 3d, эмулировать всякие эффекты на изображениях и т.п. Она работает. Просто в данном случае математические закономерности требуют корректировки под физиологические особенности человеческого зрения. Проблема в том, что эти поправки нельзя свести в таблицы, потому что слишком много частных случаев и индивидуальных особенностей. Наше восприятие цвета зависит даже от текущего состояния психики. (Депрессуешь или устал — всё серое, чистые тона кажутся слишком кислотными, раздражают; возбуждён — всё яркое, пастельные тона кажутся пыльными и невыразительными. Почему — отдельная тема, что-то вроде режимов энергосбережения :)
В результате, дизайнеру гораздо проще воспитать в себе вкус (читай, использовать готовые паттерны из культурной базы человечества), чем составить миллион поправок для частных случаев к чистой математической модели. Это правильный подход, но он не отрицает теорию цвета.
P.S. Автору большой респект за хороший и практичный пост.
Я точно так же строю)
Мелкое дополнение: можно получать интересные палитры, если брать в качестве границ основного ряда не просто светлые и темные оттенки базового, а разные тона. Тогда вся палитра будет градиентной. Плюс иногда помогает сохранить узнаваемость, если у заказчика двухцветный фирменный стиль.
Подробности
Берется один любой тон, а остальные строятся относительно него:
В результате получается гамма чистых тонов. После этого всю гамму при необходимости можно сместить по яркости (brightness, от темного до светлого) и насыщенности (saturation, от бледных-пастельных до кислотных). Это цветовая модель HSB. Поскольку все цвета гаммы корректируются одновременно, каждый цвет сохраняет свои параметры HSB относительно других и это, формально, должно сохранять гармонию.
- комплиментарый тон — напротив основного;
- триадные образуют равнобедренный треугольник, где доп. точки всегда смещены на 90 и более градусов от основного;
- тетрадные — ось (основной + комплиментарный) пересекается другой осью (вторичный + комплиментарный вторичному), угол пересечения варьируется;
- аналоговые строятся как триадные, только смещение доп. точек всегда меньше 90 градусов;
- акцентированные аналоговые — то же самое, только добавляется четвертый цвет (комплиментарный основному).
В результате получается гамма чистых тонов. После этого всю гамму при необходимости можно сместить по яркости (brightness, от темного до светлого) и насыщенности (saturation, от бледных-пастельных до кислотных). Это цветовая модель HSB. Поскольку все цвета гаммы корректируются одновременно, каждый цвет сохраняет свои параметры HSB относительно других и это, формально, должно сохранять гармонию.
Цветовой круг «не работает» на практике по одной простой причине: человеческий глаз воспринимает цвет не совсем равномерно. У нас разное количество светочувствительных клеток для разных цветовых диапазонов. И плюс часть информации достраивается мозгом искусственно. (Апельсин воспринимается как оранжевый даже ночью, когда он темно-синий :).
Кто-то, помнится, строил трехмерное цветовое веретено HSL, где были хорошо показаны основные проблемы «плоского» цветового круга: жёлтый тон при понижении яркости резко «грязнится», чистый синий похож выглядит фиолетовым и др. То есть если цветовой круг растянуть вниз, добавив этим шкалу светлоты (или яркости в HSB), то математика образует ровный конус, а вот человеческий глаз вместо него видит кривоватую половину веретена с выбоинами в некоторых местах)
Поэтому я бы не сказал, что «это не наука». Это наука. Эта часть той же самой теоретической базы, которая позволяет довольно достоверно вычислять освещенность в 3d, эмулировать всякие эффекты на изображениях и т.п. Она работает. Просто в данном случае математические закономерности требуют корректировки под физиологические особенности человеческого зрения. Проблема в том, что эти поправки нельзя свести в таблицы, потому что слишком много частных случаев и индивидуальных особенностей. Наше восприятие цвета зависит даже от текущего состояния психики. (Депрессуешь или устал — всё серое, чистые тона кажутся слишком кислотными, раздражают; возбуждён — всё яркое, пастельные тона кажутся пыльными и невыразительными. Почему — отдельная тема, что-то вроде режимов энергосбережения :)
В результате, дизайнеру гораздо проще воспитать в себе вкус (читай, использовать готовые паттерны из культурной базы человечества), чем составить миллион поправок для частных случаев к чистой математической модели. Это правильный подход, но он не отрицает теорию цвета.
P.S. Автору большой респект за хороший и практичный пост.
Я точно так же строю)
Мелкое дополнение: можно получать интересные палитры, если брать в качестве границ основного ряда не просто светлые и темные оттенки базового, а разные тона. Тогда вся палитра будет градиентной. Плюс иногда помогает сохранить узнаваемость, если у заказчика двухцветный фирменный стиль.
Как только сказали про 10 серых оттенков, так я сразу вспомнил про стандартное упражнение для начинающих художников — нарисовать десять оттенков серого карандашом. Которых достаточно для любого карандашного рисунка (и весь светотенеовй скилл состоит в том, чтобы определить где какой и как его границы выглядят).
Спасибо большое за статью. Очень приятно читать и смотреть такие иллюстрации. Отлично сложена мысль, для тех кто особо не разбирается в создании дизайна (вроде меня) неплохая инструкция и пара лайфхаков, как не сделать пестрое чудище.
Поддерживаю, но немного с другой стороны. Много статей применительно к дизайну про цветовосприятие (типа «синий вызывает чувство расслабленности») или объяснения всяких «комплементарных схем» или еще что-то что мной лично воспринимается сложно. А здесь прям какая-то конкретика и соль для того чтобы брать и делать.
А как же «accessibility»? Contrast ratio параметр серого на сером явно не выше 4х будет
Чего-то не нашел в статье мест где контраст был бы не достаточен. Чтобы сделать его меньше четырёх — нужно постараться.
ИМХО, чисто черный и белый — это перебор, глаза режет.
ИМХО, чисто черный и белый — это перебор, глаза режет.
Ну и тулза от Lea Verou в тему: https://contrast-ratio.com/
Это к слову математики в цветах :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создание собственной цветовой палитры