Содержание

Безопасные цвета. Таблица безопасных веб-цветов.

Понятие «безопасные веб-цвета» (Web Safe colors) вошло в обиход в середине 90-х годов прошлого века, когда предпринимались попытки стандартизации воспроизведения цвета для разных платформ и браузеров.

Что такое безопасные веб-цвета.

В девяностые годы подавляющее большинство компьютеров было способно вывести на экран одновременно не более 256 цветов. У данных ограничений было много причин, в первую очередь – это высокая стоимость видеопамяти, ранние видеокарты имели максимальный объем 512 КБ, достаточный для отображения 256 цветов одновременно (8 бит), воспроизведение же большего количества требовало увеличения графической памяти.

Помимо ограниченных возможностей ПК, в то время, существовала проблема цветопередачи, один и тот же цвет на различных типах компьютеров, мониторов и браузерах мог выглядеть по-разному вследствие замены его ближайшим или же дизеринга (имитации путем размещения растровых точек доступных цветов в шахматном порядке, что при значительном уменьшении создает иллюзию целостности цвета). Данные причины и послужили поводом для создания Линдой Вайнман «безопасной» палитры состоящей из 216 цветов – своего рода неформального стандарта для сети Интернет. Палитра была сформирована из равномерно распределенных цветов красного, зеленого, синего в диапазоне от 00 до FF с шагом в 20% (00, 33, 66, 99, CC, FF) для каждого канала. Почему 216, а не 256? Дело в том, что остальные сорок резервировались либо операционными системами (Windows, Mac OS), либо же браузерами (Internet Explorer, Netscape).

На протяжении 2000-х использование веб-безопасных цветов постепенно теряло свою актуальность. Видеокарты совершенствовались, а использование 8-битных дисплеев сокращалось в пользу 24-битных.

На сегодняшний день компьютеры поддерживают миллионы цветов. Мониторы, операционные системы, программное обеспечение не всегда отображают их одинаково точно, но представление цвета, как правило, достаточно схоже. Для сравнения: в данный момент компьютеры и мониторы способны отображать 24-битный или 32-битный цвет, что соответствует 16 777 216 возможных оттенков. Однако, не смотря на это Как говорилось выше, ограничения использования в вебе исключительно «безопасных» цветов считается неким анахронизмом, в палитрах продуктов Adobe (Фотошоп, Иллюстратор, Премьер) до сих пор присутствует опция «Only Web Colors» («Только Web-цвета»).

Таблица «безопасных» цветов.

Приведенная ниже таблица представляет двести шестнадцать «безопасных» цветов и их значения в шестнадцатеричном коде (HEX), HSL и RGB. Перейдя по ссылке в таблице можно ознакомится с другими параметрами, цветовыми схемами, использованием цвета в CSS и SVG.

