Цвет фона для сайта: #BADA55-цвета для веб-дизайна / Хабр

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта — Дизайн на vc.ru

Перевод подготовлен для сообщества Dui.

7578 просмотров

Источник uxmovement.

Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?

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

На какую колонку вы можете смотреть дольше?

Пример. Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

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

Яркость против насыщенности

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства.

Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.

Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым.

Сверху: увеличение яркости — больше белого. Снизу: уменьшение насыщенности — больше серого

Влияние цвета на внимание и возбуждение

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

Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue) так же влияют на возбуждение, но насыщенность и яркость оказывают сильнейшее воздействие.

Используйте яркие и насыщенные цвета в кнопках

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

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

Слева: фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке. Справа: кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя

Используйте тёмный и менее насыщенный цвет для фона

Лучше делать цвет фона темнее и менее насыщенным. При затемнении цвета уменьшается содержание белого цвета. В то время как уменьшение насыщенности увеличивает количество серого цвета.

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

Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

Поиски оптимального цвета фона

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

Сначала выберите основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

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

Уменьшите уровень яркости у двух созданных образцов цвета.

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

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

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

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

В итоге ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит, эти цвета наиболее подходящие для использования в работе.

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

Теперь у вас есть в общей сложности восемь оптимальных цветов с различными коэффициентами яркости и насыщенности.

Примеры хорошего и плохого цвета для использования в фоне сайта

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

Слева — плохой зелёный (Panic или Prismic). Справа — хороший зелёный (FreshDesk или Sigstr)

Слева — плохой красный (Telepath или Meat). Справа — хороший красный (AppFigures или Jackie)

Слева — плохой синий (Compose или DareIt). Справа — хороший синий (Republic или MailTag)

Эстетика и юзабилити

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

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

Как подобрать лучшие цвета для сайта

25 мая 2014      Интернет-маркетинг, Контент, Полезные советы, Продвижение сайтов

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

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

Вот основные значения в психологии цвета.

 

Первичные цвета:

• красный – привлекает внимание;
• желтый – несет бодрость и веселье, надежду и оптимизм;
• синий – цвет честности и надежности.

Вторичные:

• оранжевый – достижения, энергия, азарт, успех;
• зеленый – отражает природу и чистоту, свежесть и здоровье;
• фиолетовый – подчеркивает индивидуальность, творчество и изобретательность.

Третичные:

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

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

• Используйте 2-3 цвета в оформлении сайта, не больше. Для усиления можно использовать оттенки основных цветов.

• Белый фон обеспечит читаемость большинства цветов текста, кроме желтого и пастельного. Классика жанра – темный шрифт на белом фоне. Избыток ярких, бьющих по глазам, шрифтов не идет на пользу вашему сайту.
• Темный фон тоже хорошо работает, если цвет текста очень яркий или белый. Однако чтение большого объема мелкого текста на темном фоне затруднено. Нежелательно делать черный и другие темные цвета основным фоном сайта. Но можно использовать для отдельных элементов, например, кнопок меню.
• Используйте контрастные цвета для кнопок, ссылок, мотиваторов. Красный цвет текста призывает к действиям и направляет. Зеленый помогает принять решение. Синий считается самым безопасным цветом, вызывает доверие.

Только не переборщите с контрастами. Все цветовые сочетания должны быть легкими для восприятия!

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

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

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

Люди в тропических странах выбирают яркие и теплые цвета. Те, кто живет в странах с  более холодным климатом – холодные.

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

• Красный – цвет удачи и празднования в Китае, но цвет траура в Южной Африке.
• Желтый – священный и благоприятный в Китае и Индии, однако цвет траура в Египте.
• Зеленый связан с богатством и престижем в Саудовской Аравии, но традиционно запрещен в Индонезии.
• Голубой во всем мире считается цветом для новорожденных мальчиков, розовый – для девочек, а в Бельгии наоборот.

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

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

/Автор статьи: Юлия Мураева/

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

---

* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.

Как изменить цвет фона по умолчанию на вашем веб-сайте Squarespace — Ten Day Designs // Squarespace Web Design

Веб-дизайн

15 июля

Автор Rachel Rising

Вот два способа изменить цветовую тему по умолчанию на вашем сайте.

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

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

Этот цвет будет отображаться на таких элементах, как ваша страница 404 (если вы не создали собственную страницу), а также под любыми разделами, которые вы добавили и которые не занимают всю страницу.

Если вы хотите изменить цвет, установленный в качестве цвета фона по умолчанию, у вас есть два варианта: 1) изменить цвет фона по умолчанию в мобильном приложении Squarespace или 2) добавить CSS на свой сайт. Если вы хотите изменить цвет фона по умолчанию только на одной странице, ниже мы также расскажем, как это сделать.

Вот два варианта изменения цвета фона вашего веб-сайта Squarespace:

1. Измените цвет фона вашего сайта по умолчанию с помощью мобильного приложения Squarespace

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

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

