Как применить цветовые палитры к вашему сайту Divi (20 примеров!)

В сегодняшнем уроке Divi мы собираемся поделиться некоторыми удивительными цветовыми палитрами, которые вы можете использовать на следующих веб-сайтах, которые вы создадите с Divi. Использование правильных цветов для вашего веб-сайта - один из основных факторов, который определит, как ваш веб-сайт будет выглядеть и ощущаться в целом.

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

Общие советы

1. Выберите темный или светлый веб-сайт.

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

Это сразу же приводит нас к первому вопросу, который вы должны задать себе, если хотите применить цветовую палитру к своему веб-сайту; вы хотите создать темный или светлый веб-сайт? Тот факт, что вы выбираете один, не означает, что вы не можете их комбинировать, но выбор поможет вам легче выбрать цветовую палитру.

2. Выбор цвета

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

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

2 цвета фона

Убедитесь, что выбранные вами цвета фона соответствуют друг другу. Вы будете использовать эти цвета фона рядом друг с другом для получения прекрасных результатов; в них должна быть определенная гармония.

1 цвет шрифта

Следующее, что вам нужно будет выбрать, это цвет шрифта. По логике, цвет шрифта зависит от выбранных вами цветов фона. Если вы выбрали светлый фоновый цвет, убедитесь, что цвет вашего шрифта темный, и наоборот.

1 цвет гиперссылки и призыв к действию

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

1 цвет для последних штрихов

И последнее, но не менее важное: вы можете выбрать другой нестандартный цвет, который придаст цвет вашему сайту. Хотя этот цвет не так важен, как цвет гиперссылки, он поможет вам сбалансировать цветовой баланс на вашем веб-сайте.

3. Убедитесь, что есть достаточный контраст

Как упоминалось ранее; Важно обеспечить контраст между некоторыми цветами в вашей цветовой палитре. Если вы используете цветовую палитру для веб-сайта, этот контраст в первую очередь поможет вам сделать письменный контент, которым вы делитесь, читабельным. Потому что; если ваш контент не читается легко; в чем все-таки цель?

4. Найдите правильный баланс использования цвета.

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

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

Пошаговое руководство: добавление цветовой палитры на ваш веб-сайт

В следующей части этого поста мы расскажем, как применять цветовые палитры к вашему сайту. Мы будем обрабатывать различные шаги, которые мы предпринимаем при добавлении цветов в макет веб-сайта. После этого пошагового руководства вы перейдете к той части, где мы делимся цветовыми палитрами. Мы не только поделились цветами, но и использовали их в макете Divi, чтобы применить пошаговое руководство на практике.

Без лишних слов, давайте рассмотрим различные этапы процесса.

1. Решите, как вы добавите цвета

Вы можете добавить цветовую палитру двумя способами:

• Добавление всех цветов по частям
• Дополните свой сайт раскраской по цвету

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

2. Добавьте цвета фона

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

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

3. Добавьте цвет текста

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

4. Добавьте цвет гиперссылки и CTA на свой веб-сайт.

Следующее, что вы можете сделать, это выделить гиперссылки и призывы к действию на вашем веб-сайте. Они привлекают внимание людей и вызывают у них любопытство, о чем идет речь в ссылке или призыве к действию.

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

5. Добавьте цвет финального штриха

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

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

Цветовые палитры

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

1. Плитка на несколько дней

Первая выбранная нами цветовая палитра содержит в основном более мягкие (и немного пастельные) цвета. Поскольку мы выбрали светлый веб-сайт, более светлые цвета в цветовой палитре занимают большую часть веб-сайта. Тем не менее, более темные цвета в нашей цветовой палитре гарантируют, что веб-сайт содержит необходимый цветовой баланс.

В этом примере используются следующие цвета (слева направо):

• # EBE8E2
• # 768A95
• # B98077
• # 007193
• # E2D7D7

2. Пустыня

Следующая цветовая палитра в списке называется «Пустыня». Цветовой баланс этой цветовой палитры немного склоняется к более темному веб-сайту. В этом примере преобладает синий цвет. Но есть еще один очень светлый цвет текста, который обеспечивает необходимый контраст.

В этой палитре используются следующие цвета (слева направо):

• # 507782
• # 7C8E93
• # D89C79
• # 443F3C
• # FFE8D8

3. Фестиваль

Следующая цветовая палитра - это не та, которую вы часто будете видеть. Цвета не часто встречаются в одной и той же цветовой палитре, но они довольно интригуют. Если вы хотите, чтобы ваш сайт выглядел уникально, эта палитра - ваш лучший выбор.

В этой палитре используются следующие цвета (слева направо):

• # E6EBD1
• # A59E4C
• # 544C4D
• # AF3D4B
• # CED3BC

4. Pinky Promise

Следующая цветовая палитра в ряду - отличный вариант, если вы хотите сделать сайт темного цвета. Как известно, удачным сочетанием являются черные и розовые оттенки. Они придают сайту игривый вид, но при этом не выглядят слишком женственно. Черные оттенки гарантируют, что внешний вид вашего сайта по-прежнему содержит необходимую глубину.

В этой палитре используются следующие цвета (слева направо):

• # 33383A
• # ECC9C8
• # E2566D
• # 4F575A
• # D3D8DA

5. Санторини

В следующей палитре вы можете четко заметить, что синий преобладает над другими цветами. С этой цветовой палитрой вы сразу же получите легкие и позитивные ощущения. Синий, как известно, один из тех цветов, которые люди предпочитают при создании веб-сайтов. Стандартный цвет, отражающий профессионализм. Однако оттенки синего, которые используются в этой цветовой палитре, также демонстрируют игривую сторону.