ЦветH S LR G B
#0000000°, 0%, 0%0%, 0%, 0%
#000033240°, 100%, 10%0%, 0%, 20%
#000066240°, 100%, 20%0%, 0%, 40%
#000099240°, 100%, 30%0%, 0%, 60%
#0000CC240°, 100%, 40%0%, 0%, 80%
#0000FF240°, 100%, 50%0%, 0%, 100%
#003300120°, 100%, 10%0%, 20%, 0%
#003333180°, 100%, 10%0%, 20%, 20%
#003366210°, 100%, 20%0%, 20%, 40%
#003399220°, 100%, 30%0%, 20%, 60%
#0033CC225°, 100%, 40%0%, 20%, 80%
#0033FF228°, 100%, 50%0%, 20%, 100%
#006600120°, 100%, 20%0%, 40%, 0%
#006633150°, 100%, 20%0%, 40%, 20%
#006666180°, 100%, 20%0%, 40%, 40%
#006699200°, 100%, 30%0%, 40%, 60%
#0066CC210°, 100%, 40%0%, 40%, 80%
#0066FF216°, 100%, 50%0%, 40%, 100%
#009900120°, 100%, 30%0%, 60%, 0%
#009933140°, 100%, 30%0%, 60%, 20%
#009966160°, 100%, 30%0%, 60%, 40%
#009999180°, 100%, 30%0%, 60%, 60%
#0099CC195°, 100%, 40%0%, 60%, 80%
#0099FF204°, 100%, 50%0%, 60%, 100%
#00CC00120°, 100%, 40%0%, 80%, 0%
#00CC33135°, 100%, 40%0%, 80%, 20%
#00CC66150°, 100%, 40%0%, 80%, 40%
#00CC99
165°, 100%, 40%0%, 80%, 60%
#00CCCC180°, 100%, 40%0%, 80%, 80%
#00CCFF0°, 0%, 0%%, %, %
#00FF00120°, 100%, 50%0%, 100%, 0%
#00FF33132°, 100%, 50%0%, 100%, 20%
#00FF66144°, 100%, 50%0%, 100%, 40%
#00FF99156°, 100%, 50%0%, 100%, 60%
#00FFCC168°, 100%, 50%0%, 100%, 80%
#00FFFF180°, 100%, 50%0%, 100%, 100%
#3300000°, 100%, 10%20%, 0%, 0%
#330033300°, 100%, 10%20%, 0%, 20%
#330066270°, 100%, 20%20%, 0%, 40%
#330099260°, 100%, 30%20%, 0%, 60%
#3300CC255°, 100%, 40%20%, 0%, 80%
#3300FF252°, 100%, 50%20%, 0%, 100%
#33330060°, 100%, 10%20%, 20%, 0%
#3333330°, 0%, 20%20%, 20%, 20%
#333366240°, 33%, 30%20%, 20%, 40%
#333399240°, 50%, 40%20%, 20%, 60%
#3333CC240°, 60%, 50%20%, 20%, 80%
#3333FF240°, 100%, 60%20%, 20%, 100%
#33660090°, 100%, 20%20%, 40%, 0%
#336633120°, 33%, 30%20%, 40%, 20%
#336666180°, 33%, 30%20%, 40%, 40%
#336699210°, 50%, 40%20%, 40%, 60%
#3366CC220°, 60%, 50%20%, 40%, 80%
#3366FF225°, 100%, 60%20%, 40%, 100%
#339900100°, 100%, 30%20%, 60%, 0%
#339933120°, 50%, 40%20%, 60%, 20%
#339966150°, 50%, 40%20%, 60%, 40%
#339999180°, 50%, 40%20%, 60%, 60%
#3399CC200°, 60%, 50%20%, 60%, 80%
#3399FF210°, 100%, 60%20%, 60%, 100%
#33CC00105°, 100%, 40%20%, 80%, 0%
#33CC33120°, 60%, 50%20%, 80%, 20%
#33CC66140°, 60%, 50%20%, 80%, 40%
#33CC99160°, 60%, 50%20%, 80%, 60%
#33CCCC180°, 60%, 50%20%, 80%, 80%
#33CCFF195°, 100%, 60%20%, 80%, 100%
#33FF00108°, 100%, 50%20%, 100%, 0%
#33FF33120°, 100%, 60%20%, 100%, 20%
#33FF66135°, 100%, 60%20%, 100%, 40%
#33FF99150°, 100%, 60%20%, 100%, 60%
#33FFCC165°, 100%, 60%20%, 100%, 80%
#33FFFF180°, 100%, 60%20%, 100%, 100%
#6600000°, 100%, 20%40%, 0%, 0%
#660033330°, 100%, 20%40%, 0%, 20%
#660066300°, 100%, 20%40%, 0%, 40%
#660099280°, 100%, 30%40%, 0%, 60%
#6600CC270°, 100%, 40%40%, 0%, 80%
#6600FF264°, 100%, 50%40%, 0%, 100%
#66330030°, 100%, 20%40%, 20%, 0%
#6633330°, 33%, 30%40%, 20%, 20%
#663366300°, 33%, 30%40%, 20%, 40%
#663399270°, 50%, 40%40%, 20%, 60%
#6633CC260°, 60%, 50%40%, 20%, 80%
#6633FF255°, 100%, 60%40%, 20%, 100%
#66660060°, 100%, 20%40%, 40%, 0%
#66663360°, 33%, 30%40%, 40%, 20%
#6666660°, 0%, 40%40%, 40%, 40%
#666699240°, 20%, 50%40%, 40%, 60%
#6666CC240°, 50%, 60%40%, 40%, 80%
#6666FF240°, 100%, 70%40%, 40%, 100%
#66990080°, 100%, 30%40%, 60%, 0%
#66993390°, 50%, 40%40%, 60%, 20%
#669966120°, 20%, 50%40%, 60%, 40%
#669999180°, 20%, 50%40%, 60%, 60%
#6699CC210°, 50%, 60%40%, 60%, 80%
#6699FF220°, 100%, 70%40%, 60%, 100%
#66CC0090°, 100%, 40%40%, 80%, 0%
#66CC33100°, 60%, 50%40%, 80%, 20%
#66CC66120°, 50%, 60%40%, 80%, 40%
#66CC99150°, 50%, 60%40%, 80%, 60%
#66CCCC180°, 50%, 60%40%, 80%, 80%
#66CCFF200°, 100%, 70%40%, 80%, 100%
#66FF0096°, 100%, 50%40%, 100%, 0%
#66FF33105°, 100%, 60%40%, 100%, 20%
#66FF66120°, 100%, 70%40%, 100%, 40%
#66FF99140°, 100%, 70%40%, 100%, 60%
#66FFCC160°, 100%, 70%40%, 100%, 80%
#66FFFF180°, 100%, 70%40%, 100%, 100%
#9900000°, 100%, 30%60%, 0%, 0%
#990033340°, 100%, 30%60%, 0%, 20%
#990066320°, 100%, 30%60%, 0%, 40%
#990099300°, 100%, 30%60%, 0%, 60%
#9900CC285°, 100%, 40%60%, 0%, 80%
#9900FF276°, 100%, 50%60%, 0%, 100%
#99330020°, 100%, 30%60%, 20%, 0%
#9933330°, 50%, 40%60%, 20%, 20%
#993366330°, 50%, 40%60%, 20%, 40%
#993399300°, 50%, 40%60%, 20%, 60%
#9933CC280°, 60%, 50%60%, 20%, 80%
#9933FF270°, 100%, 60%60%, 20%, 100%
#99660040°, 100%, 30%60%, 40%, 0%
#99663330°, 50%, 40%60%, 40%, 20%
#9966660°, 20%, 50%60%, 40%, 40%
#996699300°, 20%, 50%60%, 40%, 60%
#9966CC270°, 50%, 60%60%, 40%, 80%
#9966FF260°, 100%, 70%60%, 40%, 100%
#99990060°, 100%, 30%60%, 60%, 0%
#99993360°, 50%, 40%60%, 60%, 20%
#99996660°, 20%, 50%60%, 60%, 40%
#9999990°, 0%, 60%60%, 60%, 60%
#9999CC240°, 33%, 70%60%, 60%, 80%
#9999FF240°, 100%, 80%60%, 60%, 100%
#99CC0075°, 100%, 40%60%, 80%, 0%
#99CC3380°, 60%, 50%60%, 80%, 20%
#99CC6690°, 50%, 60%60%, 80%, 40%
#99CC99120°, 33%, 70%60%, 80%, 60%
#99CCCC180°, 33%, 70%60%, 80%, 80%
#99CCFF210°, 100%, 80%60%, 80%, 100%
#99FF0084°, 100%, 50%60%, 100%, 0%
#99FF3390°, 100%, 60%60%, 100%, 20%
#99FF66100°, 100%, 70%60%, 100%, 40%
#99FF99120°, 100%, 80%60%, 100%, 60%
#99FFCC150°, 100%, 80%60%, 100%, 80%
#99FFFF180°, 100%, 80%60%, 100%, 100%
#CC00000°, 100%, 40%80%, 0%, 0%
#CC0033345°, 100%, 40%80%, 0%, 20%
#CC0066330°, 100%, 40%80%, 0%, 40%
#CC0099315°, 100%, 40%80%, 0%, 60%
#CC00CC300°, 100%, 40%80%, 0%, 80%
#CC00FF288°, 100%, 50%80%, 0%, 100%
#CC330015°, 100%, 40%80%, 20%, 0%
#CC33330°, 60%, 50%80%, 20%, 20%
#CC3366340°, 60%, 50%80%, 20%, 40%
#CC3399320°, 60%, 50%80%, 20%, 60%
#CC33CC300°, 60%, 50%80%, 20%, 80%
#CC33FF285°, 100%, 60%80%, 20%, 100%
#CC660030°, 100%, 40%80%, 40%, 0%
#CC663320°, 60%, 50%80%, 40%, 20%
#CC66660°, 50%, 60%80%, 40%, 40%
#CC6699330°, 50%, 60%80%, 40%, 60%
#CC66CC300°, 50%, 60%80%, 40%, 80%
#CC66FF280°, 100%, 70%80%, 40%, 100%
#CC990045°, 100%, 40%80%, 60%, 0%
#CC993340°, 60%, 50%80%, 60%, 20%
#CC996630°, 50%, 60%80%, 60%, 40%
#CC99990°, 33%, 70%80%, 60%, 60%
#CC99CC300°, 33%, 70%80%, 60%, 80%
#CC99FF270°, 100%, 80%80%, 60%, 100%
#CCCC0060°, 100%, 40%80%, 80%, 0%
#CCCC3360°, 60%, 50%80%, 80%, 20%
#CCCC6660°, 50%, 60%80%, 80%, 40%
#CCCC9960°, 33%, 70%80%, 80%, 60%
#CCCCCC0°, 0%, 80%80%, 80%, 80%
#CCCCFF240°, 100%, 90%80%, 80%, 100%
#CCFF0072°, 100%, 50%80%, 100%, 0%
#CCFF3375°, 100%, 60%80%, 100%, 20%
#CCFF6680°, 100%, 70%80%, 100%, 40%
#CCFF9990°, 100%, 80%80%, 100%, 60%
#CCFFCC120°, 100%, 90%80%, 100%, 80%
#CCFFFF180°, 100%, 90%80%, 100%, 100%
#FF00000°, 100%, 50%100%, 0%, 0%
#FF0033348°, 100%, 50%100%, 0%, 20%
#FF0066336°, 100%, 50%100%, 0%, 40%
#FF0099324°, 100%, 50%100%, 0%, 60%
#FF00CC312°, 100%, 50%100%, 0%, 80%
#FF00FF300°, 100%, 50%100%, 0%, 100%
#FF330012°, 100%, 50%100%, 20%, 0%
#FF33330°, 100%, 60%100%, 20%, 20%
#FF3366345°, 100%, 60%100%, 20%, 40%
#FF3399330°, 100%, 60%100%, 20%, 60%
#FF33CC315°, 100%, 60%100%, 20%, 80%
#FF33FF300°, 100%, 60%100%, 20%, 100%
#FF660024°, 100%, 50%100%, 40%, 0%
#FF663315°, 100%, 60%100%, 40%, 20%
#FF66660°, 100%, 70%100%, 40%, 40%
#FF6699340°, 100%, 70%100%, 40%, 60%
#FF66CC320°, 100%, 70%100%, 40%, 80%
#FF66FF300°, 100%, 70%100%, 40%, 100%
#FF990036°, 100%, 50%100%, 60%, 0%
#FF993330°, 100%, 60%100%, 60%, 20%
#FF996620°, 100%, 70%100%, 60%, 40%
#FF99990°, 100%, 80%100%, 60%, 60%
#FF99CC330°, 100%, 80%100%, 60%, 80%
#FF99FF300°, 100%, 80%100%, 60%, 100%
#FFCC0048°, 100%, 50%100%, 80%, 0%
#FFCC3345°, 100%, 60%100%, 80%, 20%
#FFCC6640°, 100%, 70%100%, 80%, 40%
#FFCC9930°, 100%, 80%100%, 80%, 60%
#FFCCCC0°, 100%, 90%100%, 80%, 80%
#FFCCFF300°, 100%, 90%100%, 80%, 100%
#FFFF0060°, 100%, 50%100%, 100%, 0%
#FFFF3360°, 100%, 60%100%, 100%, 20%
#FFFF6660°, 100%, 70%100%, 100%, 40%
#FFFF9960°, 100%, 80%100%, 100%, 60%
#FFFFCC60°, 100%, 90%100%, 100%, 80%
#FFFFFF0°, 0%, 100%100%, 100%, 100%

