Цветовое оформление сайта: от главной страницы к текстовому наполнению

Цвета и их значение при создании дизайна веб-сайта

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

Цвета имеют различное воздействие на людей. Некоторые цвета могут вызывать определенные эмоции. Эмоциональные реакции посетителей могут повлиять на имидж вашей компании, а также могут оказать значительное влияние на её “бренд”.

Если вы сомневаетесь в том, что цвет пробуждает эмоции, тогда давайте рассмотрим такие фразы как: “зеленые глаза монстра”, “красная ярость» или «черное настроение”. Зеленоглазый монстр ссылается на ревность, видеть красный цвет означает, что человек злится, а черное настроение относится к депрессии. Люди ассоциируют цвета с конкретным настроением. Научные тесты доказали, что различные цвета могут сделать людей счастливыми, грустными, расслабленными, взволнованными или сердитыми.

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

Нейтральные цвета

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

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

Коричневый – отвечает за Землю, дом и семьи.

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

Теплые цвета

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

Желтый, может означать слабость или трусость, а также тепло и счастье.

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

Розовый обычно символизирует невинность, женственность и романтику.

Холодные цвета

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

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

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

Веб-безопасные цвета

Вакуумные трубки, ЖК (LCD) и плазменные экраны и так далее, все они отображают цвета по-разному. Есть 216 цветов, которые могут отображаться на каждом типе монитора, в каждом веб-браузер и будут выглядеть почти одинаково.

Цветовые схемы

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

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

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

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

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

Общие рекомендации для выбора цвета

• Текст должен быть читаемым. Очевидно, черным по белому, это выбор по умолчанию, но другие тоже могут быть хороши. Белый или желтый хорошо смотрятся на темном фоне. Но, желтый, зеленый или серый текст на белом фоне лучше не надо.
• Используйте цвета, которые являются привлекательными и приятными для глаз.
• Выберите цвета, которые лучше всего передают то, что вы хотите донести до ваших посетителей.
• Для стабильной цветопередачи в различных браузерах, используйте веб-безопасные цвета.
• Не используйте изображения с обычной цветовой интенсивностью в качестве фона за текстом.
• Цвета должны быть едиными для всех веб-страниц, чтобы создать “бренд” и дать понять посетителям, что они все еще находятся на вашем веб-сайте.

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

15-03-2016

Яркие цвета в веб-дизайне — плюсы и минусы яркой цветовой палитры в дизайне сайта

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

Немного о цвете в веб-дизайне

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

В интернет-пространстве существует около 16,8 миллионов цветов. Однако все цвета являются составляющими трех базовых оттенков — красного, зеленого и голубого. Такая модель называется RGB, аббревиатура, которая состоит из первых букв представленных цветов: R — red (красный), G — green (зеленый), B — blue (голубой).

В зависимости от количества того или иного цвета, можно «вывести» новый цветовой оттенок, задавая определенные значения в модели RGB. Например:

Видно, что полученный оттенок содержит интенсивность 255 для красного, 100 для зеленого и 200 для голубого.

Также все цвета можно «разбавить» белым или черным цветом и получить различные оттенки. Например, оттенки синего:

Таким образом, дизайнеры имеют огромный выбор цветов для макета. От того, какие цвета выберет разработчик, зависит:

• легкость восприятия контента. Пользователи обращают особое внимание на палитру — иногда слишком яркие цвета отвлекают клиентов от полезного контента или мешают восприятию. Например, слишком яркий фон для текста уменьшает его читабельность, поэтому пользователь может проигнорировать контент;
• эмоциональная составляющая сайта. Цветовые оттенки напрямую влияют на эмоции, которые испытывает пользователь при просмотре контента. Различают холодные и теплые цвета, которые вызывают разные чувства — так, холодный синий ассоциируется со строгостью и сдержанностью;
• ассоциация с брендом. Как известно, цвета — один из самых распространенных способов создать фирменный стиль и повысить узнаваемость бренда. Проще всего иллюстрировать данный прием на примере самых популярных сотовых операторов:

