Создание собственной цветовой палитры / Хабр
Адаптировано из нашей будущей книги «Рефакторинг UI»
Видели эти модные генераторы цветовой палитры? Когда выбираешь цвет, настраиваешь несколько параметров с музыкальными словечками типа «триада» или «четвёртый мажор» — и получаете пять идеальных цветов для своего веб-сайта?
Такой вычислительный и научный подход к выбору идеальной цветовой гаммы крайне соблазнителен, но не очень полезен.
Ну, если не хотите, чтобы сайт выглядел так:
Вы ничего не сделаете с пятью шестнадцатеричными кодами. Чтобы построить что-то реальное, требуется гораздо более полная палитра.
Хорошую цветовую палитру можно разбить на три категории.
Серые
Текст, фон, панели, элементы формы — почти всё это существует в сером интерфейсе.
И вам понадобится больше серых цветов, чем вы думаете.
Кажется, что три или четыре оттенка — это много, но очень скоро вы захотите что-то немного темнее, чем оттенок № 2, но немного светлее, чем оттенок № 3.
На практике желательно выбрать 8−10 оттенков (подробнее об этом позже). Это не так много, чтобы высматривать разницу между оттенками № 77 и № 78, но вполне достаточное количество.
Истинный чёрный, как правило, выглядит неестественно, поэтому начните с очень тёмного серого и постепенно переходите к белому.
Основные цвета
Большинству сайтов нужен один или два цвета для основных действий, элементов навигации и т.д. Эти цвета определяют общий вид сайта: те, которые заставляют думать о Facebook как о «синем», хотя на самом деле он в основном серый.
Как и с серой палитрой, нужно выбрать палитру (5−10) более светлых и более тёмных оттенков.
Самые светлые оттенки могут быть полезны в качестве тонированного фона для таких вещей, как оповещения, а более тёмные отлично подходят для текста.
Акцентные цвета
Помимо основных, каждому сайту нужно несколько акцентных цветов для общения с пользователем.
Так, для выделения новой функции можно выбрать привлекательный цвет, например, жёлтый, розовый или сине-зелёный:
Ещё могут понадобиться цвета, чтобы подчеркнуть разные семантические состояния, например, красный для подтверждения деструктивных действий:
… жёлтый для предупреждений:
… или зелёный, чтобы подчеркнуть положительный тренд:
И несколько оттенков этих цветов, хотя их следует очень экономно использовать в UI.
Если вы создаёте дизайн, в котором цвет помогает различить или классифицировать похожие элементы (например, линии на графиках, события в календаре или теги в проекте), то может потребоваться ещё больше акцентных цветов.
В целом, для сложного UI нередко требуется до десяти разных цветов с 5−10 оттенками каждый.
Когда требуется чуть более светлый или тёмный оттенок, не нужно использовать функции препроцессора CSS вроде lighten или darken.
Вместо этого определите фиксированный набор оттенков, из которых будете выбирать.
Как же составить такую палитру?
Начните с базового цвета, на котором основаны светлые и тёмные оттенки.
Нет реального научного способа, но для основных и акцентных цветов хорошее эмпирическое правило — выбрать оттенок, который хорошо подходит для фона кнопки.
Важно отметить, что здесь нет настоящих правил, вроде «начать с яркости 50%» или тому подобных. Каждый цвет ведёт себя немного иначе, поэтому придётся полагаться только на свой вкус.
Затем выберите самый тёмный и самый светлый оттенки. Это тоже не научный подход, но он помогает представить, где будут использоваться цвета, и выбирать их в соответствии с этим контекстом.
Самый тёмный оттенок обычно оставляют для текста, а самый светлый — для фона элемента.
Простое оповещение — хороший пример, где сочетаются эти оттенки.
Начните с цвета, который соответствует тону основного цвета, а затем меняйте насыщенность и яркость, пока не будете удовлетворены.
Если вы определились с базовым, тёмным и светлым оттенками, то осталось лишь заполнить пробелы между ними.
Для большинства проектов понадобится не менее пяти оттенков на цвет, а лучше ближе к десяти, чтобы не чувствовать стеснения.
Девять — отличное число, потому что оно хорошо делится, что немного упрощает заполнение пробелов. Давайте назовём самый темный оттенок 900, базовый 500, а самый светлый 100.
Начните с выбора оттенков 700 и 300, которые прямо посредине двух интервалов: они станут идеальным компромиссом между оттенками с обеих сторон.
Это создаёт еще четыре прмежутка в шкале (800
В конечном итоге вы получите довольно сбалансированный набор цветов, вполне достаточный для реализации ваших дизайнерских идей.
С серыми оттенками базовый цвет не так важен, но в остальном процесс такой же. Начните с краёв и заполните пробелы, пока не получите нужную палитру.
Самый тёмный оттенок выберите по цвету самого тёмного текста в проекте, а самый светлый — тот, что хорошо работает в качестве светлого, почти белого фона.
Как бы ни хотелось, но при выборе идеальной цветовой палитры нельзя полагаться только на математику.
Систематический подход, подобный вышеописанному, отлично подходит для начала, но не бойтесь изменять его при необходимости.
Как только вы действительно начнёте использовать свои цвета в проекте, почти неизбежно вы захотите чуть изменить насыщенность какого-то оттенка или сделать пару оттенков светлее или темнее. Доверяй своим глазам, а не цифрам.
Просто старайтесь не добавлять слишком часто новые оттенки, когда это необязательно. Если не ограничивать палитру, то можете вообще остаться без цветовой системы.
Как использовать цветовые палитры Divi на своем веб-сайте
Худшее, что вы видите в Интернете, — это скучный веб-сайт. Некоторые веб-сайты имеют продуманный дизайн с роскошным видом, а некоторые просто минималистичны. Внешний вид веб-сайта зависит от его характера. При проектировании чрезвычайно важны цветовые палитры. Использование правильной цветовой схемы может выделить ваш сайт из толпы. К счастью, Divi поддерживает систему цветов Magic и функцию глобальных цветов, которая позаботится обо всем. Ваш веб-сайт Divi выиграет от цветовых палитр, которые вы используете на веб-сайте. Ваши посетители будут потрясены результатами.
Рекомендации по выбору цветовых схем
Однако добавить цветовую схему на ваш веб-сайт Divi просто, и очень важно выбрать цветовую схему, подходящую для вашего бизнеса и бренда. Здесь нетрудно использовать существующие цвета вашей компании. Помимо изучения теории цвета (что увлекательно), вот несколько подсказок, которые помогут вам начать работу с новой цветовой схемой.
Решите, хотите ли вы темный или светлый веб-сайт.
Несомненно, в вашей цветовой гамме будут светлые и темные оттенки. Цветовая палитра должна иметь контраст, чтобы текстовая информация выделялась. Это подводит нас к первому соображению, которое вы должны учитывать при выборе цветовой схемы для своего веб-сайта: вы хотите темный или светлый веб-сайт? Выбор только одного не исключает возможности комбинирования его с другими, но упрощает выбор цветовой схемы.
Выбор цвета
Теоретически у вас есть полный контроль над количеством цветов в вашей цветовой схеме. Цветовые палитры нельзя применять или определять единым методом. Однако палитра цветов Divi предлагает использовать пять цветов, чтобы получить гармоничную цветовую схему. Используя единую технику, мы будем использовать один и тот же стиль каждый раз, когда покажем вам новую цветовую палитру, чтобы вам было легче адаптироваться к дизайну вашего веб-сайта. Если вы хотите следовать нашей технике, вам понадобится несколько разных цветов в вашей цветовой палитре.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасФоновый цвет
Цвета фона должны быть светлыми, и он должен быть светлым, чтобы поверх него ярко отображались другие элементы на странице. Выбирая цвета фона рядом друг с другом, можно получить красивый результат.
Цвет шрифта
Цвет шрифта — это следующее, на что вы должны обратить внимание. Цвет шрифта зависит от цвета фона. Если вы используете светлый фон, будет разумным выбрать темный цвет для шрифтов.
Цвет гиперссылки и призыва к действию
Гиперссылки на вашем веб-сайте существенно влияют на внешний вид сайта в целом. Цвет, который вы выбираете для призыва к действию на своем веб-сайте, должен выделяться на фоне остальной палитры.
Цвет для завершающих штрихов
Наконец, у вас есть возможность использовать другой предварительно выбранный цвет, чтобы оживить ваш сайт. По сравнению с цветом гиперссылки этот менее значим; тем не менее, это поможет вам создать гармоничную цветовую схему на вашем сайте.
Включите достаточный контраст
По тем же причинам, что и раньше, важно использовать контрастные оттенки в вашей цветовой схеме. Если вы разрабатываете веб-сайт, разница в цветовых диаграммах поможет выделить ваш письменный контент. Потому что, если ваш материал сложен для понимания, что в этом хорошего?
Выбор цвета и баланс
Как часто цвет должен появляться в вашей палитре, можно определить с помощью множества методов. Вам нужен приличный цветовой баланс, если вы не хотите, чтобы ваши посетители были ошеломлены цветами на вашем веб-сайте. Поэтому старайтесь использовать более нейтральные цвета из своей цветовой палитры, выделяя свое сообщение другими оттенками.
Как добавить цветовую палитру на сайт Divi
Divi — отличная тема и конструктор для веб-сайтов. Он имеет различные встроенные функции, которые помогут вам создать привлекательный веб-сайт. В Divi есть основная функция для выбора цветовой палитры, и теперь мы попробуем ее!
Цветовая палитра Divi по умолчанию
Первое, что вам нужно сделать, это перейти к Divi — Theme Options на панели инструментов WordPress.
Вы можете найти элемент Color Pickers Default Palette на вкладке General. Это позволяет вам быстро получить доступ к любым восьми цветам, которые вы хотите, в конструкторе Divi, когда вы используете палитру цветов. Хотя это наиболее распространенные цвета, они не являются исчерпывающим набором, применимым к каждому веб-сайту. Обратите внимание, что эти цвета здесь предназначены только для визуального представления. Вам нужно применить их, чтобы быть на сайте вручную.
Внутри Divi Builder
Независимо от того, используете ли вы палитру Divi или нет, вы сможете изменять цвета различных элементов на своем сайте. Для этого перейдите в Divi Builder и отредактируйте настройки модуля, чтобы установить новую цветовую схему. Вы можете найти значок с многоточием под палитрой цветов для любого элемента (три точки). Вы будете отправлены в инструмент Divi Magic Color, когда вы нажмете на него. Вы получите последовательность дополнительных цветовых палитр на основе недавно использованных цветов на странице, и все они должны хорошо смотреться вместе.
Глобальные настройки цвета
Поскольку мы уже выбрали цвета, пора сделать их глобальными. Независимо от того, какой модуль или элемент находится на странице, вы можете настроить глобальные цвета так, чтобы они менялись во всем. Вам не придется делать это 100 раз, например, если вы хотите переключаться между пятью разными цветами. Вам придется пройти его пять раз.
Перейдите к модулю, в котором есть палитра цветов, и начните с него. Вы найдете глобальную ссылку чуть ниже. При нажатии на нее исчезает вся палитра. Щелкнув по символу «\ 002B», вы можете выбрать цвета, доступные каждому.
Появится палитра цветов, и после выбора нажмите зеленую отметку, чтобы добавить ее.
Не имеет значения, в каком направлении указывает белый круг. Шестнадцатеричное значение используется для того, чтобы сделать глобальные цвета более красочными. Рядом со знаком плюс был добавлен цвет по умолчанию. Вместо обычного круга символ в форме капли на цвете показывает, что цвет был применен к сайту.
Теперь щелкните выбранный цвет и, чтобы добавить его в список, выберите «Заменить глобальный цвет».
Чтобы сохранить полную палитру под глобальной ссылкой, повторите процесс для каждого цвета в вашем выборе. При применении новой палитры ко всем компонентам на странице важно помнить об этом.
Реализуйте глобальные цвета
Следующим шагом является внесение глобальных изменений во все элементы одного цвета на вашем веб-сайте. Если вы хотите изменить цвет элемента, перейдите к этому элементу и щелкните правой кнопкой мыши. Следующим шагом является использование контекстного меню для выбора «Найти и заменить». На данном этапе этот цвет не следует делать глобальным. Это компонент того, что будет дальше.
На следующем шаге у вас будет возможность выбрать свой собственный цвет вместо цвета по умолчанию. В разделе «Заменить на» выберите глобальный цвет, который вы хотите применить ко всей странице, и нажмите «Заменить». Заменить все обнаруженные значения в каждом типе опции, а не только [ввести фактический тип элемента], является обязательным элементом проверки.
Используя этот метод, вы можете быть уверены, что он изменит цвет, что бы ни случилось.
Теперь вы можете настроить этот глобальный цвет, и в результате все его элементы обновятся. Примечательно, что вы не сделали новый выбор в цветовом круге. Это изменит оттенок существующего цвета. Поскольку вы обозначили каждый экземпляр этого конкретного цвета как глобальный, вы можете изменить его один раз, чтобы он вступил в силу для всех экземпляров этого цвета.
Чтобы использовать новую палитру, повторите предыдущие шаги для каждого цвета. Вам нужно внести только одну корректировку в цветовую схему для каждой из них. Это не простая замена всех элементов одного оттенка.
Заключительные слова
Divi всегда думает о клиентах и пытается понять, насколько легко и за меньшее время мы можем создать хороший дизайнерский модуль. Выбрать глобальную цветовую палитру стало проще. Используя встроенную функцию поиска и замены Divi , вы можете выбрать новый цвет, и он автоматически заменит любые его экземпляры на странице, где он появляется.
Надеюсь, это поможет вам сэкономить время и повысит эффективность. Если вам понравился пост, поделитесь им!
веб-цветовая палитра | University Brand Guide
Цвета, указанные ниже, относятся к цифровым материалам на экране. Были предоставлены как значения RGB, так и коды HEX. Все дисплеи разные, поэтому на разных устройствах могут быть небольшие различия.
Пожалуйста, ознакомьтесь с разделом «Использование цвета в Интернете», чтобы ознакомиться с рекомендациями по использованию цвета на веб-сайтах.
Основные цвета
HEX
500000
R-80
G-0
Б-0
HEX
FFFFFF
R-255
G-255
B-255
Дополнительные цвета
HEX
3C0000
R-60
G-0
B-0
HEX
003C71
R-0
G-60
B-113
HEX
5B6236
R-91
G-98
Б-54
HEX
744F28
R-116
G-79
B-40
HEX
998542
R-153
G-133
B-66
HEX
D6D3C4
R-214
B-196
HEX
f6f6f6
R-246
G-246
B-246
HEX
eaeaea
R-234
G-234
B-234
HEX
d1d1d1
R-209
G-209
B-209
HEX
a7a7a7
R-167
G-167
B-167
HEX
707070
R-112
G-112
B-112
HEX
3e3e3e
R-62
Г-62
Б-62
HEX
333333
R-51
G-51
B-51
HEX
202020
R-32
G-32
B-32
HEX
141414
R-20
G-20
B-20
HEX
000000
R-0
G-0
B-0
Акцентные цвета (использовать экономно)
ШЕСТИГР.
FCE300
Р-252
Г-227
Б-0
Шестигранник E4002B
Р-228
Г-0
Б-43
ШЕСТИГРАННЫЙ 732F2F
Р-115
Г-47
Б-47
Цветовые пропорции
Основная цветовая палитра является основой общей цветовой схемы. У Эгги Марун всегда должно быть сильное присутствие. Вторичные цвета используются в меньшей пропорции и никогда не должны подавлять основные цвета. Акцентные цвета используются в небольших количествах, чтобы выделить или сбалансировать элементы композиции.
Палитра функций
Эти цвета следует использовать только для веб-функций, перечисленных ниже.
Цвета звеньев
HEX
006483
R-0
G-100
B-131
Дополнительные состояния при наведении
ШЕСТИГР. 004362
Р-0
Г-67
Б-98
См. перо Ссылки от TAMU MarComm (@tamumarcomm) на КодПене.
Сообщения об ошибках и успехах
Шестнадцатеричный 3ed488
Р-0
Г-67
Б-98
Шестигранник E4002B
Р-228
Г-0
Б-43
См.
перо
Коллекция кнопок от TAMU MarComm (@tamumarcomm)
на КодПене.
цветов для Интернета — бренд и визуальная идентификация — UW-Madison
Использование цвета — один из наиболее эффективных способов установить непосредственную связь с UW-Madison. Официальные цвета университета — красный и белый барсук (также называемый кардиналом). Цвета, используемые в веб-темах и шаблонах UW-Madison, показаны ниже.
| Цвет | SASS Переменная | HEX Код | Назначение/применение |
|---|---|---|---|
| UW Красный | $uw-красный | #c5050c | UW — основной цвет Madison. |
| UW Красный Темный | $uw-красно-темный | #9b0000 | Акцентный цвет. Используется в компонентах чередующихся блоков. |
| UW Фон страницы | $uw-страница-bg | #f7f7f7 | Фоновый и акцентный цвет. |
| UW серо-голубой | $uw-серо-голубой | #папафе1 | Фоновый и акцентный цвет. |
| UW Серый Темный | $uw-серый-темнее | #646569 | Цвет фона элемента дизайна и цвет акцента. |
| UW Серый Самый темный | $uw-серый-самый темный | № 282728 | Цвет фона элемента дизайна, цвет акцента и цвет фона нижнего колонтитула. Часто используется вместо черного. |
| Шрифт UW Body | $uw-тело-шрифт | № 494949 | Используется для стандартного текста на белом фоне. |
| Цвет анкера UW | $uw-якорь-цвет | № 0479a8 | Используется для ссылок в стандартном тексте на белом фоне. |
| UW Серый текст нижнего колонтитула | $uw-серый-футер-текст | #ададад | Используется для текста нижнего колонтитула. |
| UW Серый текст нижнего колонтитула | $uw-серый-нижний колонтитул-текст-наведение | #f9f9f9 | Используется для ссылок в нижнем колонтитуле.  |
Используется для элементов дизайна, панелей навигации, несвязанных заголовков и фона. Не используется для ссылок.