Для получения информации о других цветах и их значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.

Психология цвета и веб-дизайн

Синий цвет

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

Фиолетовый цвет

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

Черный цвет

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

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

Белый цвет

Белый — традиционно считается цветом добродетели, чистоты, простоты. Отличный вариант для фона сайтов, выполненных в минималистическом дизайне.

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

Серый цвет

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

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

Бежевый цвет

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

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

Цвет слоновой кости

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

Выбор цветовой гаммы

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

Триада

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

Двойная комплиментарная система

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

Цвета-аналоги

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

Вокруг цвета: как подобрать палитру в веб-дизайне | GeekBrains

Цветовые приёмы, примеры сочетаний, сервисы, книги — в общем всё, что поможет сделать классный дизайн для продукта или сервиса

https://gbcdn.mrgcdn.ru/uploads/post/2732/og_image/4ac46bde4bcca42648f94b2d3374288d.png

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

  1. Ликбез: что важно учитывать
  2. Модные сочетания цветов в веб-дизайне
  3. 8 полезных сервисов 
  4. Немного литературы
  5. Вместо заключения

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

Цветовой круг: гармония, тёплые и холодные цвета

Самый примитивный вариант цветового круга

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

Другие варианты гармоничных цветовых схем

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

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

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

Танец дракона в Китае

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

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

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

Фрагмент интерфейса Telegram

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

 

Сообщение об успешном завершении регистрации

Синий. Синий цвет в веб-дизайне по данным исследования Джо Халлока предпочитает 42% пользователей. Он создаёт нейтральный фон и вызывает чувство доверия, спокойствия и безопасности. Именно поэтому многие соцсети и мессенджеры выбирают его в качестве основного. Кроме того, дальтоникам легче увидеть синие оттенки.

Синий в интерфейсе ВКонтакте

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

Тёмный режим в Google Chrome

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

Большая часть интерфейса — оттенки серого

В 2021 году в тренде яркие естественные тона, неожиданные гармоничные сочетания, приглушенные оттенки и природные палитры.

Выделяющаяся насыщенность

Насыщенные цвета в сочетании с более блёклым фоном, который делает их ещё более яркими — трендовая комбинация этого года.

автор: Arian Sefy

Оттенки человеческой кожи

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

автор: Ana-Ruxandra Nastase

Плавные градиенты

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

автор: Elvira Ramaldanova

Сюрреалистичность

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

автор: Lera Nezhdan

автор: Asma khalid

Монохром плюс один

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

автор: Zamil Ahamed

ColorScheme 

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

Paletton

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

Coolors

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

Adobe Color

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

DeGraeve

Загружаем картинку — получаем её цветовую палитру для веб-дизайна. На таком сервисе можно с интересом зависать часами!