Красный прочно ассоциируется у пользователей с МТС, зеленый — с Мегафон и так далее. Цвет у компаний — прочная составляющая бренда, которая позволяет узнавать компанию, даже не используя логотип напрямую.

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

Как дизайнеры составляют палитры

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

Например, есть сайты, на которых можно посмотреть различные цветовые сочетания на реальных примерах

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

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

Больше о поиске идей мы писали здесь.

Преимущества яркой цветовой палитры

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

Запоминаемость ресурса

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

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

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

Эмоции

Яркие цвета — это всегда про эмоции. Яркие цвета влияют на настроение, создают особую атмосферу на сайте, вызывают определенные ассоциации с продуктом.

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

Стиль

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

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

Становление бренда

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

Яркий пример — компания Google. У организации есть несколько обозначений, по которым узнается бренд: это сама надпись перед поисковой строчкой, а также логотипы их продуктов — браузер, диск и так далее.

Такие цвета использует Google для своих логотипов:

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

Яркая цветовая палитра — отличная составляющая фирменного стиля. Бренды, использующие выразительные цвета вместе с интересными иллюстрациями или символами всегда больше запоминаются клиентами. Мы привыкли ассоциировать красную букву «Я» с компанией «Яндекс», различаем по цветам всех операторов, узнаем на улицах курьеров Delivery Club только по зеленой куртке и сумке. Несмотря на то, что цвет не является торговым знаком (зарегистрировать цвет очень сложно, хотя такие прецеденты случались в странах Европы) его можно с успехом использовать как ассоциативную составляющую бренда.

Креативность

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

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

Яркий пример — сайт «Тинькофф журнал». Издание стало популярным не только благодаря интересному контенту, но и необычному дизайну и интересной типографике:

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

Повышение продаж

Еще одна причина, почему яркие цвета популярны в веб-дизайне — повышение уровня конверсии. Дизайнеры научились управлять вниманием пользователей с помощью цвета — например, выделять особо важные элементы (призывы к действию, социальные доказательства) более яркими оттенками.

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

Больше об оформлении промо-сайтов мы писали в этой статье.

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

Недостатки яркой цветовой палитры

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

Сложности с юзабилити

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

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

Сложности с восприятием контента

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

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

Несоответствие тематике

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

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

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

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

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

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

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

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

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

Вторичные:

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

Третичные:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы добрались до темы цветов в HTML. Отмечу, что для управления цветом на веб-страницах в данный момент лучше использовать CSS, но иногда бывают такие ситуации, когда средства CSS недоступные (например, многие почтовые клиенты CSS не понимают). Поэтому будущему веб-мастеру просто необходимо изучить средства HTML, которые позволяют изменять цвет, например для того, чтобы делать яркие и красочные e-mail рассылки, которые будут привлекать внимание целевой аудитории сайта.

Палитра цвета в HTML. Коды HTML цветов. Цвет текста, ссылки, фона в HTML.

Данная запись получилось довольно объемной, но из нее вы узнаете обо всех технических особенностях работы с цветом при помощи HTML. Начнем мы запись с того, что разберемся с вопрос: для чего нам нужно выделять цветом те или иные элементы HTML страницы. Затем мы поговорим про модель RGB, которая позволяет задавать цвета в HTML при помощи специальных кодов (попутно мы рассмотрим десятичные коды задания цвета и шестнадцатеричные значения HTML цветов). Также из данной записи вы узнаете про палитру цвета, а также поймете почему в HTML нет никакой палитры. И завершении этой публикации будут примеры изменения цвета фона, текста и ссылок.

Использование цветов в HTML

Содержание статьи:

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

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

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

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

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

В отрасли IT для манипуляции цветом существует множество цветовых моделей. Самая широко распространённая модель представления цвета – это модель RGB. Про некоторые особенности данной модели мы поговорим здесь, а для более детального знакомства с RGB будет отдельная публикация. Ниже вы найдете список цветовых моделей, используемых в IT (не только в HTML и CSS):

