Html цвета по категориям
Содержание:
- AppTrap
- Заключительный этап снятия защиты
- Яркий на ярком / темный на темный
- Главные тренды регионов
- Советы
- Общие цветовые ассоциации
- Правила сочетания цветов в интерьере для разных стилей
- Черный
- «Три кита» теории цвета
- Определение цвета при помощи специальной программы
- Ввод СИП в дом — 25 глупых ошибок при подключении электричества.
- Имеет ли отношение теория цвета к конверсии веб-страницы?
- HSL
- Принципы и типы формирования сочетаемых цветов
- Цветовые тренды 2019 года
- Проблема замены чисел значками решетки в Microsoft Excel
- Как сделать из дрели
- Создание цветовой схемы
- Отображение скрытых столбцов
- Белый
- Более тёмные и светлые тона
AppTrap
Заключительный этап снятия защиты
Яркий на ярком / темный на темный
Так же, как светлое на светлом, так и сочетание подобных цветовых насыщений будет вызывать проблемы. Но этого можно избежать.
Если вы думаете, что этого не случится с вами, будьте осторожны при использовании однотонных цветовых схем. Вот где дизайнеры, как правило, совершают ошибки. (В случае сомнений используйте больше контраста.)
Попробуйте вместо этого: Если вы хотите использовать несколько ярких или темных цветов, рассмотрите их в качестве опций для экранов с прокруткой сайта. Вы сможете использовать, все темные или яркие цвета как вам нравится, и сохранить читаемость и удобство использования сайта.
Главные тренды регионов
Сегодня сформированы примерные направления цветовых трендов в каждом регионе на ближайшие несколько лет. Как я уже сказал, расположение целевой аудитории оказывает большое влияние на использование цветов. Потому хочу рассказать о трендах, которые сформированы нынешними идеями.
Азиатско-Тихоокеанский регион
В поисках базового цвета дизайнеры этого региона ориентировались на утверждение простоты, создание противоречия постоянной занятости. Эти черты очень характерны для восточных стран. Им необходимо чувство спокойствия даже на фоне высокого темпа жизни.
Таким образом, основу любой цветовой гаммы Азиатско-Тихоокеанского региона составит бежевый. Это цвет семян, сухих трав и зерен. Неким образом он знаменует соединение с землей, источниками жизни и связь между людьми.
Также, бежевый – противоположность всего современного. Как я уже упоминал, неотъемлемая часть нашей жизни – технологии, а также из производные. Часто мы видим их в черных и серых оттенках. Но бежевый – это цвет бездорожья, простоты, возвращения к корням. Он передает отчуждение от инноваций, снимая ежедневное напряжение.
Проследите за дизайном одежды или интерьером восточных стран. Бежевый имеет большое преимущество. Потому его целесообразно использовать и веб-дизайне проекта. Который ориентирован на этот регион.
Европейский регион
Существует множество стереотипов о том, что Европа – место «поддельных эмоций». Конечно же это не так. Но стереотипы оказывают свое давление. Потому для них нужно создать противоречие. Необходимо ощущение «реальности».
Североамериканский регион
Главный тренд 2020 года для стран этого региона – зеленовато-желтые оттенки. Первая ассоциация – цвет переменного тока, который символизирует энергию. США, Канада и даже Мексика – страны с высоким уровнем развития, очень быстрыми темпами жизни. Самое главное: эти страны стремительно переходят к автоматизации, которая сегодня основана на использовании тока.
Зеленая и желтая эссенции представляют расширение сфер жизни, которые необходимо освоить. Таким образом, они символизируют сложность будущего. С каждой трудностью необходимо справляться. Иными словами, цветовые тренды североамериканского региона напоминают, что с развитием человечества появляются более сложные проблемы, о которых нельзя забывать.
Вам может показаться, что эти оттенки вызывают негатив, потому их не стоит использовать. На самом деле, этому региону привычно сталкиваться с проблемами. Соответственно, сайты с такой цветовой гаммы создадут ощущение «рыбы в воде».
Латиноамериканский регион
Ключевая тенденция веб-дизайна – восприятие всего с новой точки зрения и четкое определение каждого следующего действия. Согласно мнению специалистов латиноамериканского региона, подобные мысли может вызвать темно-зеленый цвет. Этот оттенок отражает повышенную осведомленность и образованность.
После осознания проблемы приходит мысль, что бездействовать нельзя. Необходимо участвовать в разных процессах, иначе вопрос останется нерешенным. Темно-зеленый оттенок является своеобразным катализатором нового материала, который необходим для поиска ответов.
В конце концов, данный цвет считается символом баланса. Именно к этому показателю стремятся бизнесмены, маркетологи и простые пользователи.
Как видите, цветовой тренд каждого региона имеет одухотворенное значение. Все связано с чувствами, эмоциями и восприятием мира. Это объясняется тем, что цвета сами по себе знаменовали небольшой мистицизм и вызывали множество ассоциаций.
Советы
Общие цветовые ассоциации
Хорошо подобранные цвета на страницах сайта – признак того, что его владелец определился, кем он хочет быть в своей нише и знает, чем интересен целевой аудитории.
Подбор каждого цвета должен стать частью целостной стратегии, учитывающей его эмоциональное восприятие. Однако, до сих пор, общее мнение относительно применимости цветовой символики не сформировано окончательным образом.
Вот некоторые из наиболее распространенных ассоциаций, возникающих в результате психологического влияния цветов сайта на его пользователей:
- Розовый: романтика, юность, уверенность, чувствительность
- Красный: созидание, любовь, лидерство, страсть, опасность, настойчивость
- Желтый: удовольствие, радость, оптимизм, предостережение (желтый свет, желтая карточка). По свойству – контрастирующий цвет
- Оранжевый: сила и энергия, теплота, коммуникабельность, креативность, энтузиазм, честолюбие. Выражает завышенную самооценку, по свойству – бодрящий цвет
- Зеленый: натуральность, рост, стабильность, щедрость, удача (материальная выгода). Чисто-зеленый выражает требовательность, по свойству – освежающий цвет
- Синий: гармония, безмятежность, доверие, честь, надежность (цвет бизнеса)
- Фиолетовый: благосостояние, власть, превосходство, спокойствие, духовность, творчество
Правила сочетания цветов в интерьере для разных стилей
При выборе цвета учитывают следующее:
Нужные цвета в интерьере определяет стиль оформления.
Не стоит в одном помещении использовать более 5 тонов, чтобы не нарушить гармонию.
В фаворе нейтральные и смешанные оттенки.
Для акцента уместны насыщенные цвета.
Фундамент декорирования – основные тона. Они должны быть представлены большими массами. Окраска стен, потолков, пола – главное поле их использования. Также присутствуют в обивке мебели, в оформлении окон.
Два основных цвета нельзя делить пополам. Одного должно быть больше, другого меньше.
Разнообразие вносят 1-2 дополнительных тона
Их присутствие заметно, но не чрезмерно.
Осторожно с контрастными цветами: три являются пределом.
Контрастное сочетание цветов в интерьереИсточник pinterest.at
- При ярких стенах мебель должна иметь сдержанные расцветки. Стены в пастельных тонах просят заметную мебель.
- Размер. Холодные тона визуально увеличивают, а теплые уменьшают помещение.
- Предназначение комнаты – одно из главных условий для определения цветовой композиции. От этого зависит психологический комфорт человека.
В нелегком деле выбора поможет своеобразный камертон — цветовой круг. Цветовое колесо, круг Иттена, замкнутый спектр – это всё о нём. Без его помощи трудно добиться успеха на дизайнерском поприще.
Черный
Черный — самый сильный из всех нейтральных цветов. Его достоинство в том, что он обычно ассоциируется с силой, элегантностью и формальностью. Минус — в том, что он еще и связан со злом, смертью и тайнами. В Западных странах черный — это цвет скорби. В некоторых культурах он также ассоциируется с бунтами, оккультизмом и праздником Halloween.
Черный обычно используется в оригинальных и элегантных дизайнах. Он может быть и консервативным, и современным, и традиционным, и нетривиальным — все зависит от цветов, с которыми вы его комбинируете. В дизайне черный обычно используется для типографики и других функциональных элементов — поскольку он нейтрален. Черный поможет вам создать ощущение утонченности и загадочности в дизайне.
Примеры:
Черные акценты, в сочетании с яркими цветами и темно-кориченевым фоном, делают дизайн очень оригинальным.
В сочетании с ледяным голубым цветом, черный выглядит холоднее.
Дизайн смотрится оригинально благодаря черному цвету в сочетании с темно-серым и лаймовым зеленым.
Черные акценты здесь привносят утонченность и современность.
Сильные черные акценты делают дизайн сайта утонченным.
«Три кита» теории цвета
Теория цвета – целая наука, состоящая из множества разделов. Не будем рассматривать ее целиком, остановимся на тех моментах, которые могут пригодиться веб-дизайнеру при создании интерфейса.
Контраст
Далеко не каждое сочетание цветов в веб-дизайне является выигрышным. Каждый оттенок имеет своего «заклятого врага», то есть полную противоположность, которая бросается в глаза. Для поиска комбинаций воспользуйтесь «колесом»:
«Колесо»
Дополнение
По сравнению с тонами, которые вступают в жесткое противостояние, эти цвета являются дополнением. Они могут подчеркивать друг друга, в цветовом колесе находятся рядом. Например, лиловый дополняют розовый, голубой.
Резонанс
Все без исключения цветовые стили дизайна web-сайта вызывают конкретные эмоции. Например, теплые оттенки наполняют энергией и пробуждают – к ним относятся желтый и оранжевый. Холодные и темные, наоборот, успокаивают.
Открыв главную страницу сайта BBC News, нельзя не заметить огромную красную панель навигации. Такой выбор цветов веб-дизайна пробуждает и усиливает возбужденное состояние. Поскольку на портале публикуются сенсационные новости, использование красного вполне логично.
BBC News
Цвет – не просто украшение, а реальный инструмент в руках дизайнера.
Определение цвета при помощи специальной программы
Так же, помимо инструментов браузера существуют специальные программки, которые так же позволяют легко определять значение цвета. Я для этих целей использую программу Pixie. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:
Которое вы можете разместить в любой части экрана, что бы оно вам не мешало. При этом когда вы водите курсором по изображению – в специальном окошке показываются выбранный цвет.
Плюс этой программы в том, что вы можете определять точное значение цвета не только для каких-то элементов открытых в браузере, но и любых других элементов, отображающихся на вашем мониторе.
После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш CTRL+ALT+C, и значение этого цвета попадает в буфер обмена.
Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки. Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6»
Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».
Так же, плюс этой программы в том, что вы помимо того, что можете определять точное значение цвета, так же можно немного его изменять.
Например, я хочу для этой кнопки сделать эффект при наведении, чтобы фон становился более темный или более светлый, но при этом оттенок должен сохранялся. Для этого:
- 1.Сначала нажимаем CTRL+ALT+C, что бы скопировать значение цвета.
-
2.Затем, на клавиатуре, нажимаем CTRL+ALT+X, после чего открывается вот такая палитра:
- 3.В этой палитре можно либо выбирать интересующие оттенки, либо при помощи ползунка справа делать цвет более темным или более светлым. При этом в окне предпросмотра отображается оттенок, который получается в результате этих манипуляций. Здесь значение цвета отображается как в формате RGB, так и в шестнадцатеричном формате.
-
4.Если значение скопированного цвета не вставилось автоматически, то нужно вставить его в поле «HTML», а уже потом делать его темнее или светлее при помощи ползунка справа.
- 5.После выбора нужного оттенка копируем шестнадцатеричное значение цвета из поля “HTML”
Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.
Получится примерно так:
CSS
.test-btn{
background:#2F73B6;
}
.test-btn:hover{
background:# 286199;
}
1 |
.test-btn{ background#2F73B6; } .test-btn:hover{ background#286199; } |
Я обычно при верстке или доработке сайтов использую именно эту программку.
Вы можете скачать данную программу к себе на компьютер, нажав на ссылку ниже.
Ввод СИП в дом — 25 глупых ошибок при подключении электричества.
Имеет ли отношение теория цвета к конверсии веб-страницы?
Актуальна ли теория цвета в эпоху компьютерных технологий? Безусловно, ведь если при посещении магазина взгляд человека невольно фокусируется на вывеске на несколько минут, то при посещении сайта человеку достаточно даже десяти секунд, чтоб сформировать свое мнение об этой странице
Именно поэтому при создании эффективных целевых страниц так важно сразу зацепить внимание потенциального клиента, поскольку в ином случае вы рискуете потерять его навсегда
Создавая продающий целевой ресурс, можно воспользоваться двумя действующими методиками цвета:
1) Применение контрастов для привлечения внимания. 2) Подбор определенной цветовой гаммы для вызова психологический ассоциаций.
Грамотное совмещение этих двух подходов поможет в разы увеличить число потенциальных клиентов вашей продающей страницы. Правильно подобранные цвета могут служить неким посланием для аудитории, нести в себе скрытый посыл к действию. Согласитесь, такой подход к оформлению веб-страницы будет работать намного эффективнее, чем подбор цветов сайта исключительно по его внешнему виду.
Цветовая теория обладает многими полезными свойствами, среди которых:
– привлечение внимания пользователей; – содержание эффективного посыла к действиям; – уменьшение процента отказов; – увеличение конверсии сайта;
HSL
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
- h1 { color: hsl(120, 100%, 50%); } /* зелёный */
- h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
- h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
- h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
Принципы и типы формирования сочетаемых цветов
В природе существует огромное количество оттенков цветов. Но, как вы наверное заметили, не все они рядом друг с другом выглядят одинаково хорошо. Некоторые, казалось бы, неожиданные сочетания просто завораживают, от других скорее хочется отвести взгляд. Все потому, что при подборе цветов для интерьера, клумбы, букета, одежды надо руководствоваться определенными правилами и принципами.
В палитре сочетаемых цветов может быть от двух до семи красок и оттенков
Чтобы их было проще запомнить, создали специальные инструменты — цветовой круг и таблицы сочетаемых цветов. В принципе, основной инструмент — это круг, а таблицы — это готовый результат подбора по нему. Если вы хотите освоить основы комбинирования цветов, пользуйтесь кругом. В противном случае подбирайте вариант из таблиц.
Цветовой круг и правила его использования
Цветовой круг состоит из трех уровней. Внутри содержатся основные цвета — красный, синий, желтый. Их называют первичными. Их попарная комбинация дает три дополнительных (вторичных) цвета — фиолетовый, оранжевый, зеленый. На третьем уровне размещены третичные цвета — это результат сочетания вторичных и первичных. На основании этих цветов и подбирают сочетание цветов в интерьере (и не только).
Круг сочетаемости цветов — для подбора базовых цветов для интерьера
Как видите, черный, серый и белый в круге не представлены. Они в чистом виде в природе не существуют, при оформлении интерьера могут использоваться как основные (белый и серый) или дополнительные.
Количество цветов
Перед тем, как объяснять правила использования цветового круга, надо разобраться с количеством цветов для их гармоничного сочетания. Вообще можно использовать два, три или четыре сочетаемых оттенка. К ним еще можно добавлять универсальные — белый, серый, черный. Именно так и поступают декораторы и художники.
Цветов много, но в одном интерьере они смотрятся гармонично. Это потому что подобраны правильно — сочетаются между собой
Но для интерьера два оттенка — это слишком монотонно и скучно. Гораздо интереснее комнаты оформленные с сочетанием трех, четырех или более цветов. При этом использовать цвета в равных пропорциях неправильно. Один-два из них выбираются как основные, их «много». В эти цвета окрашивают стены, пол, они присутствуют в обивке мебели, текстиле. Еще один-два используется как дополнительные. Их не так много, но они заметны. Остальные — сколько бы их не было — служат для внесения разнообразия и акцентов. Они присутствуют в небольших количествах — это детали декора, подушки и т.п. Если вы присмотритесь к интерьерам, которые вам нравятся, скорее всего, обнаружите такую закономерность распределения цветов.
Сочетание цветов в интерьере на основе цветового круга
Используя цветовой круг, можно по нему выбирать сочетаемые цвета. Делают это по определенным правилам. Есть несколько принципов формирования сочетаний:
- Аналоговая триада — это несколько оттенков, расположенных один воле другого. Так можно выбрать два-четыре оттенка.
-
Контрастные цвета — два цвета, расположенных один напротив другого. Они хорошо смотрятся вместе.
- Комплиментарная триада. Вместо одного из контрастных цветов берут два прилегающих к нему с обеих сторон.
- Двойная разделенная контрастная схема совмещения цветов. Формируется она двумя способами: по вписанному квадрату — берется каждый третий цвет в круге, или по вписанному прямоугольнику — нижние два цвета по комплиментарному принципу (через один) и так же подобранные к ним контрастные.
- Трехцветная (триада) схема. Выбирают базовый цвет, к нем два дополнительных — через три оттенка от базового.
Только по этим принципам можно сформировать несколько десятков сочетаний. Но еще есть предельно удаленные пары и сочетаемые четыре цвета. Это еще добавляет количество вариантов.
Дополнительные принципы формирования групп сочетаемых цветов
Но и это еще не все. Каждый из цветов в круге изменяется по насыщенности — от более светлого в середине, к темным снаружи. То есть, в выбранном секторе можно подобрать несколько оттенков по тону. Такое сочетание цветов в интерьере называется монохромным. Их тоже используют в дизайне.
В рамках одного цвета можно взять несколько оттенков, добавить штрихи нейтральных цветов — вот и готов монохромный интерьер
Поиграться с цветом порой интересно. А чтобы не было слишком уж скучно, в качестве акцентов можно использовать «универсальные» — черный, белый, серый или красный — по вкусу, в зависимости от желаемого настроения и назначения помещения.
Цветовые тренды 2019 года
Актуальным трендом будут яркие цветовые комбинации. Ультрафиолетовый был назван самым популярным цветом 2018 года. Популярность броских оттенков продолжит набирать обороты. Если компания вашего клиента может позволить себе сочные цвета, обязательно примените их, когда будете оформлять сайт.
Shawbrook bank
Показательный пример оформления – сайт Shawbrook банка. Нет смысла отрицать данную тенденцию, если ее выбирают даже солидные финансовые организации. С одной стороны, мы говорим о разрыве шаблонов, с другой, потребители тяготеют к поиску динамики, яркости. Адаптировавшись к запросам целевой аудитории, результат веб-дизайна превзойдет все ожидания.
Какие еще тенденции сочетания цветов будут актуальны в web-дизайне 2019 года:
- Применение градиентов. Эффект не новый, но рабочий. Смешивая различные цвета, дизайнеры создают новые оттенки и тона. Благодаря градиенту, выделение объектов становится более качественным, удается наполнить визуальную композицию глубиной. Использование градиентов в Web распространено больше, чем в полиграфии.
- Умеренность. Яркие цвета действительно актуальны, однако не стоит использовать «кричащие», даже ядовитые сочетания. Двух или трех цветов вполне достаточно, делайте плавный переход между ними.
- Использование негативного пространства. В 2018-м эта тенденция была одной из самых актуальных, в дальнейшем она также будет применяться веб-дизайнерами. Помимо программы Photoshop, можно воспользоваться сайтом wayup.in. Удалив небо на фоне гор, получаем интересный снимок с негативным пространством.
Таким образом, грамотная совместимость ярких цветов в веб-дизайне, негативное пространство и разумное применение градиентов будут править балом в 2019 году. Все эти приемы и тенденции мы однозначно увидим в обновленных сайтах.
Проблема замены чисел значками решетки в Microsoft Excel
Как сделать из дрели
Создание цветовой схемы
Надеюсь, что вы, взглянув на инфографику выше, уже определили для себя цвета, которые вызывают соответствующие эмоции. Мы же рекомендуем вам отталкиваться по крайней мере от 2 основных цветов, которые представляют ваш бренд в интернете. Если у вас есть эти цвета, то специально для вас я подготовил несколько инструментов, благодаря которым, вы можете генерировать неограниченное количество цветовых палитр.
Adobe Color CC
Ранее известный как Kuler, Adobe Color CC является отличным инструментом для создания цветовых палитр. Вы может выбрать правила цвета, а затем вращать колесо. Вы также сможете вручную настроить каждый цвет в палитре и автоматически другие цвета будут регулироваться с тем правилом, которое вы задали. Вы можете создавать цветовые палитры, загружая фотографии.
Photocopa by COLORLovers
Является одним из самых популярных направлений для цветовых вдохновений и идей. Они имеют в своем арсенале самые лучшие инструменты для создания цветовых схем. Один из них PhotoCopa, который позволяет генерировать цветовую схему из фотографий. Вы также можете использовать его как основной инструмент, который генерирует различные комбинации, задавая при этом основной цвет.
Material Palette
Тоже полезный сервис, который генерирует цветовые схемы, используя правила проектирования. Он используется в основном разработчиками мобильных приложений, чтобы узнать какие цвета будут лучше смотреться, но никто вам не запрещает экспериментировать на своих сайтах. Мне этот сервис как-то сразу приглянулся. Особенно, когда делаешь сайты на Бутстрап.
Coolors.co
Очень простой и понятный сервис по составлению различных цветовых схем. Нажимаете пробел и он автоматически подбирает для вас оптимальную цветовую палитру. При этом вы можете заблокировать некоторые цвета и экспериментировать в пределах выбранных. Вот как это получилось у меня:
Те, что не заблокированные это и есть наилучшим образом сочетающиеся цвета. Каждый раз нажимая пробел вы получаете лучшую комбинацию. Например, вот такую:
Это нереально крутые сервисы для дизайнеров и веб разработчиков. Пользуйтесь ими, что создать самый притягательный дизайн вашего веб-сайта
Всем спасибо за внимание и до встречи в следующих выпусках блога. Пока!
Отображение скрытых столбцов
Белый
Белый и черный находятся на противоположных концах спектра, но так же как и черный, белый хорошо работает в сочетании с почти любым цветом. Белый ассоциируется с чистотой, невинностью и добродетелью. На Западе белый надевают невесты в день свадьбы. Этот цвет также связан со здравоохранением, особенно с докторами, медсестрами и стоматологами. Белый — это цвет доброты, ангелы обычно изображаются в белом.
В дизайне белый цвет обычно задает нейтральный фон, чтобы другие цвета ярче заиграли. Белый также несет в дизайн чистоту и простоту, и он очень популярен в минималистичных дизайнах. В дизайне белый также может олицетворять зиму или лето, в зависимости от дополнительных мотивов и окружающих цветов.
Примеры:
Белые фоны очень популярны в минималистичных дизайнах: белый фон отлично контрастирует с черной типографикой.
В этом примере белый используется как акцентный цвет и делает сайт более легким.
Белый в сочетании с серым придает дизайну мягкости и чистоты.
Опять же, благодаря белому фону весь дизайн играет ярче.
Более тёмные и светлые тона
Одна вещь, которую я заметил на многих красивых интерфейсах, заключается в том, что они часто используют более тёмные и светлые вариации одного основного цвета.
Вы же не подумали, что цвет строки поиска это всего лишь полупрозрачный чёрный слой? Спойлер: нет, это не он. Никакая прозрачность или наложение чёрного на синий не дадут вам такого цвета. Это вариация основного цвета, которая была получена каким-то волшебным образом.
Посмотрите на Swell Grid, красивое приложение для сёрферов:
Та-дам! Здесь целый вагон вариаций! Сколько? Посчитайте сами. Практически любой цвет на этой странице — вариация основного синего.
Вот ещё один простой пример:
Вариации цвета можно использовать даже для разных состояний элементов. Это не «палитра из трёх синих», это один синий с несколькими вариациями.
Напрашивается вопрос: как же можно практически модифицировать цвет, чтобы получить хорошие вариации?
Мы до этого ещё дойдём, но я хочу, чтобы с самого начала вы поняли два основных принципа:
- Мы будем искать примеры в реальной жизни. Несмотря на то, что наши интерфейсы «ненастоящие», мы всё ещё очень часто копируем реальную жизнь. Потому что за десятки лет мы привыкли видеть вещи в реальном мире, и у нас появилось определённое ожидание, как должен работать свет и цвет.
- Мы будем использовать цветовую модель HSB. Потому что это самая интуитивная цветовая модель с широкой сферой применения (для наших целей — в Photoshop и Sketch). Если вы не знаете, что такое цветовой тон, насыщенность и яркость, давайте и встретимся через 10 минут.