Palette Generator

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

Pallettable

Подбор цветов превращается в увлекательную игру — сервис предлагает выбрать нравится или не нравится вам оттенок.

Flat Color Palettes

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

Если вы хотите вникнуть поглубже и стать гуру в области колористики, то вот парочка полезных книг:

  • «Сочетание цветов на практике», Наоми Куно
  • «Искусство цвета», Иоханнес Иттен
  • «Диалектика мифа», Алексей Лосев (уровень «со звёздочкой» — для тех, кто хочет понимать всю глубину символизма цвета)

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

А в этом помогут:

  1. Понимание основ теории цвета.
  2. Учёт культурного контекста.
  3. Знание актуальных трендов.
  4. Сервисы для подбора сочетаний цветов в веб-дизайне.
  5. Наши бесплатные курсы: «Визуальный язык и его элементы» и «Figma. Начальный уровень»  

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

Психология цвета и ее роль в создании веб-дизайна

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

Человеческий мозг играет основную роль в восприятии цвета. Люди склонны думать о цвете как о физическом объекте, но на самом деле это психологический фактор. Знание психологии позволяет объяснить, почему один и тот же цвет по-разному влияет на разных людей. Например, одни ассоциируют красный со страстью, другие – с гневом.

Психология цвета в веб-дизайне

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

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

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

• Понимание целевой аудитории

Чтобы определиться с потенциальной аудиторией, необходимо ответить на вопрос: кого из интернет-пользователей сайт пытается привлечь в первую очередь. От полученного ответа будет зависеть общее оформление веб-страниц, включая выбор палитры и шрифтов. Например, сайты по уходу за кожей, такие как L’ORÉAL, не часто ориентируются на мужчин. Целевая аудитория этой компании –женщины.

Если есть сложности с определением целевой аудитории, можно воспользоваться специальным приложением Google Analytics.

• Характер предлагаемых товаров или услуг

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

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

Основные цвета, влияющие на психологию человека

• Синий

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

• Зеленый

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

• Желтый

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

• Оранжевый

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

• Красный

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

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

• Фиолетовый

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

• Серый

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

• Черный и белый

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

Заключение

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

Цвета в Web дизайне: колор-тенденции (яркие тона)

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

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

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

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

Модные интернет-тенденции и современные технологии расширили цветовое пространство, открывая дорогу проявлениям креативного мышления. Отсюда – такое количество цветовых дизайн-вариаций: от полностраничных сайтов с пурпурным бэкграундом, до Kelly Green (ярко-зеленых) надписей на Web-странице в черно-белых тонах.

Далее рассматриваются детали техник, касаемых Flat дизайна и яркой колористики современного сайта.

Ориентируясь на Fashion тренды & дизайны интерьеров

Чтобы не открывать Америку заново, можно посмотреть на всю красоту мира вокруг нас (в цвете) и это окажет наиболее сильное художественное влияние при выборе цветов в WEB. Фактически, можно взять на вооружение очень много интересного из мира интерьеров и дизайна фасонов, оказывающих свое воздействие на популярные колор-тренды. Мода и тенденции способны бесконечно преображаться, распространяться по всем направлениям и проявляться во всех аспектах дизайна.

Сегодня на пике популярности:

  • Неоновые тона
  • Колоритные яркие принты и пр. броские элементы
  • Чёрно-белые решения с добавлением акцентного цвета

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

Неоновые оттенки (так называемый стиль «вырви глаз»)

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

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

Цветовые тенденции реального мира и тренды в цифровых проектах необъяснимым образом пересекаются по самым различным причинам

Пока мировой тренд сохраняет популярность, он послужит и дизайнерам сайтов.

Плоский дизайн и цветовые тенденции

Тенденцию к ярким UI дизайнам развивают экраны высокого разрешения и популяризация плоского стиля.

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

Upgrade me – классика плоского дизайна с использованием длинных теней и сочных цветов.

Wonderfully wild использует «более монохромные» цвета – ближе к ретро-стилю.

Бизнес сайт baesman.com – пример высоких контрастов.

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

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

Вкладки с контурными иконками, интерактивные подсказки без авто-скрытия, активные точки (hotspot) и контрастные кнопки с эффектами затемнения / заливки

Learn Biofuels – образовательный веб-ресурс с плоским дизайном. Нескучная типографика из шрифтов разных категорий: брусковый с массивными засечками и рубленые, пропорциональные и нет, различающиеся весом (толщиной линий) и контрастностью.

В основе цветовой схемы – хорошая сочетаемость цвета (зеленый) с остальными, что особенно важно:

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

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

Современные экраны (от монитора до айфона) способны передать любые колориты дизайнерских решений и это дает возможность выделиться из толпы

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

Weecom.com.br ярко демонстрирует не менее интересные и красочные работы – пример 1, пример 2, пример 3.

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

Сегодня концепция «web safe палитры» мертва и согласно W3Schools исследованиям – у 98% пользователей, устройства способны передавать миллионы цветов

Примерно в одно время:

  • HD Retina с другими дисплеями высокого разрешения (High Definition) завоевывают популярность
  • Крепнет и развивается направление плоского дизайна

Flat применим не в каждом контексте, но есть тенденция – повышать эмоциональность дизайна цветовыми оттенками

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

Монотонные цветовые схемы

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

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

Line Quality – лимонно-зеленый цвет (Lime Green) не так-то просто сочетать с другими. Но благодаря иконке Muppet (в той же тональности) получен чрезвычайно интересный визуальный эффект.

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

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

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

Цвета с высоким контрастом

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

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

В дизайне Hega цвет использован только для кнопок сайта.

Контрастность черного изображения и белого фона способствует правильному восприятию псевдо-кнопки «Case Studies», четко доводя ее призыв до сознания клиента, без какого-либо побуждения к клику

Минималистичная структура поможет направить пользовательское внимание куда нужно

More Sleep великолепно сочетает цвет и темные бэкграунды.

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

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

Общие цветовые ассоциации

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

Цветa нужно рассматривать как нечто большее, чем эстетику – учитывая значения и культурные ассоциации, с ними связанные

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

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

  • Розовый: романтика, юность, уверенность, чувствительность
  • Красный: созидание, любовь, лидерство, страсть, опасность, настойчивость
  • Желтый: удовольствие, радость, оптимизм, предостережение (желтый свет, желтая карточка). По свойству – контрастирующий цвет
  • Оранжевый: сила и энергия, теплота, коммуникабельность, креативность, энтузиазм, честолюбие. Выражает завышенную самооценку, по свойству – бодрящий цвет
  • Зеленый: натуральность, рост, стабильность, щедрость, удача (материальная выгода). Чисто-зеленый выражает требовательность, по свойству – освежающий цвет
  • Синий: гармония, безмятежность, доверие, честь, надежность (цвет бизнеса)
  • Фиолетовый: благосостояние, власть, превосходство, спокойствие, духовность, творчество