1. Модель RGB. Данная модель получила очень широкое распространение и, пожалуй, является одним из самых удобных и распространенных способов манипуляции цветом HTML элементов.
2. Модель RGBA. Данная модель очень похожа на модель RGB, но включает в себя альфа-канал цвета. Особенность модели RGBA заключается в том, что она позволяет регулировать не только цвет HTML элемента, но и его прозрачность за счет наличия альфа-канала. Модель RGBA была добавлена в CSS3 и не поддерживается старыми браузерами.
3. Модель HSL. Особенность модели HSL заключатся в том, что цвет мы задаем при помощи его параметров: оттенка, напыщенности и светлоты. Данная модель несколько более сложная в понимание, чем модель RGB.
4. Модель HSLA. Данная модель очень похожа на модель HSL, но она так же, как и модель RGBA позволяет работать с альфа-каналом цвета, поэтому при помощи HSLA мы можем задавать не только цвет HTML элемента на странице, но и его прозрачность.
5. Модель HSV (HSB). Данную модель не стоит путать с моделью HSL. Отметим, что первых четыре модели можно использовать в HTML или CSS для оформления веб-страниц, а вот модель HSV – нет. Модель HSV была разработана одним из основателей студии Pixar в 1978 году и очень похожа на HSL.
6. Модель CMY или CMYK. Данная модель используется во всех цветных принтерах для печати. В основе модели CMYK лежит правило, заключающиеся в том, что печать происходит на белых листах бумаги. Любой цвет модели CMYK получается из смешения цветов Cyan (бледно-голубой, бирюзовый), Magenta (пурпурный) и желтого. У каждого цвета в модели CMY есть характеристика непрозрачности (количество краски), измеряющаяся в процентах. Но помимо трех перечисленных цветов, модель CMYK использует еще и черный цвет.

Все вышеперечисленные цветовые модели являются аппаратно-зависимыми, то есть если вы задаете цвет HTML элемента при помощи модели RGB или HSL, то нельзя с точностью утверждать, какой именно оттенок цвета увидит посетитель вашего сайта, так как мониторы у всех пользователей разные и передают они цвета по-разному. Также отметим, что в основе всех вышеперечисленных моделей лежит модель RGB и любой цвет, заданный в любой из моделей (кроме HSLA и RGBA из-за наличия альфа-канала), можно конвертировать в RGB.

Если говорить про аппаратно-независимые модели передачи цвета, то стоит отметить модель LAB. Итак, мы немного отвлеклись от работы с цветом в HTML, познакомившись с некоторыми цветовыми моделями. Отметим, что браузеры «понимают» только первых четыре модели: HSL, RGB, HSLA и RGBA. Поэтому цветом HTML элементов мы можем управлять только при помощи этих моделей.

Как формируется цвет HTML элемента: некоторые особенности модели RGB

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

Итак, модель RGB расшифровывается, как Red, Green, Blue. В основе модели RGB лежит принцип аддитивности. Этот принцип заключается в том, что для получения какого-либо цвета происходит добавление цвета к черному. Для лучшего понимания представьте, что ваш экран – это черная стена и у вас есть три прожектора: первый светит красным цветом, второй светит зеленым, а третий синим. Яркость каждого прожектора вы можете регулировать при помощи линейки, на которой расположены цифры от 0 до 255. Соответственно, если вы установили для прожектора значение ноль, то он выключается и не светит, если значение 255, то прожектор дает максимально яркий цвет.

Пример того, как происходит создания цвета в модели RGB

Таким образом получается, что если вы светите на одну и ту же точку красным и зеленым прожектором, то на черной стене вы заметите желтое пятно. Если комбинируете красный и синий, то получается пурпурный цвет, а если объединяете зеленый и синий, то световое пятно на черной стене будет цвета Cyan, но если вы направите все три прожектора на одну точку, то световое пятно будет белого цвета.

Описанный выше принцип лежит в основе модели RGB и применяется для манипуляции цветами в HTML элементов на странице в браузере.

HTML атрибуты для изменения цвета элементов: цвет фона элемента и цвет текста внутри элемента

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

1. HTML атрибут color. Данный атрибут позволяет изменять цвет текста, находящегося внутри HTML элемента. Атрибут может принимать значения в виде называний HTML цветов и при помощи кодов модели RGB в шестнадцатеричной системе счисления и в десятичной системе счисления. Атрибут color – это уникальный HTML атрибут, который позволяет менять цвет текста внутри некоторых HTML элементов.
2. HTML атрибут text. Данный атрибут является уникальным атрибутом тэга <body> . Тэг <body> вместе с тэгами <html> и <head> образуют структуру HTML документа. Если вы помните, то внутри контейнера <body> размещаются элементы, которые потом отображаются браузером в области просмотра. Атрибут text позволяет задать цвет текста по умолчанию для всей HTML страницы.
3. HTML атрибут bgcolor. Также являет уникальным HTML атрибутом и позволяет изменять цвет фона некоторых HTML элементов.
4. HTML атрибут vlink. Данный атрибут уникален и применяется только к тэгу <body>, чтобы изменить цвет ссылки, которую уже посетил пользователь.
5. HTML атрибут alink. Этот атрибут также уникален и применим только к тэгу <body>. Атрибут alink меняет цвет активной HTML ссылки.
6. HTML атрибут link. Атрибут link используется только вместе с тэгом <body> и служит для изменения цвета ссылок HTML страницы, которые еще не посещал пользователь.

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

Использование десятичных кодов цвета в HTML

Итак, мы говорили о том, что прожектору можно задавать яркость цвета при помощи специальной линейки, на которой расположены пронумерованные рисочки от 0 до 255. А теперь посмотрим, как это нам поможет изменять цвет HTML элементов. Дело всё в том, что цвет текста внутри HTML элемента или цвет фона в HTML мы можем изменять при помощи десятичного кода следующим образом:

<body alink=”rgb (0,0,0)” link=”rgb (255,255,255)” vlink=”rgb (255,0,0)” bgcolor=”rgb (0,255,0)” text=”rgb (0,0,255)”></body>

Если вы создадите HTML документ, в котором контейнер body будет описан, как в примере, то увидите:

1. Цвет фона HTML документа стал зеленым: bgcolor=”rgb (0,255,0)”.
2. Цвет текста HTML страницы станет синим: text=”rgb (0,0,255)”.
3. Цвет HTML ссылки, которую пользователь не посещал, будет белым: link=”rgb (255,255,255)”.
4. Цветы ссылки, которая открыта в данный момент, будет черным: alink=”rgb (0,0,0)”.
5. А цвет HTML ссылки, которую уже посещали, будет красным: vlink=”rgb (255,0,0)”.

Обратите внимание: никто не запрещает вам регулировать «мощность прожектора» по своему усмотрению, вы можете задать HTML цвет, например, таким образом:

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

Семь цветов заданных при помощи десятичных кодов цвета модели RGB

На самом деле неправильно говорить десятичные коды цвета в HTML, правильнее будет сказать десятичные коды цвета RGB, поскольку данная модель используется не только для оформления веб-страниц в HTML и CSS.

Шестнадцатеричные значения HTML цветов

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

Пример перевода десятичного кода цвета в шестнадцатеричный

Для тех, кто не знаком с шестнадцатеричной системой счисления, следует дать небольшое пояснение, чтобы вы без труда могли манипулировать цветом HTML элементов при помощи шестнадцатеричных кодов модели RGB. Во-первых, десятичная система счисления названа так потому, что любое число можно получить комбинацией десяти цифр (терминология важна: между числом и цифрой есть разница): 0, 1, 2, 3, 5, 6, 7, 8, 9.

