Базовая теория цвета, которую необходимо знать веб-разработчикам

внешний интерфейс Программа перевода самородков дизайн Соответствие цветам

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

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

Что такое Теория цвета?

Краткая история теории цвета: Художники-импрессионисты, такие как Эдуар Мане, Эдгар Дега и Клод Моне, отказывались от реализма и пытались запечатлетьсветлый цветВ то время родилась теория цвета.

Выше представлена ​​серия картин Моне «Стога сена».

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

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

  • Почему некоторые цвета идеально сочетаются друг с другом?
  • Как выбрать «правильный» цвет?

Проблема соответствия цветов — это своего рода «врожденная» вещь. В любом случае, использование сплошного зеленого фона на веб-странице или в приложении абсолютно невыносимо!

Я привел ниже сводную таблицу, когда вы сталкиваетесь с проблемами с соответствующими цветами, можете обратиться к:

Уровень 1: монохромный

монохромныйОдин цвет или сочетание нескольких оттенков одного цвета.

в веб-разработке, ты сможешьна этой страницеВыберите и запрашивайте определенный Color Hex Hex, и можете сделать цвет ярче или темнее, не влияя на оттенок.

这就是最简单的网页配色方法。 Такие какFacebook,TwitterПодобные веб-сайты в основном используют эту монохроматическую цветовую схему. Простое сочетание черного, белого и небесно-голубого цветов делает эти социальные приложения более лаконичными.

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

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

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

Уровень 2: Дополнительные цвета

Что, если вы не хотите просто использовать всевозможные «оранжевые» цвета в своей цветовой гамме? Что делать, если вы хотите, чтобы ссылка выделялась, но не конфликтовала с панелью навигации или цветом фона?

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

Цвет можно найти в его относительном положении на цветовом круге.дополнительныйцвет.

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

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

Продолжить обновление...

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

Color Hack для веб-разработчиков

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

пожалуйста убедитесь:

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

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

Doug R. Thomas, Esq.Настоятельно рекомендуется использовать следующие сайты:

Расширенное чтение

Я надеюсь, что после прочтения этой статьи вам больше не придется беспокоиться о раскраске своего веб-сайта, веб-страницы и приложения. Если вам интересна эта тема, настоятельно рекомендуется ознакомиться сБолее актуальные знания.本文只是浅显地进行了讲解，你可以读эта статьяУзнайте больше об оттенках и оттенках.

最后我想说，在你给自己的项目进行配色时，并不存在”错误答案“。许多人认为品味是天生就有的，正是它帮助你寻找美妙的设计、带来灵感、尝试各种组合，最终为你和你的品牌找到最适合方案。 удачи!

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории