Цвет 2.0

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

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

Около года назад некий Stuart Brown создал вот такую таблицу (переработано и дополнено мной), взяв за основу цвета из логотипов и CSS наиболее популярных ресурсов Web 2.0:

Нейтральные
	#EEEEEE	Shiny silver
	#FFFFFF	Reddit white
	#F9F7ED	Magnolia Mag.nolia
	#FFFF88	Interactive action yellow
	#CDEB8B	Qoop Mint
	#C3D9FF	Gmail blue
	#36393D	Shadows Grey
Насыщенные
	#FF1A00	Mozilla Red
	#CC0000	Rollyo Red
	#FF7400	RSS Orange
	#008C00	Techcrunch green
	#006E2E	Newsvine Green
	#4096EE	Flock Blue
	#FF0084	Flickr Deep Pink
Приглушенные
	#B02B2C	Ruby on Rails Red
	#D15600	Etsy Vermillion
	#C79810	43 Things Gold
	#73880A	Writely Olive
	#6BBA70	Basecamp Green
	#3F4C6B	Mozilla Blue
	#356AA0	Digg Blue
	#D01F3C	Last.fm Crimson
Прочие
	#0061DE	Flickr light blue
	#EFEFFF	gmail alice blue
	#DEEBFF	Wikipedia lavender
	#EFEFEF	delicious grey
	#FF7B38	listible coral
	#FFF298	digg light yellow
	#EFEBCE	pandora antique white
	#F3AE48	writely sandy brown
	#D6EBAD	counterspot pale goldenrod
	#ADE3EF	counterspot powder blue
	#00457B	minutesinaminute dark teal
	#2971AD	minutesinaminute steel blue
	#FFFFBD	voo2do.com lemon chiffon
	#57A9FD	calendarhub cornflower blue
	#F7F7FF	blinklist ghost white
	#9AC65C	clipmarks dark khaki
	#4ABA00	technorati lime green
	#FD65C2	gimme20 hot pink
	#FF6666	youtube tomato
	#FFC300	karmadu gold
	#B71313	chaamp fire brick
	#9CB6DE	kiko light steel blue
	#4CADD4	bloglines medium turquoise
	#28CF21	pingomatic lime green

Картина оказалась неполной, и ее развили. Tina Roth Eisenberg, а позже Мiles Burke доработали ее, добавив новые цвета, и, похоже, поменяв часть названий. Приводим ее ниже, для сравнения. Картинка в формате .png, так что затянув ее в Photoshop можно пипеткой подбирать цвет.

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

Здесь можно скачать вышеупомянутуюWeb 2.0 палитру в формате .aco (палитра Adobe Photoshop). Открываем и пользуемся! Весит 3 Кб :)

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

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

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

Итак, поехали (все линки открываются в новом окне):

1. http://www.colourlovers.com/

Коммьюнити «цветовых работников», в котором можно проследить текущие цветовые тенденции. Позволяет сравнивать цветовые палитры, создавать и публиковать новые, комментировать существующие. It’s a must!

2. http://www.easyrgb.com/index.php?X=HARM

3. http://colorblender.com/

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

4. http://www.colorjack.com/

Под каждым квадратом (цвета Web 2.0!) - соответствующая гамма

5. http://www.degraeve.com/color-palette/?src=rss

Сервис по составлению палитры на основе растрового изображения. Загружаете, генерируете, используете. Крайне полезно.

6. http://www.colorschemer.com/online.html

7. http://kuler.adobe.com/

Продукт от Adobe. Один из лучших. Рекомендую.
Вроде где-то есть даже виджет для висты :)

8. http://beta.dailycolorscheme.com/

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

9. http://www.colr.org/

10. http://www.colorjack.com/sphere/

11. http://www.genopal.com/template.php?tpl=online

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

12. http://www.pic2color.com/

Аналог №5

13. http://www.colorsontheweb.com/thecolorwizard.asp

14. http://internal.iop.kcl.ac.uk/dev/rgbii/p/

15. http://colorvision.name/

16. http://www.defencemechanism.com/color/

Простенько и чистенько :)

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

http://www.snook.ca/technical/colour_contrast/colour.html

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

Успехов в творчестве!

Technorati : Colors, Web 2.0