В шестнадцатеричной системе счисления любое число можно записать при помощи комбинации шестнадцати цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Для простоты понимания можете считать, что a – это десять, а f – это пятнадцать. Например, число шестнадцать будет записано в шестнадцатеричной системе счисления следующим образом: 10. А число 255 будет записано, как ff.

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

<body alink=”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”></body>

Обратите внимание: запись цвета в HTML в шестнадцатеричном формате несколько компактнее, чем в десятичном, это первое. Второе: мощность каждого прожектора задается числами от 0 до 255. Для записи числа 255 требуется две цифры в шестнадцатеричном формате (ff = 250), поэтому яркость каждого канала цвета (наши прожекторы правильно называть цветовой канал, канал цвета) задается двумя цифрами от 0 до f.

Обратите внимание: яркость каждого канала цвета задается отдельно, но если представить, что это одно число, то максимально возможное число в шестнадцатеричной системе счисления модели RGB равно ffffff, оно даст нам белый цвет, а десятичной системе это: 16 777 215. Такое количество цветов и оттенков позволяет задать/использовать модель RGB. Это число получается из того, что у каждого цветового канала есть 256 значений яркости (от 0 до 255), соответственно: 256*256*256 = 16 777 215.

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

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

Некоторые текстовые редактора, такие как Sublime Text 3, Notepad++ и Brackets имеют расширения-палитры, которые очень удобны, когда вы хотите быстро выбрать цвет и изменить его. Про IDE NetBeans в этом плане я ничего сказать не могу.

Имена цветов в HTML

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

Поэтому использование имени цвета в HTML не рекомендуется. Модель RGB является аппаратно-зависимой, а цвет, заданный при помощи имени, зависит от браузера и даже его версии. Давайте попробуем задать цвет элементам HTML страницы при помощи имени:

<body alink=”black” link=”#white” vlink=”red” bgcolor=”green” text=”blue”></body>

Как вы понимаете, цветов и оттенков очень много. Тут стоит отметить, что HTML атрибуты не позволяют задать градиент, такая возможность есть в CSS, но об этом мы поговорим в другой записи. И для многих цветов в HTML есть имена. Таблицу именем цветов в HTML и их RGB коды вы можете найти на моем сайте.

Таблица базовых цветов в HTML: их имена и RGB коды

Таблица сверху демонстрирует какой цвет получит HTML элемент, если вы зададите его при помощи имени. В этой таблице собраны 16 цветов и их имена, которые одобрены консорциумом W3C и должны отображаться одинаково в любом браузере. Но на самом деле в HTML можно использовать порядка 200 имен цвета, которые поддерживают основные браузеры, такие как: Opera, Chrome, Firefox, Safari, Internet Expllorer (на счет последнего данное утверждение очень спорное).

Палитра цвета в HTML

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

Это пример палитры художника, на которой он смешивает краски и получает разные цвета и оттенки

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

Простая цветовая палитра редактора Paint

Отметим, что многие модули и плагины палитры цвета позволяют получить код цвета не только в формате RGB/RGBA, но и в формате других моделей. Запомните, что в HTML палитры нет, ну разве что вы художник до мозга костей и называете палитрой цвета HTML страницы те цвета, которые использовались для ее оформления (ведь иногда палитрой называют цвета, которые использует тот или иной художник, или цвета, которые использовались в создании той или иной картине).

Учимся изменять цвет текста в HTML

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

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Изменяем цвет текста в HTML документе</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body text=»#ff0000″> <h2><font color=»rgb(0,255,0)»>Учимся работать с цветом в HTML</font></h2> <h3><font color=»yellow»>Меняем цвет текста</font></h3> <p>Для изменения цвета текста мы можем использовать уникальный атрибут элемента BODY text, а также использовать элемент FONT и его атрибут color. <font color=»gray»>Этот текст будет иметь серый цвет.</font></p> </body> </html>