Что дальше?

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

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

ЯРКИЕ ЦВЕТА — ПРИМЕРЫ ДАЛЬНЕЙШЕГО РАЗВИТИЯ ТРЕНДА:

Сайт Impossible Bureau – попытка продемонстрировать дальнейшее развитие тенденции к использованию броских цветовых оттенков.

Структура сайта позволяет сочетать темный, минималистичный стиль с возможностью (по состоянию hover) менять оттенки цветов: от ярко-фиолетовых до розовых и оранжевых градиентов

VO2 – новый сайт с оригинальным нетипичным дизайном.

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

Symodd – яркие градиенты на цветном фоне во весь экран.

Более утонченные градиенты из двух не сильно отличающихся друг от друга оттенков, меньше утомляют глаза

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

Яркие цвета уже утверждают себя в качестве доминантной основы визуального развития WEB:

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

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

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

Как правильно подобрать цвета для вашего веб-дизайна

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

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

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

Что означают цвета?


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

Давайте посмотрим, какое значение имеют цвета и какие эмоции они могут вызывать.

Теплые цвета

Красные могут вызывать страсть. Веб-дизайн Aneley

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

  • Красный — активный, эмоциональный, страстный, сила, любовь, интенсивность
  • Розовый — сладкий, романтичный, игривый, теплый, сострадательный, мягкий
  • Оранжевый — теплый, восторженный, успешный, решительный, дружелюбный
  • Желтый — молодой, живой, энергичный, свежий, оптимистичный

Прохладные цвета

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

  • Зеленый — свежий, спокойный, расслабленный, доверительный, мирный, обнадеживающий, исцеляющий
  • Синий — комфорт, ясность, спокойствие, доверие, честность, верность, надежность
  • Фиолетовый — гламур, сила, ностальгия, роскошь, амбиции, духовность
Этот веб-дизайн обеспечивает чувство лояльности и доверия с использованием синего цвета. Дизайн DSKY

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

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

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

Психология цвета и узнаваемость бренда


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

Цвет — это наука. Иллюстрация Ненада Максимовича

В дополнение к общему значению каждого цвета, упомянутому выше, существуют также определенные тенденции, которым бренды часто следуют, чтобы добиться узнаваемости. Например, рестораны, как правило, красные и оранжевые, банки и финансовые учреждения часто синие, предметы роскоши обычно упаковываются в черный, отели обычно белые, синие, черные или зеленые. Некоторые знаковые бренды, известные своими цветами, включают CNN для красного, белого и черного, National Geographic желтого и McDonald’s для красного и желтого сочетания.

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

Теория цвета в веб-дизайне


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

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

Хорошая реализация триадной цветовой схемы через MercClass

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

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

Выбор основного цвета

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

Этот веб-дизайн берет свой основной цвет из логотипа бренда. Веб-дизайн от Iconic Graphics

Разработка оттенков и оттенков

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

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

Основной оранжевый цвет используется в различных оттенках для создания акцентов. Дизайн UI Maniac

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

Правило 60-30-10

Хороший пример реализации правила 60-30-10. Дизайн JPSDesign

Этот метод прост, но эффективен для смешивания разных цветов. Чтобы создать гармонию, цвета, как правило, должны сочетаться в пропорции 60% -30% -10%. Вы не всегда должны использовать три цвета, но это хорошее число, чтобы быть безопасным и сбалансированным. Используя этот метод, 60% должен быть доминирующим цветом, 30% — вторичным, а 10% — акцентным. Эта пропорция приятна человеческому глазу, поскольку позволяет постепенному появлению зрительных элементов.

Контраст

Высококонтрастный, но легкий для глаз. Дизайн JPSDesign

Цветовой контраст — потрясающе важная часть визуальной композиции. Например, если вам нужно, чтобы посетители обращали особое внимание на определенную область веб-сайта (например, кнопку CTA), вы можете использовать два очень контрастных цвета, таких как оранжевый и зеленый или красный и синий, для фона и кнопки.

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

Работа с изображениями

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

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

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

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

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

Цвета воплощают в жизнь веб-дизайн


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

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

Хотите получить идеальный дизайн сайта?
Наши дизайнеры могут создать уникальный веб-дизайн именно для вас.

Применение стилей и цветов — Интерфейсы веб API

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

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

fillStyle = color
Устанавливает стиль для фона фигур.
strokeStyle = color
Устанавливает стиль контура фигуры. 

color может быть цветом, (строка, представленная в CSS <color>), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — чёрный (значение CSS цвета  #000000).

На заметку: Когда вы устанавливаете  значения strokeStyle и/или fillStyle, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

Чтобы строка color считалась валидной, она должна соответствовать CSS <color>. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. 



ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

Пример

fillStyle

В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

Результат выглядит так:

Пример

strokeStyle

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

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                         Math.floor(255-42.5*j) + ')';
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }

Результат выглядит так:

В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры.  Это делается через установку свойства globalAlpha или задачи полупрозрачного цвета фона или контура.

globalAlpha = transparencyValue
Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.

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

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



ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

Пример

globalAlpha

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  
  ctx.globalAlpha = 0.2;

  
  for (i=0;i<7;i++){
    ctx.beginPath();
    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
    ctx.fill();
  }
}

Пример использования

rgba()

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,0,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,37.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,75,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,112.5,150,37.5);

  
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
    }
  }
}

Есть несколько свойств, которые позволяют нам стилизовать линии.

lineWidth = value
Устанавливает ширину линий, рисуемых в будущем.
lineCap = type
Устанавливает внешний вид концов линий.
lineJoin = type
Устанавливает внешний вид «углов», где встречаются линии.
miterLimit = value
Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.
getLineDash()
Возвращает текущий массив тире штриховки, содержащий чётное число неотрицательных чисел.
setLineDash(segments) (en-US)
Устанавливает текущий пунктир линии.
lineDashOffset = value
Указывает, где следует начинать тире массива в строке.

Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.

Пример

lineWidth

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

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

