Нет надобности расписывать, как важен цвет в дизайне. Удачное цветовое решение — это уже половина успеха проекта. В помощь развивающимся дизайнерам — немного теории цветового круга и подборка ссылок на полезные ресурсы.
![](https://habrastorage.org/r/w1560/files/1c9/7c7/89c/1c97c789c4e4419ab13ae09b894cf758.png)
Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.
![](https://habrastorage.org/r/w1560/files/7de/036/759/7de0367597954ad78cbe2e45ddbe5c29.png)
Согласно теории цвета, гармоничные комбинации используют: два противоположные друг другу цвета; любые три цвета, равномерно распределенные вокруг круга и формирующие треугольник; любые четыре цвета, формирующие прямоугольник (фактически, две пары цветов друг напротив друга).
![](https://habrastorage.org/r/w1560/files/151/1e6/b66/1511e6b668ba4b9eac48a80674f33ca3.png)
Взаимодополняющие цвета — расположены друг напротив друга. Например, синий и оранжевый, или красный и зеленый.
Они контрастируют между собой, хорошо подчеркивают и выделяют нужный элемент. Лучшее сочетание выходит, когда один цвет применятся в качестве фона, а другим выделяются акценты. Игра с оттенками и тонами разнообразит цветовую гамму и поможет добиться желаемого результата.
Разделение взаимодополняющих цветов осуществляется за счет трех цветов. Они также находятся друг напротив друга, но общая комбинация выглядит более спокойной и разнообразной за счет добавления третего цвета.
Аналогичные цвета любые три цвета, которые находятся рядом с другом. Например, оранжевый, желто-оранжевый и желтый.
Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.
Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.
В сети немало ресурсов, которые предоставляют готовые цветовые палитры, паттерны и шаблоны. Ниже подобран небольшой список из полезных для дизайнера «цветовых» ресурсов.
СOLOURlovers
www.colourlovers.com/palettes/most-views/all-time/meta
Творческое сообщество, где люди со всего мира выкладывают готовые цветовые решения и шаблоны. Все выложенное оценивается пользователями.
![](https://habrastorage.org/r/w1560/files/6fb/0f9/8de/6fb0f98de0f74bd1a4b1fe3f325c3378.png)
Color Safe
colorsafe.co
Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.
![](https://habrastorage.org/r/w1560/files/a0d/94b/138/a0d94b1383cd4eb9bc281f7a5f472550.png)
COLORS
clrs.cc
Простая палитра цветов для веб-разработки.
![](https://habrastorage.org/r/w1560/files/af8/fd1/b01/af8fd1b01ed34091811da28fc99c1eba.png)
UiGradients
uigradients.com/#PinotNoir
Большая коллекция уже готовых цветных градиентов.
![](https://habrastorage.org/r/w1560/files/f2f/cf1/b2c/f2fcf1b2c3cc47a8a395f169c7bf3e34.png)
Couleurs
couleursapp.com
Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.
![](https://habrastorage.org/r/w1560/files/f76/e7a/667/f76e7a6679084722a7f6245fef055c09.png)
Web Colour Data
webcolourdata.com
Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).
![](https://habrastorage.org/r/w1560/files/ad4/048/496/ad404849695d4e7e8cfde4efa383143d.png)
Material Palette
www.materialpalette.com
Генерирует цветовую палитру дизайна.
![](https://habrastorage.org/r/w1560/files/41f/738/eb5/41f738eb52db483da7c6bf4089798158.png)
Material Colors
materialcolors.com
Подборка цветовых образцов из Google's Material Design Guidelines.
![](https://habrastorage.org/r/w1560/files/070/273/494/070273494476408cba28faad04b95b2f.png)
Material Design Colors
www.designskilz.com/colors
Это небольшое веб-приложение помогает визуализировать цвета дизайна и скопировать их в различных форматах.
![](https://habrastorage.org/r/w1560/files/1be/1ba/fe6/1be1bafe6efc4c3d83b7af65b20dc494.png)
Material Design Palette
codepen.io/addyosmani/full/jlvoC
Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.
![](https://habrastorage.org/r/w1560/files/ede/498/397/ede4983977c74ed1ba8d30d8179f5adf.png)
Colours
colours.neilorangepeel.com
Цвет по номерам и расположению на палитре.
![](https://habrastorage.org/r/w1560/files/188/982/d13/188982d13e2645f3b0a3b13c5f1cca90.png)
Rrggbb
rrgg.bb
Образцы цвета с номерами для программ.
![](https://habrastorage.org/r/w1560/files/2ac/e27/197/2ace271979a64438bf2024010a3f2e5e.png)
Fifty Shades Of Grey For Web Designers
www.mynameisq.com/web-lab/fifty_shades_of_grey
Оттенки и образцы серого для веб-дизайна.
![](https://habrastorage.org/r/w1560/files/32f/7fb/910/32f7fb9106c941c69d44feba94ca4090.png)
Fifty Shades Of Grey For Web Designers
hex.colorrrs.com
Сайт, подбирающий цвет.
![](https://habrastorage.org/r/w1560/files/33d/96d/8b1/33d96d8b170f45d8a2610ee88e213353.png)
Material UI Colors
www.materialui.co/colors
Палитра UI-цветов от Google, включает основные и дополнительные цвета, которые могут быть использованы для иллюстраций или веб-разработки.
![](https://habrastorage.org/r/w1560/files/d50/ae8/ae6/d50ae8ae68ab400f9b24e505ff3c1b4a.png)
Adobe Color CC
color.adobe.com/ru/create/color-wheel
Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.
![](https://habrastorage.org/r/w1560/files/1f1/d80/736/1f1d80736b7449f2b95bc9d0423d845d.png)
Coolors
coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb
Быстрый генератор цветовой схемы для дизайнеров.
![](https://habrastorage.org/r/w1560/files/5c0/659/2df/5c06592dfdbd4bc9bec9ff5698cb3bc8.png)
BADA55.Io
bada55.io
Сайт предлагает наиболее агрессивные названия для цветов CSS.
![](https://habrastorage.org/r/w1560/files/249/dbd/4c9/249dbd4c94e8405fa4072779d6c4885b.png)
Paletton
paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Цветовая схема для дизайнеров.
![](https://habrastorage.org/r/w1560/files/1b0/971/e51/1b0971e516724454a9b0a018067bc0f5.png)
Colourcode
colourco.de
Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.
![](https://habrastorage.org/r/w1560/files/345/b31/76e/345b3176ef3e43fabdd2fbcb149e22db.png)
Color Palette Generator
www.degraeve.com/color-palette
Создает цветовые схемы. Необходимо ввести URL изображения, чтобы получить цветовую палитру, которая соответствует выбранной картинке.
![](https://habrastorage.org/r/w1560/files/f14/7dc/1e7/f147dc1e76824db8ba7efc22dbe4423a.png)
Color Palettes Color Schemes
www.color-hex.com/color-palettes
![](https://habrastorage.org/r/w1560/files/289/330/28d/28933028d93e4897a573eaae3a8f57fe.png)
ColorSchemer
www.colorschemer.com/online.html
Он-лайн схема, генерирующая цвет.
![](https://habrastorage.org/r/w1560/files/46a/5e3/b34/46a5e3b342524aa4af464cd2e42bd436.png)
Colllor
colllor.com
Генератор цветовой палитры.
![](https://habrastorage.org/r/w1560/files/489/d86/78a/489d8678a5bf4a6cb530d31ee9330d1e.png)
Contrast-A
www.dasplankton.de/ContrastA
Приложение позволяет пользователям экспериментировать с цветовыми комбинациями, создавать собственные.
![](https://habrastorage.org/r/w1560/files/335/255/507/3352555074f443cb982a8b693dc53843.png)
Color Hex
www.colorhexa.com
Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.
![](https://habrastorage.org/r/w1560/files/819/e94/475/819e944758d24b98baaa07faeeebc5cd.png)
СolorExplorer
www.colorexplorer.com
Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.
![](https://habrastorage.org/r/w1560/files/600/2c6/ed5/6002c6ed502f480c87454e1285911809.png)
ColorLuck
7act.ru/colorluck.php
Инструмент для поиска максимально различных цветов.
![](https://habrastorage.org/r/w1560/files/da1/f75/837/da1f7583750f4e28a1f76c3a98c0d68d.png)
![](https://habrastorage.org/files/1c9/7c7/89c/1c97c789c4e4419ab13ae09b894cf758.png)
Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.
![](https://habrastorage.org/files/7de/036/759/7de0367597954ad78cbe2e45ddbe5c29.png)
Согласно теории цвета, гармоничные комбинации используют: два противоположные друг другу цвета; любые три цвета, равномерно распределенные вокруг круга и формирующие треугольник; любые четыре цвета, формирующие прямоугольник (фактически, две пары цветов друг напротив друга).
![](https://habrastorage.org/files/151/1e6/b66/1511e6b668ba4b9eac48a80674f33ca3.png)
Правила соответствия цветов
Взаимодополняющие цвета — расположены друг напротив друга. Например, синий и оранжевый, или красный и зеленый.
Они контрастируют между собой, хорошо подчеркивают и выделяют нужный элемент. Лучшее сочетание выходит, когда один цвет применятся в качестве фона, а другим выделяются акценты. Игра с оттенками и тонами разнообразит цветовую гамму и поможет добиться желаемого результата.
Разделение взаимодополняющих цветов осуществляется за счет трех цветов. Они также находятся друг напротив друга, но общая комбинация выглядит более спокойной и разнообразной за счет добавления третего цвета.
Аналогичные цвета любые три цвета, которые находятся рядом с другом. Например, оранжевый, желто-оранжевый и желтый.
Триада образовывается из трех цветов, равномерно удаленных друг от друга. Схема триады создает контраст, где один цвет доминурует, а два других — расставляют акценты.
Две пары используют четыре цвета вместе в форме двух наборов дополнительных цветов.
Полезные веб-сайты
В сети немало ресурсов, которые предоставляют готовые цветовые палитры, паттерны и шаблоны. Ниже подобран небольшой список из полезных для дизайнера «цветовых» ресурсов.
СOLOURlovers
www.colourlovers.com/palettes/most-views/all-time/meta
Творческое сообщество, где люди со всего мира выкладывают готовые цветовые решения и шаблоны. Все выложенное оценивается пользователями.
![](https://habrastorage.org/files/6fb/0f9/8de/6fb0f98de0f74bd1a4b1fe3f325c3378.png)
Color Safe
colorsafe.co
Веб-сайт с красивыми и доступными цветовыми палитрами, основанными на рекомендациях WCAG Guidelines.
![](https://habrastorage.org/files/a0d/94b/138/a0d94b1383cd4eb9bc281f7a5f472550.png)
COLORS
clrs.cc
Простая палитра цветов для веб-разработки.
![](https://habrastorage.org/files/af8/fd1/b01/af8fd1b01ed34091811da28fc99c1eba.png)
UiGradients
uigradients.com/#PinotNoir
Большая коллекция уже готовых цветных градиентов.
![](https://habrastorage.org/files/f2f/cf1/b2c/f2fcf1b2c3cc47a8a395f169c7bf3e34.png)
Couleurs
couleursapp.com
Удобное приложение для того, чтобы «выхватывать» и сохранять цвета, которые отображаются на экране.
![](https://habrastorage.org/files/f76/e7a/667/f76e7a6679084722a7f6245fef055c09.png)
Web Colour Data
webcolourdata.com
Делает разбивку любого сайта по цветовой гамме (по номерам и образцам).
![](https://habrastorage.org/files/ad4/048/496/ad404849695d4e7e8cfde4efa383143d.png)
Material Palette
www.materialpalette.com
Генерирует цветовую палитру дизайна.
![](https://habrastorage.org/files/41f/738/eb5/41f738eb52db483da7c6bf4089798158.png)
Material Colors
materialcolors.com
Подборка цветовых образцов из Google's Material Design Guidelines.
![](https://habrastorage.org/files/070/273/494/070273494476408cba28faad04b95b2f.png)
Material Design Colors
www.designskilz.com/colors
Это небольшое веб-приложение помогает визуализировать цвета дизайна и скопировать их в различных форматах.
![](https://habrastorage.org/files/1be/1ba/fe6/1be1bafe6efc4c3d83b7af65b20dc494.png)
Material Design Palette
codepen.io/addyosmani/full/jlvoC
Цветовая палитра на 500 диапазонов оттенков для Android, веб и iOS.
![](https://habrastorage.org/files/ede/498/397/ede4983977c74ed1ba8d30d8179f5adf.png)
Colours
colours.neilorangepeel.com
Цвет по номерам и расположению на палитре.
![](https://habrastorage.org/files/188/982/d13/188982d13e2645f3b0a3b13c5f1cca90.png)
Rrggbb
rrgg.bb
Образцы цвета с номерами для программ.
![](https://habrastorage.org/files/2ac/e27/197/2ace271979a64438bf2024010a3f2e5e.png)
Fifty Shades Of Grey For Web Designers
www.mynameisq.com/web-lab/fifty_shades_of_grey
Оттенки и образцы серого для веб-дизайна.
![](https://habrastorage.org/files/32f/7fb/910/32f7fb9106c941c69d44feba94ca4090.png)
Fifty Shades Of Grey For Web Designers
hex.colorrrs.com
Сайт, подбирающий цвет.
![](https://habrastorage.org/files/33d/96d/8b1/33d96d8b170f45d8a2610ee88e213353.png)
Material UI Colors
www.materialui.co/colors
Палитра UI-цветов от Google, включает основные и дополнительные цвета, которые могут быть использованы для иллюстраций или веб-разработки.
![](https://habrastorage.org/files/d50/ae8/ae6/d50ae8ae68ab400f9b24e505ff3c1b4a.png)
Adobe Color CC
color.adobe.com/ru/create/color-wheel
Выхватывает цвета и оттенки из внешней среды — достаточно навести камеру телефона на что-то красочное.
![](https://habrastorage.org/files/1f1/d80/736/1f1d80736b7449f2b95bc9d0423d845d.png)
Coolors
coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb
Быстрый генератор цветовой схемы для дизайнеров.
![](https://habrastorage.org/files/5c0/659/2df/5c06592dfdbd4bc9bec9ff5698cb3bc8.png)
BADA55.Io
bada55.io
Сайт предлагает наиболее агрессивные названия для цветов CSS.
![](https://habrastorage.org/files/249/dbd/4c9/249dbd4c94e8405fa4072779d6c4885b.png)
Paletton
paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
Цветовая схема для дизайнеров.
![](https://habrastorage.org/files/1b0/971/e51/1b0971e516724454a9b0a018067bc0f5.png)
Colourcode
colourco.de
Выбор цвета, основанные на hsl. Схема включает разные комбинации цвета.
![](https://habrastorage.org/files/345/b31/76e/345b3176ef3e43fabdd2fbcb149e22db.png)
Color Palette Generator
www.degraeve.com/color-palette
Создает цветовые схемы. Необходимо ввести URL изображения, чтобы получить цветовую палитру, которая соответствует выбранной картинке.
![](https://habrastorage.org/files/f14/7dc/1e7/f147dc1e76824db8ba7efc22dbe4423a.png)
Color Palettes Color Schemes
www.color-hex.com/color-palettes
![](https://habrastorage.org/files/289/330/28d/28933028d93e4897a573eaae3a8f57fe.png)
ColorSchemer
www.colorschemer.com/online.html
Он-лайн схема, генерирующая цвет.
![](https://habrastorage.org/files/46a/5e3/b34/46a5e3b342524aa4af464cd2e42bd436.png)
Colllor
colllor.com
Генератор цветовой палитры.
![](https://habrastorage.org/files/489/d86/78a/489d8678a5bf4a6cb530d31ee9330d1e.png)
Contrast-A
www.dasplankton.de/ContrastA
Приложение позволяет пользователям экспериментировать с цветовыми комбинациями, создавать собственные.
![](https://habrastorage.org/files/335/255/507/3352555074f443cb982a8b693dc53843.png)
Color Hex
www.colorhexa.com
Сайт предоставления информации о любом цвете. Достаточно ввести любые цветовые значения в поле поиска и Color Hex выдаст подробное описание, автоматически преобразовывая в RGB, CMYK, HSL, HSV, CIE-Lab, Хантер-Lab, CIE-Luv, CIE-LCH, XYZ и XYY.
![](https://habrastorage.org/files/819/e94/475/819e944758d24b98baaa07faeeebc5cd.png)
СolorExplorer
www.colorexplorer.com
Полезный сайт, предоставляющий целый набор она-лайн инструментов для работы с цветовой палитры.
![](https://habrastorage.org/files/600/2c6/ed5/6002c6ed502f480c87454e1285911809.png)
ColorLuck
7act.ru/colorluck.php
Инструмент для поиска максимально различных цветов.
![](https://habrastorage.org/files/da1/f75/837/da1f7583750f4e28a1f76c3a98c0d68d.png)