Цветовая палитра, которую мы использовали в этом примере, следующая (слева направо):

• # 1198EA
• # 0A5785
• # A85A4D
• # F1F5FA
• # C5DFF8

6. Пурпурное удовольствие

Очевидно, что преобладающий цвет в этой цветовой палитре - фиолетовый. Хотя этот цвет часто воспринимается как удручающий, эта цветовая палитра и ее использование на веб-сайте не могут не отличаться. В сочетании с более яркими цветами фиолетовый цвет может дать потрясающие результаты.

В этой цветовой палитре используются следующие цвета:

• # D7D7ED
• # 52517B
• # 737172
• #FCFCFC
• # F0F1A

7. Тонкий

Следующая цветовая палитра, которой мы хотели бы поделиться, довольно нейтральна и выдержана в том же стиле, что и цветовая палитра Festival. Вы не так часто видите это вокруг, но это выглядит очень чистым.

В этом примере используются следующие цвета (слева направо):

• # DAE2D5
• # 4B7263
• # A8A461
• # 494949
• #CCCCCC

8. Корпоративный

Следующая цветовая палитра, которой мы хотим поделиться, идеально подходит для всех типов бизнес-сайтов. Используемые цвета отражают определенную позитивность и молодость. Светлые цвета фона позволяют желтому и бирюзовому цветам повысить ценность веб-сайта.

В этой палитре используются следующие цвета (слева направо):

• # 181242
• # 4ABDAC
• #DBDBDB
• # F7B733
• #FCFCFC

9. Роза

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

В этой палитре используются следующие цвета (слева направо):

• # 152038
• # DDA199
• # FF614C
• # F5F5F5
• # E2E2E2

10. Шоколад

Следующая цветовая палитра, которую мы хотим выделить, - это шоколад. В этой цветовой палитре приятно то, что цвета фона и цвет текста находятся в одной цветовой категории. Это дает возможность двум другим цветам отличаться от этих цветов и привлекать внимание.

В этой палитре используются следующие цвета (слева направо):

• # FFF4E8
• # FFE2C4
• # 822317
• # 935B3B
• # 346E70

11. Изысканный

Следующая цветовая комбинация - это то, чего вы не ожидали с первого взгляда. Фиолетовый и желто-зеленый не так часто используются вместе, но, как вы можете видеть в результате; они очень хорошо сочетаются. Чтобы сосредоточить внимание на этих двух цветах, цвета фона и цвет текста довольно нейтральны.

В этой палитре используются следующие цвета (слева направо):

• # 88D317
• # 4F2649
• #FCFCFC
• #EFEFEF
• # 080816

12. Оливия

Оливия - это цветовая палитра, которая не требует особых объяснений. Очень хорошо сочетаются оливковый и желтый цвета. Сохранение более светлых цветов более нейтральными позволяет этим цветам бросать вызов зрелищу.

В этой палитре используются следующие цвета (слева направо):

• # 778E3B
• # FFD902
• # 132819
• #EFEFEF
• #FCFCFC

13. Золотые ворота

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

В этой цветовой палитре используются следующие цвета (слева направо):

• # 373737
• # F3F4E8
• # ADA075
• # EDE4C9
• # A685BC

14. Капитан

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

В этом посте используются следующие цвета (слева направо):

• # 3B578E
• # DB2323
• # D7DEED
• # F7F9FF
• # 201C44

15. Экологические

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

Цвета в этой палитре (слева направо):

• # C2D3DO
• # 56776A
• # 42B7A7
• # EDEFF4
• # 26423E

16. Мягкое богатство

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

Цвета в этой палитре (слева направо):

• # 984B43
• # 233237
• # B7A97C
• # F9F0D4
• # 527C40

17. Завораживающий

Следующая палитра в ряду - еще один сайт темного цвета. Преобладающие цвета - темно-фиолетовый и серый. Тем не менее, более светлые тона придают сайту немного тепла.

Цвета в этой палитре (слева направо):

• # D0B6D6
• # 3CC203D
• # 898989
• # F2F2F2
• # F9AEBD

18. Монетный двор

Цветовая палитра Mint привносит свежесть на ваш сайт. Несмотря на то, что на первый взгляд очень трезвый, оранжевый и фиолетовый цвет действительно придают веб-сайту ощущение свежести и возрождения.

В этой палитре используются следующие цвета (слева направо):

• # 31190A
• # B4BCA7
• # F99A53
• # 54468E
• # E3EDE5

19. Мягкий желтый

В этой уникальной цветовой палитре преобладают теплые тона. Хотя у нас есть и темный, и светлый цвет в качестве фонового цвета, общее впечатление больше похоже на веб-сайт светлого цвета.

Цвета в этой палитре (слева направо):

• # DDCF30
• # 437468
• # F1FFD1
• # 4A4C49
• # FCFAD9

20. Тайна

Последняя цветовая палитра в строке - это еще одна палитра темных цветов, которую вы можете использовать для своего веб-сайта. Цвета фона, используемые в этой палитре, трезвые и позволяют проявиться другим более ярким цветам в палитре.

Цвета в этой палитре:

• # 131517
• # 13828A
• # 35363A
• # EEF5F7
• # AF8300

Последние мысли

В этом посте мы поделились некоторыми советами о том, как применить выбранную вами цветовую палитру к своему веб-сайту. Кроме того, мы также показали вам 20 красивых цветовых палитр, которые помогут сделать ваш сайт более элегантным. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять комментарии в разделе комментариев ниже.

И пока вы там, дайте нам знать; какая из этих цветовых палитр ваша любимая?

Изображение от EDGOR_21 / shutterstock.com