В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу — 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}

Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.

Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки 1.0, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной 1.0 в предыдущем примере кода.

Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении — ширина линии 1.0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки — иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию — butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), — нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию — miter, с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения — обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) — (3,5)), вместо середины пикселей.

Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

Пример

lineCap

Свойство lineCap определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: butt, round и square. По умолчанию для этого свойства установлено значение butt.

butt
Концы линий соответствуют крайним точкам.
round
Концы линий округлены.
square
Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.

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

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}

Пример

lineJoin

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

Для этого свойства есть три возможных значения: round, bevel и miter. По умолчанию для этого свойства установлено значение miter. Обратите внимание, что настройка lineJoin не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.

round
Радиус заполняемой части для скруглённых углов равен половине ширины линии. центр этого радиуса совпадает с концами подключённых сегментов.
bevel
Заполняет дополнительную треугольную область между общей конечной точкой подключённых сегментов и отдельными внешними прямоугольными углами каждого сегмента. 
miter
Подключённые сегменты соединяются путём расширения их внешних краёв для соединения в одной точке с эффектом заполнения дополнительной области в форме пастилки. Эта настройка выполняется с помощью свойства miterLimit, которое объясняется ниже.

В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin; результат — выше. 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}

Демонстрация свойства

miterLimit

Как вы видели в предыдущем примере, при объединении двух строк с опцией miter внешние края двух соединительных линий расширены до точки, где они встречаются. Для линий, которые находятся под большими углами друг с другом, эта точка находится недалеко от внутренней точки соединения. Однако, поскольку углы между каждой линией уменьшаются, расстояние (длина меча) между этими точками увеличивается экспоненциально.

Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML <canvas>), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.

Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединённых краёв линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краёв к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
  • Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.
  • Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.
  • Предел митры, равный 1,0, действителен, но отключит все миты.
  • Значения ниже 1.0 являются недопустимыми для предела митры.

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

Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.clearRect(0,0,150,150);

  
  ctx.strokeStyle = '#09f';
  ctx.lineWidth   = 2;
  ctx.strokeRect(-5,50,160,50);

  
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 10;

  
  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
  } else {
    alert('Value must be a positive number');
  }

  
  ctx.beginPath();
  ctx.moveTo(0,100);
  for (i=0;i<24;i++){
    var dy = i%2==0 ? 25 : -25 ;
    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
  }
  ctx.stroke();
  return false;
}

Использование штрихов

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

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

var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a CanvasGradient object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

createLinearGradient(x1, y1, x2, y2)
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
createRadialGradient(x1, y1, r1, x2, y2, r2) (en-US)
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

For example:

var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

Once we’ve created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

gradient.addColorStop(position, color) (en-US)
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS <color>, indicating the color the gradient should reach at that offset into the transition.

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0, 'white');
lineargradient.addColorStop(1, 'black');

Пример

createLinearGradient

In this example, we’ll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;

  
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn’t matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won’t be a problem.

In the second gradient, we didn’t assign the starting color (at position 0.0) since it wasn’t strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

Пример

createRadialGradient

In this example, we’ll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the «classic» radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, '#A7D30C');
  radgrad.addColorStop(0.9, '#019F62');
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');

  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, '#FF5F98');
  radgrad2.addColorStop(0.75, '#FF0188');
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(0.8, '#00B5E2');
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, '#F4F201');
  radgrad4.addColorStop(0.8, '#E4C700');
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

  
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}

In this case, we’ve offset the starting point slightly from the end point to achieve a spherical 3D effect. It’s best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn’t very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

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

createPattern(image, type) (en-US)
Создаёт и возвращает новый canvas объект — шаблон (pattern). image — CanvasImageSource (en-US) (то есть HTMLImageElement, другой холст, элемент <video> или подобный  объект. type — строка, указывающая, как использовать image.

Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:

repeat
Повторяет изображение в вертикальном и горизонтальном направлениях.
repeat-x
Повторяет изображение по горизонтали, но не по вертикали.
repeat-y
Повторяет изображение по вертикали, но не по горизонтали.
no-repeat
Не повторяет изображение. Используется только один раз.

Мы используем этот метод, чтобы создать CanvasPattern объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle. Например:

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');

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

Пример

createPattern

In this last example, we’ll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image’s onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function(){

    
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);

  }
}

Using shadows involves just four properties:

shadowOffsetX = float (en-US)
Indicates the horizontal distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.
shadowOffsetY = float (en-US)
Indicates the vertical distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.
shadowBlur = float (en-US)
Indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
shadowColor = color (en-US)
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren’t affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

The shadowBlur property indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

Пример текста с тенью

This example draws a text string with a shadowing effect.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

We will look at the font property and fillText method in the next chapter about drawing text.

When using fill (or clip (en-US) and isPointinPath (en-US)) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.

Two values are possible:

In this example we are using the evenodd rule.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
  ctx.fill("evenodd");
}

Web Colors — Константы объектов — Константы, перечисления и структуры

Справочник MQL4 Константы, перечисления и структуры Константы объектов Web Colors

Следующие цветовые константы определены для типа цвета:

цвет Черный

клрDarkGreen

clrDarkSlateGray

клроливковый

светло-зеленый

бирюзовый

клрфлот

clrPurple

клрМарун

clrИндиго

clrMidnightBlue

клрDarkBlue

clrDarkOliveGreen

clrSaddleBrown

clrForestGreen

clrOliveDrab

clrSeaGreen

clrТемныйЗолотарник

clrDarkSlateBlue

клрСиенна

clrMediumBlue

clrКоричневый

clrDarkBurquoise

клрДимГрей

clrLightSeaGreen

clrDarkViolet

клрFireBrick

clrMediumVioletRed

clrMediumSeaGreen

клрШоколад

clrCrimson

clrSteelBlue

клрЗолотарник

clrMediumSpringGreen

clrLawnGreen

clrCadetBlue

клрDarkOrchid

clrжелто-зеленый

clrLimeGreen

clrOrangeRed

клрDarkOrange

цвет Оранжевый

clrGold

цвет Желтый

клрШартрез

светлая известь

clrSpringGreen

clrAqua

клрDeepSkyBlue

цветСиний

clrПурпурный

светло-красный

clrGray

clrSlateGray

clrПеру

clrBlueViolet

clrLightSlateGray

клрDeepPink

clrMediumБирюзовый

clrDodgerBlue

clrБирюзовый

clrRoyalBlue

clrSlateBlue

clrDarkKhaki

