палитры цветов для дизайнеров с кодами
· Инструмент для подбора цветов и генерации цветовых схем ·
Схема:
Насыщенность/Яркость
Схема:
Контрастность
Выбранный Вариант:
Насыщенность/Яркость
Постоянный адрес текущей цветовой схемы:
Результат комфортен для глаз, даже при использовании агрессивных цветов. Вместе с тем, труднее найти диакритические знаки и основные факты.
Также монохроматические вариации сделаны для каждого цвета в других схемах.
Не следует злоупотреблять контрастными цветами в дизайне, используйте их только как цветовой акцент.
Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.
Меньшая дистанция между цветами вызывает в результате меньше напряжения. Тем не менее, тетрада всегда является более «нервной» и «вызывающей», чем другие цветовые схемы. Работая с ней, вы должны заботиться о связях между одним цветом и его смежным дополнительным цветом (комплементом). В случае тетрады (угол 90°), необходимо хорошее чувство цвета и очень деликатный подход к сочетанию цветов.
Вы можете задать дистанцию смежных (вторичных) цветов, угол не должен превышать 60°.
Будьте осторожны: из-за ошибки округления во время преобразования, значение RGB, используемое в цветовой схеме, может немного отличаться от введенного значения.
Появилась удобная возможность поделиться цветовой палитрой с друзьями и коллегами, используя готовые коды для вставки картинки на форум или в блог.
Как выбрать и создать цветовую схему для сайта
Не можете выбрать подходящие оттенки для своего макета? Вам помогут сервисы подбора цветовой схемы для сайта и наши рекомендации.
Цветовая схема сайта — это набор нескольких оттенков, которые будут использоваться в дизайне. Она поможет создать более продуманный и целостный дизайн, а еще — упростит и ускорит работу.
Чаще всего дизайнеры используют уже готовую палитру, опираясь на фирменный стиль, но, если такового нет, нужно сделать схему самому. Лучше всего приступать к созданию цветовой схемы уже после того, как будет готов прототип — в этом случае будет известно, какие элементы будут присутствовать на страницах и сколько оттенков может понадобиться.
Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.
Как выбрать идеальный цвет
Если верить исследованиям, большинство людей принимают подсознательное решение о покупке продукта в течение 90 секунд. Причем это решение чаще всего основывается на восприятии цветов, которые видит человек. Наверняка вы заметили, что большинство luxury-брендов делают ставку на черный, а за экомарками прочно закрепился зеленый и его оттенки.
Чтобы научиться подбирать красивые сочетания оттенков и улавливать гармонию, придется потратить немало времени на самообучение. Если времени на это нет, а к работе нужно приступать, сосредоточьтесь на основах.
Изучите фирменные цвета конкурентов или обратите внимание на оттенки, используемые в смежной отрасли.
Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.
Найдите как можно больше референсов — если боитесь выбирать оттенки самостоятельно, подборку можно просто отправить клиенту и обсудить с ним возможные решения.
Сервисы подбора цветовых схем для сайта
Различных инструментов создания палитры существует много; мы выбрали десятку самых популярных, среди которых сервисы и для начинающих дизайнеров, и для профессионалов.
Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.
Colormind — продвинутый сервис для создания цветовой схемы для сайта. Онлайн-инструмент не только генерирует палитру, но и позволяет очень тонко настраивать каждый из оттенков, а также составляет подборку цветов на основе загруженного изображения.
Colors — бесплатный генератор цветовой палитры, за считанные секунды создает хорошие варианты. Если предложенная системой подборка вам не нравится, то можно сгенерировать новую или задать определенные цвета и заменить какие-то оттенки.
Color Safe — этот инструмент понравится тем, кому небезразлична аббревиатура WCAG (Руководство по обеспечению доступности веб-контента, в которое входит множество рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям — например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.
Material Color Tool — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.
Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.
Colordot — сервис для тех, кто не привык проводить часы в поисках идеального цвета и готов довериться интуиции. Подбор оттенка осуществляется, пока вы водите мышкой по экрану: стоит кликнуть, и система запомнит цвет и предложит выбрать следующий.
Colourcode — во многом сервис похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим стилям цвета.
Material Design Palette предлагает выбрать два основных оттенка для цветовой схемы для сайта, а потом показывает, как сочетание будет выглядеть на странице. Кроме того, сервис сразу же предлагает более расширенную палитру.
Palettr — очень необычный сервис, который наверняка оценят творческие натуры. В отличие от всех рассмотренных нами инструментов, этот предлагает создавать палитру не на основе цветов, а на основе места или явления. Просто вбейте в строку поиска какое-нибудь слово и увидите, что получится.
Литература
Если хотите научиться лучше разбираться в цветах, обратите внимание на книги. Их по теории цвета очень много, мы рекомендуем следующие три.
Иоханнес Иттен.
«Искусство цвета»
Работа Иоханнеса Иттена «Искусство цвета» считается наиболее полным и масштабным исследованием теории цвета. Книга входит в список обязательных к прочтению трудов для художников, дизайнеров и архитекторов.
«Искусство цвета» поможет узнать больше о теории цвета и гармонии оттенков.
Генератор цветовой палитры
Цветовые палитры CSS для классных цветовых комбинаций и элементов пользовательского интерфейса
Что такое цветовая палитра?
Цветовая палитра — это набор цветов, которые хорошо сочетаются друг с другом. Цветовые палитры часто используются для создания чего-то с единообразным внешним видом. Цветовые палитры используются дизайнерами логотипов, графическими дизайнерами, иллюстраторами, веб-разработчиками и другими художниками. Хорошая цветовая палитра является основой профессионального визуального дизайна.
Как сделать цветовую палитру?
Цветовая палитра часто оформляется вручную. Часто опытный дизайнер или художник выбирает цвета, которые хорошо сочетаются. За годы работы с разными цветами у них есть опыт, чтобы узнать, какие цвета хорошо сочетаются друг с другом и эстетически приятны. Тем не менее, выбор хорошей цветовой палитры может быть трудным. К счастью, компьютерные алгоритмы могут помочь с этим.
Автоматически генерировать цветовые палитры
Этот генератор цветовой палитры автоматически выбирает цвета, которые хорошо смотрятся вместе. Наш генератор цветовой палитры использует алгоритмы цветовой палитры нашего производителя логотипов My Brand New Logo, который автоматически создает красивые и хорошо сбалансированные цветовые палитры. За кулисами скрывается множество исследований цвета, и все палитры полностью созданы компьютером.
Использование цветовой палитры
Когда вы видите цветовую палитру, которая вам нравится, вы можете использовать эти цвета в ваших собственных проектах графического дизайна. Просто нажмите на отдельный цвет, чтобы скопировать шестнадцатеричный код цвета в буфер обмена. Или, если вы хотите использовать полную цветовую палитру в своих веб-проектах, вы можете скопировать и вставить все цвета, нажав скопировать код CSS *.
Советы по дизайну цветовой палитры
Хорошая цветовая палитра имеет хороший контраст, визуально приятна и содержит воспринимаемые разные цвета. Наши алгоритмы стараются изо всех сил придерживаться этих дизайнерских качеств. Если вы хотите больше узнать о цветах, особенно о дизайне логотипов, мы разработали для вас несколько рекомендаций:
Скопируйте код CSS
Используйте этот код CSS в своем веб-проекте, чтобы получить цветовую палитру:
Сервисы подбора цвета для веб-дизайна
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Сервисы подбора цвета для веб-дизайна
С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.
Есть возможность оценить, как будут видеть вашу цветовую гамму люди с дальтонизмом и другими особенностями зрения. Можно выбрать безопасные веб-цвета.
Adobe Kuler второй веб инструмент, который я довольно часто использую. Подбор цветовой схемы происходит практически также, как и на предыдущем сайте, но люблю я его не за это. Кроме того, что вы сами можете создавать цветовые схемы, вы можете посмотреть и использовать схемы, созданные другими людьми.
Для этого надо нажать кнопку в левом верхнем меню «Смотреть». И перед вами откроется галерея всевозможных цветовых сочетаний.
Этот инструмент немного похож на Сolorscheme, но имеет меньше функций, зато есть возможность посмотреть, как будут выглядеть цветовые блоки.
Этим сайтом я практически не пользуюсь, но раз уж он есть у меня в закладках, то решила добавить и его.
Следующие два сайта генерируют палитру из выбранного вами изображения. It is magic 🙂
Вы выбираете любую картинку, цвета которой вам нравятся, сервис ее анализирует и выдает вам цветовую палитру. Эти два сайта отличаются лишь тем, как предоставлять им картинку.
На этом сайте необходимо указать ссылку на изображение.
На этот сайт нужно загрузить картинку со своего компьютера.
Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».
Как видно из названия, здесь можно подобрать цвета для модного сейчас, плоского дизайна. Сайт интересен тем, что выбрав палитру, вы можете скачать ее для программ Corel и Photoshop.
Еще один модный тренд — материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.
И напоследок снова user interface. Здесь просто набор цветов для UI дизайна. Нажав на любой цвет, можно посмотреть как на определенном фоне будет читаться белый текст.
Вот такие инструменты есть у меня в закладках.
Напишите в комментариях, какими сайтами подбора цвета для веб-дизайна пользуетесь вы?
Нужен сайт с правильными цветами? Пишите, сделаем 🙂
UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 6 лет. Связаться со мной можно через страницу Контакты
Цвета для сайта: 50 идей от лучших дизайнеров
Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших!
Как же подобрать нужные цвета для сайта, которые только усилят ваше послание и будут выглядеть профессионально? Учитесь у лучших!
Найти то самое сочетание поможет коллекция цветовых палитр сайтов, отмеченных престижным сайтом Awwwards. Вдохновляйтесь и смело реализуйте, эти дизайны одобрены гуру индустрии.
Цвета для сайта: 50 палитр
1. Active Theory
В этой палитре сочетаются теплые и холодные оттенки, при этом она выглядит насыщенно, но не перегружено. Отлично подойдет для молодежного и современного дизайна.
2. Paypr
Здесь оттенки синего и фиолетового сочетаются с ярким красно-оранжевым акцентом, который сразу обращает внимание пользователей на самое важное.
3. Resn
Цветовая палитра выглядит очень естественно. Идеально подойдет для сайтов, связанных с природой и “зеленой” тематикой.
4. Grosse Lanterne
Темно-синий и зеленый сочетаются в лаконичной и нестандартной цветовой схеме. Вместе они успокаивают и располагают к себе.
5. W&CO
Бросающееся в глаза сочетание кораллового и голубого смотрится достаточно смело. Выбирайте эти цвета для необычного и ультрасовременного проекта.
6. Stinkdigital
7. Bordel Studio
Элегантная палитра объединяет темные приглушенные оттенки и создает утонченный дизайн.
8. ReedBe
Красно-коричневый в комбинации с насыщенным красным и лавандовым привлекает своей глубиной и уникальностью.
9. Samsy
Темная и мистическая палитра с яркими синими акцентами в топе дизайн-трендов этого года.
10. Bryan James
Розовые, красные и серые оттенки отлично смотрятся на темном фоне и ассоциируется с утонченностью и минимализмом.
11. Anton & Irene
Это красивое сочетание розового, салатового и серого идеально подойдет для создания яркого и располагающего к себе дизайна.
12. Bert
От такого сайта сложно оторвать взгляд, темные оттенки серого в сочетании с бирюзовыми акцентами украсят любой современный проект.
13. BrightMedia
В этом дизайне объединились все оттенки красного для поднятия настроения пользователей и создания уникального креативного образа.
14. Julie Flogeac
Яркое сочетание горчичного, красного и синего дарит легкое чувство ностальгии и отлично привлекает внимание.
15. Epic
Бежевые оттенки с синим и рубиновым выглядят одновременно утонченно и легко.
16. MediaMonks
Эта цветовая гамма подойдет всем, кто планирует создать футуристичный и современный сайт.
17. eDesign Interactive
Три ярких цвета на темно-сером фоне приковывают к себе взгляды и вдохновляют энергичностью.
18. HAUS
Эту палитру стоит выбрать для элегантного и футуристичного сайта, она добавит ему динамики и утонченности.
19. Gusto Ids
Цвет яичной скорлупы, насыщенный ванильный и серый в сочетании с акцентным красным смотрятся лаконично и ассоциируются с теплотой и гостеприимством.
20. FCINQ
Идеальный пример цветовой схемы для модного сегодня стиля киберпанк. Яркие неоновые оттенки и грамотно подобранные акценты выведут любой сайт на новый уровень.
21. Change Digital
Оттенки голубого и фиолетового выглядят в этой палитре особенно свежо, они одновременно заряжают энергией и успокаивают.
22. Watson/DG
Если вы ищете более классический бизнес-вариант, обратите внимание на эту сдержанную палитру.
23. Supremo
Насыщенные оттенки синего делают этот дизайн сдержанным, но в то же время интересным. Отличный выбор для корпоративных и образовательных проектов.
24. Umwelt A/S
Эта простая, но эффективная комбинация выглядит профессионально и стильно.
25. Waaark
Яркая и элегантная цветовая схема сочетает в себе сразу несколько бросающихся в глаза оттенков: современно и со вкусом.
26. Five Hundred
Игривая и полная жизни палитра отлично дополнит смелые проекты.
27. Immersive Garden
И снова яркий цвет на темном фоне, в этот раз в главной роли зеленый. Выглядит элегантно.
28. SMFB
Здесь яркий акцентный желтый эффективно привлекает и направляет внимание пользователей.
29. Nurture Digital
30. Born05
Сочетание оттенков зеленого и синего ассоциируется с природой, стабильностью и надежностью.
31. Stinkdigital
Яркий дизайн в оттенках розового и фиолетового дарит чувство свежести и легкости.
32. AILOVE
Необычное сочетание темно-красных и синих цветов выделяется и захватывает внимание.
33. Superhero Cheesecake
34. Burocratik
Яркие оттенки голубого с оранжевым акцентом громко заявляют о себе и заряжают энергией.
35. Google Brand Studio
Сочетание красного и синего смотрится интересно и подчеркивает уникальность проекта.
36. Details
Неожиданное и современное решение поможет любому сайту стать лучшим в своей нише.
37. Cher Ami
Энергичная и оптимистичная палитра создана для ярких проектов.
38. Leavingstone
Удивительно, как это сочетание цветов одновременно ассоциируется и с холодом, и с теплом. Оптимальный вариант для праздничного дизайна.
39. Elespacio
Насыщенная, яркая палитра объединяет в себе оттенки желтого, синего и розового. Прекрасный минимализм.
40. SFCD
Всего пара элементов и правильно подобранные цвета делают из простой страницы образец качественного дизайна.
41. Great Works Copenhagen
Бесстрашное сочетание оттенков синего и красного подчеркнет профессионализм и силу проекта.
42. Resn
Плоский дизайн в современном небанальном исполнении.
43. Play
Комбинация кофе с небесно-голубым дарит чувство комфорта. Отличный вариант для бизнеса в сфере HoReCa.
44. details.ch
Утонченная и классическая палитра с современными нотками, подчеркнет серьезность и актуальность проекта.
45. stinkdigital
46. EPIC
Приглушенные оттенки синего, красного и зеленого выглядят традиционно и профессионально.
47. Apart
Гламурный и свежий взгляд на дизайн сайтов, цвета подчеркнут статус владельца.
48. FUTURAMO
Бирюзовый и розовый на фоне приглушенных оттенков привлекают внимание и выглядят профессионально.
49. Panic
50. madeo
Расслабляющая, но яркая палитра ассоциируется с оптимизмом и энергией.
Даже если вы новичок в дизайне в поисках идеальных цветов для своего сайта, эти палитры помогут создать по-настоящему профессиональный и модный проект. Идеи для графического дизайна ждут вас здесь.
Что такое EAT Google и как он поможет попасть в топ выдачи. Инфографика
Ключевые метрики в Инстаграм. Инфографика
Главный редактор Русабилити, контент-маркетолог, автор. Семь лет пишу о digital. Делюсь открытиями.
Комментарии (0)
Мы используем cookie-файлы. Оставаясь на сайте, вы соглашаетесь с использованием этих технологий.
Copyright © 2021 Rusability. Все права защищены.