Цвета в web-дизайне. Немного теории и удобные инструменты.
Я залез в дебри, которые не собирался осваивать. Но вчерашняя попытка нарисовать дизайн и критика читателей показали, что я у меня плохой вкус на цвета. Ну вот кому-то изначально это дано, а кому-то нет. Только вот кто-то забивает и живёт с этим, а кто-то изучает теорию. Я, например, отношусь к последним.
Обратимся к истории. Цветовой круг изобрел Исаак Ньютон. Да-да, он не только основополагающими законами классической механики известен. Обосновав теорию света и цветов в 1666г, Ньютон заложил основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Сэр Исаак при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым, доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.
Цветовой круг - это гениальная штука. Он позволяет вам выбрать цвета, которые гармонируют между собой. Чтобы найти правильную цветовую схему, необходимо использовать любые два цвета друг напротив друга, любые три цвета на равном расстоянии при формировании треугольника или любой из четырех цветов, образующих прямоугольник (две пары цвета друг напротив друга). Цветовые схемы остаются правильными независимо от угла поворота.
Рассмотрим цветовой круг. Он состоит из шести основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.
Основные цвета
Три основных цвета: красный (#ff0000 в HTML или #F00 в CSS), желтый (#FFFF00 в HTML или #ff0 в CSS) и голубой (#0000FF в HTML или #00f в CSS). Их нельзя получить путем смешивания других цветов.
Составные цвета
Три составных цвета: оранжевый (#ff9900 в HTML или #F90 в CSS), зеленый (#00FF00 в HTML или #0f0 в CSS) и фиолетовый (#FF00FF в HTML или #f0f в CSS). Они получаются от смешивания основных.
Третичные цвета
Чтобы получить один из третичных цветов, необходимо смешать один основной цвет и один вторичный цвет.
Дополнительные цвета
Дополнительные цвета расположены прямо напротив друг друга на цветовом круге: красный и зеленый, синий и оранжевый, фиолетовый и желтый. В сочетании друг с другом, они составляют разительный контраст. Такие сочетания, как правило, используются для выделения некоторых элементов.
Аналогичные цвета
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.
Это необходимая и достаточная теория. На практике же подбирать самому цвета дело достаточно муторное, я это понял на собственном опыте. Но уже довольно давно существуют прекрасные web-сервисы. Я выбрал два, которые мне наиболее понравились.
Color Scheme - инструмент для подбора цветов и генерации цветовых схем. Очень простой и удобный сервис, которые будет совершенно не проблематично освоить.
Adobe Color CC (бывший Adobe Kuler) - мощный сервис от Adobe в помощь дизайнерам и художникам. По мне так этот сервис гораздо сложнее в использовании, но и у него больше возможностей. Из интересных возможностей хочу отметить, что Adobe Color CC может разобрать вашу фотографию или скриншот на отдельные цвета, что может существенно сэкономить вам время при создании цветовой схемы.
И бонусом ещё оставлю здесь сайт COLOURLOVERS. По ссылке множество уже готовых цветовых палитр для сайтов.
В общем, теперь немного подучив матчасть и вооружившись инструментами постараюсь не совершать таких цветовых ошибок в создании дизайнов. Знаний много не бывает.
Обратимся к истории. Цветовой круг изобрел Исаак Ньютон. Да-да, он не только основополагающими законами классической механики известен. Обосновав теорию света и цветов в 1666г, Ньютон заложил основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Сэр Исаак при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым, доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.
Цветовой круг - это гениальная штука. Он позволяет вам выбрать цвета, которые гармонируют между собой. Чтобы найти правильную цветовую схему, необходимо использовать любые два цвета друг напротив друга, любые три цвета на равном расстоянии при формировании треугольника или любой из четырех цветов, образующих прямоугольник (две пары цвета друг напротив друга). Цветовые схемы остаются правильными независимо от угла поворота.
Рассмотрим цветовой круг. Он состоит из шести основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.
Основные цвета
Три основных цвета: красный (#ff0000 в HTML или #F00 в CSS), желтый (#FFFF00 в HTML или #ff0 в CSS) и голубой (#0000FF в HTML или #00f в CSS). Их нельзя получить путем смешивания других цветов.
Составные цвета
Три составных цвета: оранжевый (#ff9900 в HTML или #F90 в CSS), зеленый (#00FF00 в HTML или #0f0 в CSS) и фиолетовый (#FF00FF в HTML или #f0f в CSS). Они получаются от смешивания основных.
Третичные цвета
Чтобы получить один из третичных цветов, необходимо смешать один основной цвет и один вторичный цвет.
Дополнительные цвета
Дополнительные цвета расположены прямо напротив друг друга на цветовом круге: красный и зеленый, синий и оранжевый, фиолетовый и желтый. В сочетании друг с другом, они составляют разительный контраст. Такие сочетания, как правило, используются для выделения некоторых элементов.
Аналогичные цвета
Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.
Это необходимая и достаточная теория. На практике же подбирать самому цвета дело достаточно муторное, я это понял на собственном опыте. Но уже довольно давно существуют прекрасные web-сервисы. Я выбрал два, которые мне наиболее понравились.
Color Scheme - инструмент для подбора цветов и генерации цветовых схем. Очень простой и удобный сервис, которые будет совершенно не проблематично освоить.
Adobe Color CC (бывший Adobe Kuler) - мощный сервис от Adobe в помощь дизайнерам и художникам. По мне так этот сервис гораздо сложнее в использовании, но и у него больше возможностей. Из интересных возможностей хочу отметить, что Adobe Color CC может разобрать вашу фотографию или скриншот на отдельные цвета, что может существенно сэкономить вам время при создании цветовой схемы.
И бонусом ещё оставлю здесь сайт COLOURLOVERS. По ссылке множество уже готовых цветовых палитр для сайтов.
В общем, теперь немного подучив матчасть и вооружившись инструментами постараюсь не совершать таких цветовых ошибок в создании дизайнов. Знаний много не бывает.