clrIndianRed

clrMediumOrchid

клрЗеленыйЖелтый

clrMediumАквамарин

клрDarkSeaGreen

clrTomato

клрRosyBrown

клрОрхидея

clrMediumPurple

clrPaleVioletRed

клрКоралл

clrCornflowerBlue

клрDarkGray

клрСэндиБраун

clrMediumSlateBlue

клрТан

clrDarkSalmon

clrBurlyWood

клрHotPink

clrSalmon

клрФиолетовый

clrLightCoral

клрНебесно-голубой

clrLightSalmon

клрПлюм

цлрХаки

клрсветло-зеленый

clrАквамарин

clrSilver

clrLightSkyBlue

clrLightSteelBlue

clrГолубой

clrPaleGreen

клрЧертополох

clrPowderBlue

clrPaleЗолотарник

clrPaleTurquoise

клрсветло-серый

клрПшеница

clrNavajoWhite

clrМокасины

клрСветло-розовый

клрГейнсборо

клрPeachPuff

clrPink

клрБиск

clrLightGoldenrod

clrBlanchedAlmond

clrLemonChiffon

clrБежевый

clrAntiqueWhite

clrPapayaWhip

clrCornsilk

clrLightYellow

clrLightCyan

clrЛен

клрЛаванда

клрМистиРоуз

clrOldLace

clrWhiteSmoke

клрSeashell

цвет слоновой кости

клр Honeydew

clrAliceBlue

clrLavenderBlush

clrMintCream

клрСнег

цвет Белый

 

 

 

 

Цвет объекта можно задать с помощью функции ObjectSetInteger().Для получения значений цвета есть аналогичные функции ObjectGetInteger().

Пример:

// —- настройки индикатора
#property indicator_chart_window
#property indicator_buffers 3
#property indicator_type1 DRAW_LINE
#property indicator_type2 DRAW_LINE
#property indicator_type3 DRAW_LINE
#property indicator_color1 clrBlue
#property indicator_color2 clrRed
#property indicator_color3 клрлайм


Официальные цвета | Pepperdine University

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

Основные цвета

Pepperdine University представлен в печати синим цветом Pantone 281 (00205c) и 166. оранжевый (c225700).

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

СИНИЙ ПЕРЕЦ

Пантоне 281
#00205c

ПЕРЧНО-АПЕЛЬСИНОВЫЙ

Пантон 166
#c25700

Дополнительные цвета

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

Пантон 2945
#003988

Пантон 640
#0078b0

Пантон 310
#64d0e4

Pantone291
#98caec

Пантон 1375
#ff9f19

Нейтральные

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

Черный пантон 6
#231f20

Pantone холодный серый 11
#434244

Pantone 7541
#dadfe1

Белый
#ffffffff

Расширенные нейтрали

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

Пантон 476
#513629

Пантон 7699
#33647f

Теплый серый цвет Pantone 7
#968c83

Уникальные веб-цвета

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

Цветовые палитры USF | Университет коммуникаций и маркетинга

Цветовые палитры

Ядро

Наша цветовая палитра вдохновлена ​​архитектурой нашего бренда и служит для поддержки нашего основные цвета: USF Green, White и USF Gold.

USF Green

PMS : 342
00
CMYK : 93, 10, 75, 43
RGB : 0, 103, 71
Hex : 006747

USF Gold

PMS : 4535
CMYK : 6, 8, 35, 12
RGB : 207, 196, 147 6
Hex : CFC493

белый 3
PMS : N / A
CMYK : 0, 0, 0, 0
RGB : 255, 255, 255 6
Hex : FFFFFF


Среднее

Наши основные цвета вместе с песочным и вечнозеленым должны использоваться в подавляющем большинстве случаев. большинство.

SAND
PMS : 614
CMYK : 7, 4, 19, 0
RGB : 237, 235, 209 5 HBD

Evergreen

0

PMS : 3435
CMYK : 9000, 15, 84, 56
RGB : 0, 84, 50
Hex : 005432


АКЦЕНТЫ

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

Lemongrass

Lemongrass
PMS : 380 CMYK : 18, 0, 100, 0
RGB : 219, 228, 66
Hex : DBE442

Apple
PMS : 376 PMS : 376
CMYK : 44, 0, 100, 0
RGB : 156, 203, 59
Hex : 9CCB3B

Teal
PMS : 341
CMYK : 80, 7, 62, 16
RGB : 0, 147, 116
Hex : 009374

Seblass

0

PMS : 5503
CMYK : 38, 0, 25, 22
RGB : 128, 176, 166
Hex : 80B0A6

Storm
PMS : 7700
CMYK : 97, 53, 33, 10
RGB : 0, 100, 132
Hex : 006484

Silver
PMS : 427
CMYK : 22, 12, 12, 0
RGB : 202, 210, 216
Hex : CAD2D8

серый

0

PMS : 430 PMS : 430 CMYK : 55, 34, 32, 0
RGB : 126, 150, 160
Hex : 7E96A0

Slate
PMS : 7545

000

CMYK : 75, 52, 47, 22
RGB : 70, 96, 105
Hex : 466069

 

Цвета PMS, CMYK, RGB и HEX предназначены для максимально точного соответствия между различные формы СМИ.

Штамп из металлической фольги

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

3

цветов | У.S. Система веб-дизайна

Компоненты пользовательского интерфейса

Гибкая, но отчетливо американская палитра, предназначенная для передачи теплоты и надежности, а также отвечающая самым высоким стандартам 508 требований цветового контраста.

Палитра

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

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

Основные цвета

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

№ 205493

$ основной цвет темнее

#112e51

$цвет-основной-самый темный

#aeb0b5

$цвет-серый-светлый

Дополнительные цвета

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

#02bfe7

$ основной цвет

#046b99

$color-primary-alt-darkest

#00a6d2

$color-primary-alt-dark

#9bdaf1

$ основной цвет альтернативного света

#e1f3f8

$color-primary-alt-lightest

#981b1e

$цвет-вторичный-самый темный

#cd2026

$цвет-вторичный-темный

#e59393

$цвет-вторичный-свет

#f9dede

$color-secondary-lightest

Фоновые цвета

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

#aeb0b5

$цвет-серый-светлый

#d6d7d9

$цвет-серый-светлее

#f1f1f1

$цвет-серый-самый светлый

№ 494440

$цвет-серый-теплый-темный

#e4e2e0

$цвет-серый-теплый-светлый

#112e51

