18 полезных ресурсов для работы с цветом
- Дизайн
- 3 мин на чтение
- 10112
Если вы дизайнер, то наверняка у вас возникает потребность в том, чтобы подобрать гармоничные цвета для того или иного проекта.
По теме цвета существует масса книг и курсов, но задача остается задачей, тем более когда проект горит и нужно срочно все сдать.
Так вот, специально для этих целей существуют онлайн сервисы, которые помогут вам в подборе цветов.
Сайт дает много полезной информации по любому цвету: разложение на базовые цвета, коды в разных системах кодировки, базовые цветовые схемы, альтернативные цвета, примеры текста с этим цветом, оттенки, тона и даже то, как видят этот цвет люди с расстройствами зрения.
Дизайнер Эрика Шунмейкер поделилась дизайнерским лайфхаком. Чтобы добиться связности и гармоничности любой цветовой схемы, она предлагает наложить поверх схемы цвет (оранжевый, например), и подобрать его прозрачность.
Ресурс HTML Color Codes предоставляет вам весь набор инструментов для работы с цветами в Web: переводы из одного цветового представления в другое, color picker, color chart и даже много туториалов про цвета. Очень круто.
Роскошный онлайн-инструмент для работы с цветом! Палитры, цвета, паттерны, все настраивается, выкладывается, делится и вычисляется из заданной картинки! Удобнее colorlovers в некоторых аспектах, более гибкий, чем kuler! Восторг, господа!)
Социальная сеть, куда можно прийти за вдохновением при выборе цвета, а также чтобы узнать о нынешних цветовых трендах как для личных, так и для профессиональных проектов. Общество талантливых и полных энтузиазма разработчиков COLOURlovers создает цвета, палитры и шаблоны, используя инструменты доступные онлайн.
24 сочных градиента от дизайнера Luke Davies.
Полезнейший Web-инструмент проще которого сложно что-либо придумать. Данный ресурс позволяет подбирать цветовые гармоники просто водя мышкой по экрану. Если Вас удовлетворил цвет, просто нажмите левую кнопку мышки, экран разделится на двое и вы сможете продолжить подбор второго цвета. третьего и так далее.
Отличный ресурс, который анализирует цветопалитру любого сайта и выдает вам ее с головой, цветовым кругом и гистограммой. Не первой пикче — главная страница, на второй — анализ моего бложика (да, мелочью он тоже не брезгует:)
Это один из инструментов, который всегда должен быть под рукой у дизайнера, а на Color by Hailpixel определенно стоит обратить внимание. Открывшийся сайт покажет вам пустой экран с единственной ссылкой на черный цвет (#000000). Перемещая курсор по экрану, вы будете видеть, как изменяется цвет фона, а окошко в центре будет показывать соответствующий hex-код этого цвета. Клик мышью создаст полоску текущего цвета с цифровым значением этого цвета.
Используя приложение, вы можете быстро увидеть многоаспектный характер цветов и отношения между цветами. Цвета палитрый представлены в 3d виде. Созданные палитры могут быть импортированы или экспортированы в Adobe Swatch Exchange (ASE). В ColoRotate есть свое сообщество, где можно просмотреть темы, созданные другими пользователями.
Kuler это веб-приложение, которое позволяет создавать и просматривать ваши цветовые палитры, а также палитры созданные другими пользователями.
Этот сервис пригодится особенно веб-дизайнерам. Он позволяет подобрать цветовую модель для будущего сайта.
COLOURlovers предусматривает нечто большее, чем просто способ найти цветовые палитры. Это также место для взаимодействия с другими людьми для обсуждения тем, связанных с цветом. Там же можно прочитать интересные статьи о цвете.
Тут можно создавать свои цветовые схемы. Можно также загрузить фото и разложить его на цветовые пиксели, чтобы взять образцы цветов. А после сохранить и загрузить себе в удобном формате.
Абсолютно бесплатно и, что наиболее важно – онлайн, позволяет создавать и сохранять гармоничные цветовые сочетания, как автоматически, так и вручную. Пользуясь тремя ползунками RGB или HSV вы автоматически получаете гармоничное сочетание из шести цветов и затем можете настраивать их в соответствии со своим вкусом. Цвета автоматически представляются в виде цветового HTML кода и кода RGB, а также могут быть экспортированы в виде цветовых таблиц Photoshop (.ACT) и Illustrator (.EPS). Кроме того, есть функция сравнения цвета со стандартным понтонным. Свои палитры можно хранить прямо на сайте, задавая им удобные вам имена. Также на сайте можно найти массу готовых палитр на разные случаи жизни.
ColorMunki дает возможность поиска цвета из встроенного в библиотеках, а так же с помощью ключевых слов.
Полезный сервис, который помогает подобрать правильные цвета и оттенки. Интерфейс интуитивно понятен, сложностей возникнуть не должно.
Простой, приятный интерфейс. Существуют встроеные библиотеки цветов и есть возможность создавать свои.
Хорошо организован набор функций.
Фото на обложке: ShutterStock
- #веб
- #дизайн
- #онлайн
- #сервис
- 0
7 лучших сервисов для работы с цветом и подбора гармоничных оттенков. ⋆
Как подобрать классные и правильные сочетания цветов и оттенков? Как найти цветовую гармонию? На эти казалось бы простые вопросы не так-то и просто дать ответ.
Хочу заметить, что предложенные сервисы лишь отчасти помогают решить данную проблему. К ним стоит относиться лишь как к вспомогательным рабочим инструментам. Так в чем секрет? Как научиться выбирать цвета? Где кроется правда? Ответ прост. В насмотренности. Если у вас низкий уровень насмотренности, то, пока, ничего вам не поможет. Вы по прежнему будете выбирать “серые” и “грязные” несочетающиеся оттенки. С этим стоит смириться, на время.
- Насмотренность и как ее развивать. Один простой способ, который изменит все.
Процесс накопления визуального опыта не быстр. Просматриваемые образы будут шаг за шагом откладываться в подкорке вашего головного мозга и обязательно настанет тот момент, когда вы сможете перевернуть страничку в своей жизни и пойти дальше. Развитие произойдет скачкообразно. Так происходит у всех.
Давайте теперь посмотрим на сервисы работы с цветом и кратко пробежимся по их функциональности.
Сервис Adobe Color является самым универсальным. Используя мощные механизмы для гармонизации, вы сможете создавать красивые цветовые темы и сочетания. В вашем распоряжении классический цветовой круг и возможность применения правил гармонии цветов. Сервис позволяет подобрать цвета используя следующие классические цветовые схемы:
- Последовательная
- Монохромная
- Треугольная
- Комплементарная
- Сплит-комплементарная
- Двойная сплит-комплементарная
- Квадратная
- Составная
- Оттеночная
- Произвольная
Есть также интересный раздел, в котором сервис анализирует работы других авторов и различные творческие проекты из галерей Behance и Adobe Stock. Можно отслеживать моду на определенные цветовые тенденции.
Любые найденные цветовые сочетания вы можете сохранить в собственной библиотеке и возвращаться к ним по необходимости. Все данные из библиотеки синхронизируются с Creative Cloud.
Дополнительный функционал
- Генерация палитры из загруженной фотографии
- Генерация градиента из загруженной фотографии
- Симулятор дальтонизма
- Поддерживает RGB, PANTONE, HSV, CMYK и LAB
Colorscheme.ru – это сервис, который дает пользователям возможность не только подобрать гармоничные цвета и оттенки, используя цветовой круг, но и познакомиться с цветовой теорией. На сайте вы найдете множество интересных статей из книги Иоханнеса Иттена “Искусство Цвета”. Рекомендую обязательно их прочитать. В них содержится базовая информация о цвете.
Помимо прочего, сервис обладает дополнительным функционалом, который может пригодиться веб разработчикам. Для них доступны специальные ключевые слова, которые можно применять для обозначения того или иного цвета при программировании на HTML, CSS, JavaScript, Flash, и др.
Из интересных функций я бы еще выделил симуляцию зрения с различными дефектами: протанопия, дейтеранопия, полный дальтонизм и др.
Дополнительный функционал
- Симулятор дальтонизма
- Поддерживает RGB, PANTONE и RAL
Color.hailpixel.com – сервис, который дает возможность для самостоятельного подбора цветовых вариаций. Выбор оттенков происходит в результате движения курсора мышки влево-вправо, вверх-вниз и прокрутки колесика. К сожалению сервис не позволяет в полной мере опереться на различные цветовые схемы. Подбор оттенков происходит на интуитивном уровне, со всеми вытекающими отсюда неточностями. Приложение можно использовать в качестве развлечения и для практических целей почти не пригоден.
Дополнительный функционал
- Поддерживает RGB и HSL
Colorhunt.co – это простой и интеллектуально понятный сервис, который предлагает различные готовые цветовые палитры, многие из которых будут вам знакомы. Сайт предлагает не только сохранять понравившееся сочетания, но и создавать новые, выставляя их на всеобщий показ.
Рекомендую попробовать.
Дополнительный функционал
- Поддерживает RGB
Сервис Coolors.co включает в себя самые разнообразные и мощные инструменты для создания цветовых палитр. Вы можете не только самостоятельно пробовать свои силы, но и вдохновляться тысячами цветовых сочетаний, которые составили другие пользователи.
Что мне еще понравилось, так это то, что создатели предлагают нам функцию преобразования цветов в различные цветовые системы. Сайт работает со следующими системами: HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, LUV и HWB.
Как и на Colorscheme.ru и Adobe Color, разработчики предусмотрели функционал, который позволит создать дизайн, доступный для дальтоников. Считаю это важным, т.к. этой проблеме много времени никто не уделяет.
Сервис также отлично справляется с задачами, опирающимися на составление палитр, опираемых на различные классические цветовые схемы.
Дополнительный функционал
- Генерация палитры из загруженной фотографии
- Создание коллажа из загруженной фотографии + сгенерированная палитра
- Палитры градиентов
- Создание градиентов
- Проверка контрастности цвета текста и фона
- Поддерживает HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, RAL, HKS, COPIC, PRISMACOLOR, LUV и HWB
- Приложение для IOS + аддон для Adobe + расширение для Chrome
В сервис Hslpicker.
com вынесена лишь одна полезная функция. Это работа с цветовым пространством HSL. Бывает полезна при составлении гармоничных палитр для иллюстраций и веб дизайна. Позволяет удобно подбирать оттенки для светлых участков и теней.
Дополнительный функционал
- Поддерживает HEX, RGB и HSL
Сервис Mycolor.space позволяет в полуавтоматическом режиме получить красивые сочетания оттенков. Для этого вы должны всего лишь указать один цвет и система на основе внутренних алгоритмов выдаст вам готовый результат. И знаете, делает это в общем то неплохо.
Из приятных доступных бонусов можно выделить возможность создания двух или трехцветных градиентов и использования сгенерированного кода в CSS. Эта функция будет полезна веб разработчикам.
Дополнительный функционал
- Поддерживает HEX и RGB
- Создание 2-х цветного градиента CSS
- Создание 3-х цветного градиента CSS
лучшие генераторы цветовых схем
Здесь вы найдете простой список некоторых отличных онлайн-ресурсов о цветах и их использовании в веб-дизайне.
Цвет оказывает огромное влияние на то, как мы воспринимаем окружающий мир. Цвет может влиять на чувства и то, как мы взаимодействуем с вещами, такими как кнопка на веб-сайте или светофор. А с нашими ожиданиями и прошлым опытом цвет может даже повлиять на то, как мы ощущаем вкус пищи.
Цвета играют важную роль во многих аспектах нашей повседневной жизни, в том числе и в веб-дизайне. Однако подбор цветов и поиск правильной цветовой гаммы не всегда является легкой задачей. К счастью, есть много отличных инструментов, которые могут помочь, и это то, что касается списка ColorMatch.
Инструменты для подбора цветов и создания цветовых схем
Coolors.co — Быстрый генератор цветовых схем
Coolors.co — простой и очень быстрый генератор цветовых схем. Это, наверное, мой любимый инструмент, когда дело доходит до изучения различных цветовых комбинаций с нуля.
Когда вы заходите на сайт, он генерирует палитру из 5 цветов, которые хорошо сочетаются друг с другом.
Вы можете легко создать новую цветовую схему, нажав клавишу пробела, и, если вам нравится один или несколько цветов, щелкните цвет, и он заблокируется, поэтому он не изменится при следующем нажатии клавиши пробела.
Если у вас уже есть цвет, для которого вы пытаетесь подобрать соответствие, вы можете ввести шестнадцатеричное значение и выполнить настройку для компонентов RGB, HSB, CMYK, Pantone и Copic. Вы даже можете выбрать определенный цвет из изображения или заполнить всю палитру из этого изображения. Также можно выбрать разные оттенки цвета и настроить оттенок, насыщенность, яркость и многое другое.
После выбора палитры совпадающих цветов ее можно экспортировать в формате SVG, PNG, PDF или SCSS, или вы можете просто скопировать URL-адрес или добавить его в закладки для дальнейшего использования. Мне очень нравится функция прямой ссылки, так как вам не нужно создавать профиль, чтобы использовать сайт. Однако вы можете создать профиль на сайте, а затем сохранить там все свои цветовые схемы.
Если вы не хотите создавать свою собственную палитру цветов, есть тысячи готовых палитр для изучения.
HueSnap — извлечение цветов из фотографий
HueSnap позволяет создавать палитры путем привязки цветов к изображениям. Вы также можете изучить большой набор существующих палитр, которые затем можно настроить.
Довольно легко извлечь выбранные цвета из фотографии и создать палитру из этих цветов. Но чтобы загрузить свою палитру, вам придется создать учетную запись, что является недостатком, если вы просто хотите попробовать ее или использовать веб-сайт один раз.
Существуют также приложения для iOS и Android, так что вы можете легко получить доступ и синхронизировать свои цветовые палитры.
Инструмент Material Design Color — специальные возможности
Material Color является частью веб-сайта системы дизайна материалов Google. Как и большинство других инструментов, вы можете создать цветовую палитру, но этот инструмент лучше всего подходит для измерения уровня доступности цветовых комбинаций.
Читабельность и доступность иногда упускаются из виду в веб-дизайне, где основное внимание часто уделяется общему внешнему виду, тому, как цвета соответствуют фирменному стилю, или даже оптимизации конверсии. Но вы, конечно, также должны уметь эффективно читать текст, и здесь этот инструмент может помочь.
Adobe Color — старый добрый инструмент, обновленный новыми функциями
Adobe Color позволяет создавать цветовые схемы с помощью цветового круга, используя различные правила цветовой гармонии. Adobe Color также неплохо справляется с извлечением цветовой темы или градиента из фотографий.
Если вы являетесь пользователем Adobe Creative Cloud, вы также можете сохранять цветовые темы для использования непосредственно в своих проектах.
Вы также можете изучить существующие цветовые схемы, чтобы вдохновиться или загрузить их. Существует также раздел, в котором вы можете узнать о текущих цветовых тенденциях, которыми делятся творческие профессионалы, организованные из разных отраслей.
Colourco — Легко комбинируйте цвета
Colourco немного похож на Coolors.co, но вместо того, чтобы получать случайную палитру цветов, вы перемещаете мышь. Переместите мышь вверх для более темных цветов и вниз для более светлых, влево и вправо регулирует RGB. Можно продолжать добавлять цвета, нажимая символ +.
Существуют также готовые монохромные, аналоговые, триадные и четырехцветные схемы, в которых можно настроить свет и цвет так же, как описано выше.
Если у вас есть палитра, которая соответствует вашим потребностям, ее легко сохранить в виде таблицы стилей SCSS, палитры PNG или URL-адреса.
Палитра
Палитра использует другой подход, чем большинство инструментов подбора цвета. В веб-дизайне вы часто работаете только с несколькими базовыми цветами, которые обычно устанавливаются в соответствии с рекомендациями бренда. И здесь этот инструмент превосходен, когда вы добавляете базовый цвет, а затем настраиваете градиенты, пока не получите гладкую цветовую схему.
Вы можете экспортировать и импортировать свою палитру в формате JSON.
Статьи и теория цвета
Цвета Canva — основы
Canva На самом деле это онлайн-инструмент для создания графики. Canva, вероятно, больше ориентирована на непрофессионалов. Но на сайте также есть раздел, где вы можете узнать о цвете — это отличный ресурс для новичка, который хочет изучить основы, где пригодится интерактивный цветовой круг в сочетании с теорией. Вы также можете просмотреть список цветов и узнать об их значении.
Цвет имеет значение — интернет-ресурс о теории цвета
Цвет имеет значение. Этот веб-сайт посвящен цветам, и это отличное место, где можно узнать обо всем, что связано с цветом. Вы найдете базовую теорию цвета, а также более продвинутые сведения о цветовой психологии и цветах в маркетинге и брендинге.
Цвет имеет значение, пожалуй, один из лучших сайтов, где можно бесплатно узнать о цветах. Автор является консультантом по цвету, работал в списке компаний из списка Fortune 500 и преподавал в университете.
Онлайн-курсы по цвету
Если вы действительно хотите узнать о цветах, есть много отличных платных курсов на Udemy, Thinkific, Lynda и других сайтах онлайн-обучения. Если вы новичок в мире цветов, один из этих курсов может стоить того.
Веб-дизайн в целом
Awwwards
Awwwards — отличный сайт, на котором можно черпать вдохновение у других замечательных веб-дизайнеров и агентств. В Интернете есть много сайтов, на которых дизайнеры могут представить и продемонстрировать свои лучшие проекты, но это мой любимый.
Сайт полезен для того, чтобы узнать, что сейчас в тренде, а также что другие дизайнеры думают о представленной работе.
Веб-агентство
Webkilde Webbureau — небольшое датское веб-агентство, специализирующееся на быстрых и оптимизированных веб-сайтах. Компания предлагает дизайн White Label для других веб-агентств и веб-дизайнеров.
У вас есть дизайн в Adobe XD или аналогичном, и вы хотите преобразовать его в статическую домашнюю страницу или тему WordPress? Тогда вы можете сделать это здесь.
Тем не менее, вы, вероятно, также можете получить достойную работу на freelancer.com или на Fiveer.com за меньшие деньги.
Smashing Magazine
Smashing Magazine Если вы веб-дизайнер, то вы, вероятно, сталкивались с Smashing Magazine. У них есть отличные статьи, книги, список событий и ресурс для поиска работы.
Существуют также приложения для iOS и Android, так что вы можете легко получить доступ к своим цветовым палитрам и синхронизировать их.
A List Apart
A List Apart существует всегда. Есть несколько полезных книг о дизайне, разработке и веб-контенте.
Мне нравится этот сайт, потому что он, кажется, больше ориентирован на качественный контент, а не на количество, а также я следил за сайтом в течение двух десятилетий 🙂
11 бесплатных инструментов, которые помогут выбрать цвета для вашего веб-сайта — Блог Pagecloud
Клод Моне сказал: «Цвет — это моя навязчивая идея, радость и мучение на протяжении всего дня».
Если вы когда-нибудь сталкивались с подобным, пытаясь выбрать правильный оттенок для новой панели инструментов или кнопки призыва к действию, вы не одиноки. Мы уже обсудили основы выбора цветов для вашего веб-сайта, так что вы знаете, что это нечто большее, чем просто выбор любимых оттенков. Цвет — это наука.
Но давайте копнем глубже. Такие элементы, как контраст и градиенты, часто вступают в игру при поиске подходящей палитры. К счастью, мы провели исследование и нашли лучшие инструменты, которые помогут вам создать идеальную коллекцию цветов для вашего веб-сайта, не открывая кошелек.
- Цветная точка
- Цветовой код
- Охладители
- Канва
- Adobe
- Палеттон
- Дрибббл
- Хрома
- Цветовое пространство
- Дизайн материалов
- Colorsafe
Начать цветовую схему!
Итак, у вас есть цвет, который вы действительно хотите использовать.
Следующий шаг — найти другие цвета, которые будут дополнять его, задавая правильный тон вашему сайту. Вот три генератора цветовых схем, которые помогут вам найти идеальное сочетание:
Colordot
В Colordot есть забавный и простой конструктор цветовых схем, который позволяет настраивать образцы и смотреть, как они смотрятся вместе. Как только вы найдете цвет, который вам нравится, он предоставляет значение RGB. Вы можете изменить его, если хотите.
Colorcode
ColorCode немного более интерактивен и позволяет создавать дополнительные схемы на основе применения правил цвета к выбранному вами оттенку. Он также позволяет легко загружать схемы на панель инструментов в виде файлов SCSS или PNG с параметрами постоянной ссылки.
Coolors
Coolors позволяет брать цвета с изображений простым перетаскиванием.
Если вы выбрали изображение или фотографию, приложение быстро покажет, какие цвета будут сочетаться с ним в вашем дизайне.
Canva
Цветовой инструмент Canva делает все возможное, начиная с коллекции всех доступных цветов в стиле вики, которые вы можете использовать в своих проектах. Вы получаете доступ к подробной истории цвета, его значению, эквивалентным шестнадцатеричным кодам и можете исследовать тысячи цветовых комбинаций.
Вращение цветового круга
В визуальном спектре есть цвета, которые хорошо сочетаются друг с другом, и другие, мягко говоря, менее совместимые. Вы когда-нибудь пробовали вместе кислотно-зеленый и желтый?
Цветовой круг — прекрасный инструмент для понимания цветовых отношений.
Независимо от того, стремитесь ли вы к аналогичной группе или пользовательской коллекции оттенков, эти инструменты цветового круга позволят вам собрать идеальную палитру.
Adobe Color CC
У Adobe есть качественный инструмент цветового круга, который работает с различными цветовыми правилами, а также настраиваемый параметр. Он сохраняет различные шестнадцатеричные и RGB-коды, а также может создавать колесо на основе ранее выбранного изображения.
Paletton
Paletton позволяет настроить полную цветовую палитру на основе колеса с различными вариантами цветовых правил и стилей. Он также имеет уникальную опцию рандомизации для любителей приключений.
Вдохновите свой выбор
У вас возникли трудности с поиском идей или вы просто хотите узнать, как другие справились с выбором цвета? Взгляните на эти ресурсы, чтобы зажечь творческую искру.
Dribbble
Скорее всего, вы уже слышали о следующем инструменте в нашем списке… В Dribbble есть уникальный кладезь интересных изображений и произведений искусства. Зрители могут просматривать по цветовому коду, используя специальную функцию поиска. Этот инструмент любим всеми профессиональными дизайнерами и любителями!
Khroma
Khroma создает персонализированный цветовой алгоритм, с которым вы можете работать. Сайт предлагает вам выбрать 50 цветов из тысяч оттенков, чтобы убедиться, что сгенерированные комбинации работают идеально.
Colorspace
ColorSpace имеет функцию градиента, которая показывает постепенное изменение между двумя выбранными вами тонами.
Сайт также предлагает полные и случайные палитры, основанные на выборе одного цвета.
Сделайте ваши слова читабельными
Идеальные цвета для вашего сайта не будут иметь большого значения, если никто не сможет прочитать ваш текст. Эти ресурсы гарантируют, что ваш контент будет виден читателям, а ваши сообщения будут разборчивы в выбранной вами палитре.
Material Design
Material Design имеет цветовой инструмент, который позволяет вам измерить доступность и разборчивость выбранной вами комбинации цветов. Он предлагает рекомендуемую прозрачность и предупреждает вас, когда текст будет невозможно прочитать.
Colorsafe
Colorsafe позволяет использовать доступные цветовые палитры на основе рекомендаций по доступности в Интернете и коэффициентов контрастности.
Он прост в использовании и создает рекомендуемую серию цветовых палитр для шрифтов на основе выбранного оттенка фона.
Развлекайся!
Подбор идеальных цветов для вашего сайта не должен быть неприятным занятием. С помощью цветовых схем и кругов вы можете весело провести время, пробуя новые дополнительные оттенки, которые придадут индивидуальности вашему сайту.
Нет единого способа выбрать палитру, поэтому попробуйте инструменты и не стесняйтесь увлекаться! Не забудьте обеспечить удобочитаемость выбранных вами цветов, и если вы застряли, не бойтесь оглядываться в поисках вдохновения.
Мир полон красочных идей, которые вдохновят вас на то, чтобы превратить свой сайт в произведение искусства, действительно отражающее ваш собственный бренд и стиль.