Понимание цветовых схем и цветовых схем

01 из 10

Понимание цветовых схем и цветовых схем

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

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

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

02 из 10

Монохроматическая веб-цветовая схема

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

• верхний левый - базовый цвет # ffe500
• верхний правый - добавлена ​​заливка на 50% белого цвета, чтобы получить # fff280
• нижний левый - добавлена ​​заливка 75% белого цвета, чтобы получить # fff8bf
• нижний правый - добавлена ​​заливка 50% черного цвета, чтобы получить # 7f7200

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

03 из 10

Подробнее Монохроматическая веб-цветовая схема

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

04 из 10

Аналогичная веб-цветовая схема

Эта цветовая схема принимает желтый базовый цвет и добавляет и вычитает 30 градусов в оттенок в цветовой палитре Photoshop.

• верхний левый - базовый цвет # ffe500
• верхний правый - +30 градусов, чтобы получить # 99ff00
• нижний левый - -30 градусов, чтобы получить # ff6600
• нижний правый - 100% белый #ffffff

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

05 из 10

Более аналогичная веб-цветовая схема

Добавлен квадрат 20% черного цвета, чтобы получить больше цветов в схеме.

06 из 10

Дополнительная цветовая схема

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

• left - базовый цвет # ffe500
• справа - дополнение # 001aff

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

07 из 10

Дополнительная дополнительная цветовая схема

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

08 из 10

Триадическая веб-цветовая схема

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

• верхний левый - базовый цвет # ffe500
• верхний правый - +120 градусов, чтобы получить # e500ff
• нижний левый - -120 градусов, чтобы получить # 00ffe6
• нижний правый - 100% белый #ffffff

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

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

09 из 10

Подробнее Триадическая веб-цветовая схема

Как и в других примерах, я добавил 30% черного квадрата к цветам, чтобы получить дополнительные оттенки.

10 из 10

Разнообразные цветовые схемы в Интернете

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

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