Создание собственной цветовой палитры

Original author: Adam Wathan, Steve Schoger
  • Translation
  • Tutorial
Адаптировано из нашей будущей книги «Рефакторинг UI»

Видели эти модные генераторы цветовой палитры? Когда выбираешь цвет, настраиваешь несколько параметров с музыкальными словечками типа «триада» или «четвёртый мажор» — и получаете пять идеальных цветов для своего веб-сайта?



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

Ну, если не хотите, чтобы сайт выглядел так:



Что нужно на самом деле


Вы ничего не сделаете с пятью шестнадцатеричными кодами. Чтобы построить что-то реальное, требуется гораздо более полная палитра.



Хорошую цветовую палитру можно разбить на три категории.

Серые


Текст, фон, панели, элементы формы — почти всё это существует в сером интерфейсе.



И вам понадобится больше серых цветов, чем вы думаете. Кажется, что три или четыре оттенка — это много, но очень скоро вы захотите что-то немного темнее, чем оттенок № 2, но немного светлее, чем оттенок № 3.

На практике желательно выбрать 8−10 оттенков (подробнее об этом позже). Это не так много, чтобы высматривать разницу между оттенками № 77 и № 78, но вполне достаточное количество.



Истинный чёрный, как правило, выглядит неестественно, поэтому начните с очень тёмного серого и постепенно переходите к белому.

Основные цвета


Большинству сайтов нужен один или два цвета для основных действий, элементов навигации и т.д. Эти цвета определяют общий вид сайта: те, которые заставляют думать о Facebook как о «синем», хотя на самом деле он в основном серый.

Как и с серой палитрой, нужно выбрать палитру (5−10) более светлых и более тёмных оттенков.



Самые светлые оттенки могут быть полезны в качестве тонированного фона для таких вещей, как оповещения, а более тёмные отлично подходят для текста.

Акцентные цвета


Помимо основных, каждому сайту нужно несколько акцентных цветов для общения с пользователем.

Так, для выделения новой функции можно выбрать привлекательный цвет, например, жёлтый, розовый или сине-зелёный:



Ещё могут понадобиться цвета, чтобы подчеркнуть разные семантические состояния, например, красный для подтверждения деструктивных действий:



… жёлтый для предупреждений:



… или зелёный, чтобы подчеркнуть положительный тренд:



И несколько оттенков этих цветов, хотя их следует очень экономно использовать в UI.

Если вы создаёте дизайн, в котором цвет помогает различить или классифицировать похожие элементы (например, линии на графиках, события в календаре или теги в проекте), то может потребоваться ещё больше акцентных цветов.

В целом, для сложного UI нередко требуется до десяти разных цветов с 5−10 оттенками каждый.

Заранее определите оттенки


Когда требуется чуть более светлый или тёмный оттенок, не нужно использовать функции препроцессора CSS вроде lighten или darken. Так у вас в итоге появится 35 немного разных синих, которые все выглядят одинаково.

Вместо этого определите фиксированный набор оттенков, из которых будете выбирать.



Как же составить такую палитру?

Сначала выберите базовый цвет


Начните с базового цвета, на котором основаны светлые и тёмные оттенки.

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



Важно отметить, что здесь нет настоящих правил, вроде «начать с яркости 50%» или тому подобных. Каждый цвет ведёт себя немного иначе, поэтому придётся полагаться только на свой вкус.

Установите границы


Затем выберите самый тёмный и самый светлый оттенки. Это тоже не научный подход, но он помогает представить, где будут использоваться цвета, и выбирать их в соответствии с этим контекстом.

Самый тёмный оттенок обычно оставляют для текста, а самый светлый — для фона элемента. Простое оповещение — хороший пример, где сочетаются эти оттенки.



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

Заполните пробелы


Если вы определились с базовым, тёмным и светлым оттенками, то осталось лишь заполнить пробелы между ними.

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

Девять — отличное число, потому что оно хорошо делится, что немного упрощает заполнение пробелов. Давайте назовём самый темный оттенок 900, базовый 500, а самый светлый 100.

Начните с выбора оттенков 700 и 300, которые прямо посредине двух интервалов: они станут идеальным компромиссом между оттенками с обеих сторон.



Это создаёт еще четыре прмежутка в шкале (800, 600, 400 и 200), которые заполняются тем же способом.



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

Что насчёт серых?


С серыми оттенками базовый цвет не так важен, но в остальном процесс такой же. Начните с краёв и заполните пробелы, пока не получите нужную палитру.



Самый тёмный оттенок выберите по цвету самого тёмного текста в проекте, а самый светлый — тот, что хорошо работает в качестве светлого, почти белого фона.

Это не наука


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

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

Как только вы действительно начнёте использовать свои цвета в проекте, почти неизбежно вы захотите чуть изменить насыщенность какого-то оттенка или сделать пару оттенков светлее или темнее. Доверяй своим глазам, а не цифрам.

Просто старайтесь не добавлять слишком часто новые оттенки, когда это необязательно. Если не ограничивать палитру, то можете вообще остаться без цветовой системы.
Support the author
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 12

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

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

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


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



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

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

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

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

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

              Мелкое дополнение: можно получать интересные палитры, если брать в качестве границ основного ряда не просто светлые и темные оттенки базового, а разные тона. Тогда вся палитра будет градиентной. Плюс иногда помогает сохранить узнаваемость, если у заказчика двухцветный фирменный стиль.
            +1
            Как только сказали про 10 серых оттенков, так я сразу вспомнил про стандартное упражнение для начинающих художников — нарисовать десять оттенков серого карандашом. Которых достаточно для любого карандашного рисунка (и весь светотенеовй скилл состоит в том, чтобы определить где какой и как его границы выглядят).
              0
              Спасибо большое за статью. Очень приятно читать и смотреть такие иллюстрации. Отлично сложена мысль, для тех кто особо не разбирается в создании дизайна (вроде меня) неплохая инструкция и пара лайфхаков, как не сделать пестрое чудище.
                0
                Поддерживаю, но немного с другой стороны. Много статей применительно к дизайну про цветовосприятие (типа «синий вызывает чувство расслабленности») или объяснения всяких «комплементарных схем» или еще что-то что мной лично воспринимается сложно. А здесь прям какая-то конкретика и соль для того чтобы брать и делать.
                +3
                А как же «accessibility»? Contrast ratio параметр серого на сером явно не выше 4х будет
                  0
                  Чего-то не нашел в статье мест где контраст был бы не достаточен. Чтобы сделать его меньше четырёх — нужно постараться.
                  ИМХО, чисто черный и белый — это перебор, глаза режет.
                    0

                    Ну и тулза от Lea Verou в тему: https://contrast-ratio.com/
                    Это к слову математики в цветах :)

                  Only users with full accounts can post comments. Log in, please.