Создание сайтов

Выбираем цветовую палитру сайта

Цветовая палитра сайта: что это такое и как ее использовать?

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

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

Сайт Microsoft Internet ExplorerКак вы лодку назовёте — так она и поплывёт. Выбор цвета для сайта имеет примерно такое же значение, как и имя фирмы. И если цвет неудачен, то и фирма будет ассоциироваться с таким цветом, что не есть хорошо.

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

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

Более того: на одном сайте можно использовать несколько цветовых схем. Так, если ваш сайт имеет несколько разделов, то для визуального различения, зрительной привычки и простоты навигации можно каждый раздел решить в своей цветовой гамме. Не выходя за общие стилистические рамки, разумеется. Вот хороший, стильный и главное — свежий пример такого решения: сайт Microsoft Windows.

Тематические цветовые схемы сайта Microsoft Windows

Несколько цветовых схем на одном сайте

Рассмотрим онлайн-инструменты для подбора цветовой палитры сайта.

  • +Photocopa: создаём палитру сайта из картинки

    Photocopa - удобный рабочий сервис извлечения основных цветов из картинкиЕсли у вас есть впечатляющее фото или картинка с правильными цветами, можно воспользоваться вот этим сайтом, который позволяет полуавтоматом (так как из автоматически выбранных цветов придётся-таки вручную выбрать первую пятёрку самых выразительных) создать палитру сайта из любой картинки.
    Минус: сперва надо картинку загрузить в интернет, программа принимает только ссылки.
    Плюс: если вы нашли свою картинку как раз в интернете — всё мгновенно облегчается :)Создание палитры цветов сайта из картинки

  • +Сolourlovers/trends/websites: берем палитру с образцовых сайтов

    Выбор цветовой палитры на основе выбранного сайта: сайт colourlovers.com/web/trends/websitesА на этом сайте вы можете посмотреть, какие цвета сейчас используют популярные сайты и выбрать свой цветовой стиль, скопировав его с понравившегося сайта. Всё очень наглядно: скриншот сайта даётся вместе с используемой на сайте палитрой цветов (см. рис. справа)

  • +Adobe.kuler: выбираем палитру из лучших

    Adobe.Kuler - сервис для создания палитры сайта. Можно выбрать из уже созданных палитр, палитры ранжируются по популярности.На сайте Адобовского кулера можно выбрать из самых популярных цветовых палитр (без привязки к сайтам, что не очень наглядно, так как придётся включить воображение и попытаться представить свой сайт в предлагаемых цветах). Зато сразу видно, какие палитры вызывают одобрение публики, за какое сочетание цветов люди голосуют — они видны сразу на главной странице. Можно поискать палитру по понравившемуся цвету.

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

  • +ColorPix: лучшая программа для снятия цветов с экрана

    ColorPix: программа для работы с цветом. Необходима каждому web-дизайнеруЕсли вы принялись за работу с цветом, вам не обойтись без ColorPix — это небольшая бесплатная программа для Windows и Mac, позволяющая оцифровывать цвета с любой выбранной точки экрана. Кроме того, на сайте программы есть галерея готовых цветовых схем, там есть из чего выбрать.

So, what do you think ?