Данный файл я сохраню, как color.html и посоветую вам не забывать про пробельные символы для форматирования HTML кода. Запись цвета в десятичной системе счисления не поддерживает Chrome, Firefox и Opera, а вот IE такую запись цвета понимает и подсвечивает HTML заголовок зеленым цветом:

Изменение цвета текста в HTML

Правильно говорить не изменение цвета текста в HTML, а изменение цвета шрифта в HTML. Про шрифты в HTML на моем сайте есть отдельная и довольно подробная публикация, с которой вы можете ознакомиться. В данном случае мы меняли цвет при помощи атрибута text, который задает красный цвет для всего текста HTML страницы, в этом мы можем убедиться: цвет текста в HTML абзаце красный, хотя мы не задавали никаких правил для элемента Р. А также мы видим, что в HTML есть приоритеты применения цвета к HTML элементам и тэг <font> с атрибутом color имеет больший приоритет нежели атрибут text, так как часть текста параграфа выделена серым цветом, а HTML заголовки, соответственно, зеленый и желтый.

Стоит обратить ваше внимание на то, что если вы используете HTML списки, тэги непосредственного форматирования текста в HTML, тэги логического форматирования для выделения важных слов в HTML документе, то тэг <font> должен быть вложен в эти тэги, например:

<ul> <li><font color=”#454621”>Элемент списка</font></li> </ul> <b><font color=”green”>Шрифт будет не только жирным, но и зеленым</font></b> <em><font color=”#ffffff”>Белый курсивный шрифт</font></em>

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

Цвет фона HTML элемента

К сожалению, цвет фона в HTML можно задавать только для всей страницы, вернее для контейнера <body>, в данном случае – это одно и то же (но это не означает, что в CSS нет возможности задавать цвета фона отдельным элементам HTML страницы). Чтобы изменить цвет фона используйте атрибут bgcolor, например: bgcolor=” #000000”. Данное значение сделает цвет фона всей HTML страницы черным:

Пример изменения фона HTML страницы

Обращу ваше внимание, что у HTML элементов TH, TD и TABLE (это элементы HTML таблицы, о которых мы поговорим уже совсем скоро), а также у BODY есть атрибут background, данный атрибут позволяет задавать фоновую картинку данным HTML элементам, которую не стоит путать с цветом фона HTML элемента.

Изменяем цвет HTML ссылки

Когда мы говорили про ссылки в HTML то довольно подробно рассмотрели вопрос изменения цвета ссылок при помощи атрибутов link, vlink и alink. Эти атрибуты уникальные и могут быть применены только к элементу BODY, поэтому цвет меняется сразу для всех ссылок, которые есть в HTML документе.

Но мы можем изменить цвет отдельной ссылки при помощи тэга <font> и атрибута color:

<font color=”gold”><a href=”//zametkinapolyah.ru” title=”Сайт о создании сайтов”>Лучший в мире блог о создании сайтов</a></font>

Данная ссылка очень скромная: ее цвет всегда будет золотым (вне зависимости от того посещал ее пользователь или нет), ну и конечно, у данной ссылки скромный анкор. Таким образом мы выяснили, что цвет HTML ссылки можно менять не только с помощью атрибутов тэга <body>, но а при помощи тэга <font> (при этом цвет ссылки всегда будет таким, какой вы задали в атрибуте color).

Таблица цветов в HTML

Наверное, мы уже сказали всё, что можно про изменение цвета HTML элементов. Нам осталось только добавить, что веб-дизайнеры составили множество различных таблиц HTML цветов, которые используются при оформлении сайта, вот одни из самых популярных:

1. Таблица безопасных веб-цветов. Таблица безопасных веб-цветов или таблица безопасных цветов в HTML и CSS содержит в себе примеры цветов и их коды, записанные в формате модели RGB. В этой таблице собрано 216 цветов, которые будут поддерживаться любым монитором и любым браузером.
2. Таблица имен цветов в HTML. Данную таблицу обычно делят на две: базовую и расширенную. В базовой таблице указано шестнадцать имен HTML цветов, которые будут одинаково отображать все браузеры.