$цвет-основной-самый темный

#dce4ef

$цвет-серый-холодный-светлый

Третичные цвета

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

#f9c642

$цвет-золото-светлый

#fad980

$цвет-золото-зажигалка

#fff1d2

$цвет-золото-самый светлый

#4aa564

$цвет-зеленый-свет

#94bfa2

$цвет-зеленый-светлее

#e7f4e4

$цвет-зеленый-самый светлый

#4773аа

$цвет-холодный-синий-свет

#8ba6ca

$цвет-холодный-синий-светлее

#dce4ef

$цвет-холодный-синий-самый светлый

Специальные государственные цвета

Доступность текста

WCAG (Руководство по обеспечению доступности веб-контента) гарантирует доступность контента для всех, независимо от инвалидности или пользовательского устройства.Чтобы соответствовать этим стандартам, текстовые и интерактивные элементы должны иметь коэффициент цветовой контрастности не менее 4,5:1. Это гарантирует, что зрители, которые не могут видеть полный цветовой спектр, смогут прочитать текст.

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

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

Полностью доступные комбинации
Цвета на белом фоне

первичный-самый темный на белом

первично-темнее на белом

основной на белом

холодный голубой свет на белом

первичный-альт-самый темный на белом

зеленый на белом

посетил на белом

основа на белом

серо-темный на белом

серый на белом

серо-тепло-темный на белом

вторичный-самый темный на белом

вторичный-темный на белом

вторичное на белом

Нейтральные оттенки на цветном фоне

белый на основе

белый на сером-теплом-темном

белый на серо-темном

белый на сером

белый на самом темном

белый на основном темнее

белый на первичном

белый на холодном синем свете

белый на первичном-альтернативном-самом темном

на основе основного альтернативного темного

на основе основного альтернативного

белый на зеленом

база на зеленый свет

основа на золоте

база на золотом свете

белый на вторичном самом темном

белый на вторичном-темном

белый на вторичном

база на серо-светлом

основа на серо-светлом

база на серо-тепло-светлом

на основе прохладной синей зажигалки

на основе прохладно-голубого-самого светлого

на основе основного-альтернативного-самого легкого

база на зеленой зажигалке

база на зеленом свете

база на золотой зажигалке

основа на золотом

на основе вторичного легкого

цветов — лучшие веб-практики


Чтобы обеспечить согласованность всех веб-сайтов, приложений и сред WKU, Стили WKU придерживаются определенной цветовой палитры.В дополнение к красному цвету WKU по умолчанию сайт использует другие оттенки красного и серого. Цвета, перечисленные ниже, рекомендуются для использования на ваших сайтах и ​​страницах. Коды цветов включены в форматы hex, rgb и cmyk. Некоторые цвета WKU также доступны в раскрывающемся списке стилей редактора WYSIWYG.

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

 

WKU Красный

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

 
  • #B01E24
  • rgb(176, 30, 36)
  • cmyk(21%, 100%, 99%, 13%)

WKU Красный (темнее)

Чтобы подчеркнуть красный цвет WKU, используется красный цвет на 10 % темнее.Этот красный используется для границ, наведите и активные состояния, а также более темный красный фон.

 
  • #9A1A20
  • rgb(154, 26, 32)
  • cmyk(25%, 100%, 97%, 23%)

светло-серый

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

 
  • #EFEFEF
  • rgb(239, 239, 239)
  • cmyk(5%, 3%, 3%, 0%)

Светло-серый

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

 
  • #CCCCCC
  • rgb(204, 204, 204)
  • cmyk(19%, 15%, 16%, 0%)

Приглушенный серый

Светло-серый для приглушенного или вторичного текста.Часто сочетается с курсивом для создания подзаголовки.

 
  • #777777
  • rgb(119, 119, 119)
  • cmyk(55%, 46%, 46%, 11%)

Серый текст

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

 
  • #555555
  • rgb(85, 85, 85)
  • cmyk(64%, 56%, 55%, 31%)

Темно-серый

Второй самый темный серый цвет, обычно предназначенный для фона. Использовать как акцент цвет, а не для текста.

 
  • #333333
  • rgb(51, 51, 51)
  • cmyk(69%, 63%, 62%, 58%)

Черный Серый

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

 
  • #222222
  • rgb(34, 34, 34)
  • cmyk(72%, 66%, 65%, 72%)

 

 




Нужна помощь?

Служба поддержки WKU ITS готова помочь. Позвоните нам, пообщайтесь с представителем онлайн, используйте базу знаний самопомощи и многое другое.

Получить помощь



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

Загрузки

Цветовая палитра SCU — университетский маркетинг и коммуникации

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


Из-за различий в компьютерных мониторах и компьютерных видеокартах приведенные ниже цвета следует использовать только в качестве ориентировочных. Для наиболее точного представления цветов проверьте физические цветовые чипы Pantone Matching System (PMS), доступные в отделе маркетинга и коммуникаций университета.

Официальные цвета университета

Основные цвета печати


PMS 201
CMYK 0,100,63,29
RGB R 179, G 7, B 56
HEX #b30738


Черный
CMYK 0,0,0,100
RGB R 0, G 0, B 0
HEX #000000

Дополнительные цвета для печати


PMS 202
CMYK 1,98,58,44
RGB R 134, G 38, B 51
HEX #862633


PMS 124
CMYK 0,27,100,0
RGB R 234, G 170, B 0
HEX #eaaa00

PMS 431
CMYK 45,27,17,51
RGB R 91, G 103, B 112
HEX #5b6770

Акцентные цвета для печати


PMS 5763
CMYK 36,16,62,48
RGB R 115, G 123, B 76
HEX #737b4c

PMS 452
CMYK 24,20,48,6
RGB R 176, G 170, B 126
HEX #b0aa7e

PMS 468
CMYK 8,14,33,0
RGB R 221, G 203, B 164
HEX #ddcba4

PMS 5565
CMYK 50,19 36,7
RGB R 127, G 156, B 144
Hex # 7F9C90


PMS 635
CMYK 32,0,1,0
RGB R 164, G 219, B 232
HEX #a4dbe8 

PMS 1385
CMYK 0,54,100,5
RGB R 213, G 120, B 0
HEX # d57800    

Основные веб-цвета


Фирменный красный
HEX #b30738


Красная ссылка
HEX #9e1b32

PMS 201
HEX #811e2d

Дополнительные веб-цвета

.

Добавить комментарий

Ваш адрес email не будет опубликован.