1. Загрузите мобильное приложение Squarespace и войдите в свою учетную запись Squarespace.

2. Нажмите «Настройки», затем «Настройки сайта», затем «Стили сайта».

3. Нажмите значок кисти в верхней части экрана, чтобы открыть редактор стилей, затем нажмите «Цвета». В разделе «Цвета» вы увидите вариант «Тема сайта».

4. Нажмите на эту опцию, и вы сможете изменить цвет фона по умолчанию на всем сайте!

2. Добавьте CSS для изменения фона

У вас также есть возможность добавить CSS для изменения цвета фона на вашем сайте.

Вот код, который вам понадобится:

body {

background: #000000!important;
}

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

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

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

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

закрепите на потом!

5 лайфхаков по дизайну без написания кодаСоздайте первый веб-сайтУдалите прозрачный фонРуководство для начинающих по CSSСсылка в биографии5 Вещи для главной страницы6 Способы улучшения SEOТоп-3 ошибки веб-сайтаНачните вести блог3 ошибки CSSСкрыть публикацию в сводке0003 Рэйчел Райзинг

Цветовые схемы · Shopify Справочный центр

Эта страница была напечатана 30 июня 2023 г. Актуальную версию можно найти на странице https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme.

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

На этой странице

• Настройки цветовой схемы
• Управление цветовой схемой
• Градиенты

Настройки цветовой схемы

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

Настройка	Описание
Фон	Цвет применяется к фону некоторых разделов и к фону кнопки контура.
Фоновый градиент	К фону некоторых разделов применен градиент цветов. Фоновые градиенты заменяют фон, где это возможно.
Текст	Цвет применяется к тексту раздела или блока.
Сплошной фон кнопок	Цвет применяется к фону основной кнопки.
Наклейка на сплошную кнопку	Цвет применяется к основному тексту кнопки.
Кнопка контура	Цвет применяется к тексту и границе дополнительной кнопки.
Тень	Цвет применяется к теням.

Управление цветовой схемой

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

• названия цветов, например красный , черный или синий
• Цветовые коды RGB
• шестнадцатеричных значений цвета

Шагов:

1. В админке Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить рядом с темой, которую вы хотите настроить.
3. Щелкните значок кисти, а затем щелкните Цвета .
4. В разделе Схемы щелкните существующую схему или щелкните Добавить схему , чтобы добавить новую цветовую схему.
5. Щелкните образец цвета для цвета типа содержимого, который вы хотите изменить.
6. Чтобы установить свой цвет, введите шестнадцатеричный код цвета или выберите цвет из палитры цветов. Чтобы установить прозрачный цвет, удалите шестнадцатеричный код из текстового поля.
7. Нажмите Сохранить .

Градиенты

В некоторых темах можно настроить градиент цветов для визуально интересных вариантов фона. Параметр color_background используется для настройки свойства фона CSS.

Наконечник

Чтобы узнать больше о градиентах и ​​фонах CSS, обратитесь к документации Mozilla по линейному градиенту и фонам CSS.

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

Настройка градиентов

1. В админке Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить рядом с темой, которую вы хотите настроить.
3. Щелкните значок кисти, а затем щелкните Цвета .
4. В разделе Схемы щелкните существующую схему, которую вы хотите изменить.
5. Щелкните параметр образца цвета градиента, например Градиент фона .
6. Если вы еще не настроили градиент, то для выбора будут показаны некоторые предустановленные параметры. Выберите любой предустановленный градиент, чтобы открыть панель параметров.
7. Выберите параметры градиента:

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

1. Нажмите Сохранить .

Использование CSS для установки градиентов

Большинство значений свойств фона CSS можно использовать для установки цвета фона. Вы можете использовать это поле для сплошных цветов (например, #000000 , черный , rgb(0,0,0,0) , rgba(0,0,0,0) , hsl(0, 0%, 0%) и hsla(0, 0%, 0% , 1) все создают сплошной черный фон) или для градиентов (например, linear-gradient(red, green) , radio-gradient(red, green) , или conic-gradient(red, green) ) ). Градиенты также могут повторяться.

Шагов:

1. В админке Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить рядом с темой, которую вы хотите настроить.
3. Щелкните значок кисти, а затем щелкните Цвета .
4. В разделе Схемы щелкните существующую схему, которую вы хотите изменить.
5. Щелкните градиент, который вы хотите изменить.
6. Щелкните стрелку рядом с Градиент и выберите CSS .
7. В поле Код CSS введите или вставьте код градиента. Предварительный просмотр редактора темы отображает ваш градиент в соответствующем месте.
8. Нажмите Сохранить .

Удаление градиента

1. В админке Shopify перейдите в Интернет-магазин > Темы .
2. Нажмите Настроить рядом с темой, которую вы хотите настроить.
3. Щелкните значок кисти, а затем щелкните Цвета .
4. В разделе Схемы щелкните существующую схему, которую вы хотите изменить.