30 цветовых палитр для веб-сайтов — выберите цвета для своего веб-сайта

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

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

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

Как выбрать цвета для веб-сайта

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

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

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

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

Цветовые палитры для сайтов о здоровье и красоте

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

1. Аромат лаванды

Использование холодных тонов, таких как фиолетовый, зеленый и синий, — отличный способ вызвать безмятежность и спокойствие на вашем сайте.Фиолетовый символизирует роскошь и покой, синий символизирует верность и безмятежность, а зеленый придает чувство безопасности и роста. В сочетании эти оттенки идеально подходят для брендов, рекламирующих товары, которые способствуют спокойствию.

2. Безмятежное небо

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

Не бойтесь черпать вдохновение в природе. Изображение предоставлено Тананья Пити.

3. Йога на открытом воздухе

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

4. Очаровательный аптекарь

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

5. Спа-центр

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

Цветовые палитры для предприятий по продаже продуктов питания и напитков

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

6. Яркая чаша

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

7. Звездный синий

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

8. Контрастный цитрус

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

9. Насыщенный красный

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

10. Фермерский рынок

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

Цветовые палитры для сайтов блогов и портфолио

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

11. Работа с сеткой

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

12. Красочная эстетика

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

13. Красивая в розовом

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

14. Коралловая зелень

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

15. Простая красота

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

Цветовые палитры для экологических сайтов

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

16. Зеленая красота

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

17. Рыба-клоун

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

18. Воздействие на океан

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

19. Блестящие лилии

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

20. Амазонский тукан

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

Цветовые палитры для сайтов фитнеса и тренировок

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

21. Силовые тренировки

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

22. Тренажерный зал Excel

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

23. Ряд мощности

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

24. Бесстрашный фитнес

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

25. Поход в горы

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

Цветовые палитры для сайтов одежды и одежды

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

26. Яркая одежда

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

27. Cool Collective

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

28. Коралловый наряд

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

29. Приглушенный стиль

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

30. Дорожные сигналы

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

Изображение обложки через SkyPics Studio.

Ищете другие способы повысить свое присутствие в Интернете? Ознакомьтесь с этими статьями ниже:

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

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

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

12 лучших палитр цветов и инструментов для дизайнеров

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

1. Удлинитель хромированной пипетки ColorPick

ColorPick Eyedropper отлично подходит для любого дизайнера. Это хромовое расширение, которое позволяет легко определять шестнадцатеричный цветовой код любого элемента пользовательского интерфейса, на который вы наводите курсор. Он отлично подходит для быстрого доступа к цветам, от которых вы черпаете вдохновение, просматривая страницы в Интернете.

  импортировать {createMuiTheme} из '@ material-ui / core / styles';

const theme = createMuiTheme ({
  palette: {
    primary: {
      свет: '# 757ce8',
      основная: '# 3f50b5',
      темно: '# 002884',
      ContraText: '#fff',
    },
    вторичный: {
      свет: '# ff7961',
      основной: '# f44336',
      темно: '# ba000d',
      ContraText: '# 000',
    },
  },
});  

  импортировать {createMuiTheme} из '@ material-ui / core / styles';
импортировать фиолетовый из '@ material-ui / core / colors / purple';

const theme = createMuiTheme ({
  palette: {
    primary: {
      основной: фиолетовый [500],
    },
    вторичный: {
      основной: '# f44336',
    },
  },
});  

  импортировать HUE из '@ material-ui / core / colors / HUE';

const color = ОТТЕНОК [ОТТЕНК];  

  импортировать пурпурный из '@ material-ui / core / colors / purple';
импортировать красный цвет из '@ material-ui / core / colors / red';

const primary = красный [500];
const accent = фиолетовый ['A200'];
const accent = фиолетовый.A200;