Цвет в дизайне

в 13:54, , рубрики: Блог компании ua-hosting.company, веб-дизайн, векторная графика, дизайн, палитра, ресурсы, ссылки, цвет, цветовой круг, цветовые схемы

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

Цвет в дизайне - 1

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

Цвет в дизайне - 2

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

Цвет в дизайне - 3

Правила соответствия цветов

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

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

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

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

Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.

Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.

Полезные веб-сайты

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

СOLOURlovers

www.colourlovers.com/palettes/most-views/all-time/meta

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

Цвет в дизайне - 4

Color Safe

colorsafe.co

Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.

Цвет в дизайне - 5

COLORS

clrs.cc

Простая палитра цветов для веб-разработки.

Цвет в дизайне - 6

UiGradients

uigradients.com/#PinotNoir

Большая коллекция уже готовых цветных градиентов.

Цвет в дизайне - 7

Couleurs

couleursapp.com

Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.

Цвет в дизайне - 8

Web Colour Data

webcolourdata.com

Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).

Цвет в дизайне - 9

Material Palette

www.materialpalette.com

Генерирует цветовую палитру дизайна.

Цвет в дизайне - 10

Material Colors

materialcolors.com

Подборка цветовых образцов из Google's Material Design Guidelines.

Цвет в дизайне - 11

Material Design Colors

www.designskilz.com/colors

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

Цвет в дизайне - 12

Material Design Palette

codepen.io/addyosmani/full/jlvoC

Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.

Цвет в дизайне - 13

Colours

colours.neilorangepeel.com

Цвет по номерам и расположению на палитре.

Цвет в дизайне - 14

Rrggbb

rrgg.bb

Образцы цвета с номерами для программ.

Цвет в дизайне - 15

Fifty Shades Of Grey For Web Designers

www.mynameisq.com/web-lab/fifty_shades_of_grey

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

Цвет в дизайне - 16

Fifty Shades Of Grey For Web Designers

hex.colorrrs.com

Сайт, подбирающий цвет.

Цвет в дизайне - 17

Material UI Colors

www.materialui.co/colors

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

Цвет в дизайне - 18

Adobe Color CC

color.adobe.com/ru/create/color-wheel

Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.

Цвет в дизайне - 19

Coolors

coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb

Быстрый генератор цветовой схемы для дизайнеров.

Цвет в дизайне - 20

BADA55.Io

bada55.io

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

Цвет в дизайне - 21

Paletton

paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Цветовая схема для дизайнеров.

Цвет в дизайне - 22

Colourcode

colourco.de

Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.

Цвет в дизайне - 23

Color Palette Generator

www.degraeve.com/color-palette

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

Цвет в дизайне - 24

Color Palettes Color Schemes

Автор: ua-hosting.company

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js