Миксер цветов онлайн – Online color mixing tool — free color blender tool!

Смешать цвета онлайн - IMG online

Обработка JPEG фотографий онлайн.

Главное нужно указать два цвета, которые нужно смешать, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.

Пример смешивания красного и жёлтого цвета на этом сайте, под каждым цветом показан HEX (html) код:

Цвет №1+Цвет №2=Результат
#FF0000#FFED00#FF7700

Пример смешивания весенне-зелёного и маджента (фиолетового) цвета, которые можно взять из палитры:

Цвет №1+Цвет №2=Результат
#00FF7F#FF00FF#7F7FBF

Пример смешивания красного и синего цвета:

Цвет №1+Цвет №2=Результат
#FF0000#0047AB#7F2356

Пример смешивания синего и жёлтого цвета:

Цвет №1+Цвет №2=Результат
#0047AB#FFED00#7F9956

Если интересно, то на этом сайте также есть определение основных цветов картинки с отображением таблицы этих цветов в hex и rgb формате, а также прорисовкой полученной палитры справа от обработанной картинки.

www.imgonline.com.ua

Таблица смешивания цветов | Подобрать цвет онлайн

 Красный бургундскийКрасный + добавить коричневый, чёрный и жёлтый
 КрасныйКрасный + Белый для осветления, жёлтый для оранжево-красный
 Королевский красныйКрасный +добавить голубой
 МалиновыйСиний + добавить белый, красный и коричневый
 Томатно-красныйКрасный + добавить жёлтый и коричневый
 Рыжевато-каштановыйКрасный + добавить коричневый и чёрный
 КаштановыйКрасный + добавить чёрный или коричневый
 РозовыйБелый + добавить немного красного
 Травянисто-зелёныйЖёлтый + добавить синий и зелёный
 ХвойныйЗеленый + добавить желтый и черный
 Бутылочно-зеленыйЖелтый + добавить синий
 Цвет зелёного папоротникаБелый + добавить зелёный, чёрный и белый
 Цвет лесной зелениЗелёный + добавить чёрный
 Изумрудно-зелёныйЖёлтый + добавить зелёный и белый
 СалатовыйЖёлтый + добавить белый и зелёный
 Бледно-зелёныйЖёлтый + добавить синий / чёрный для глубины
 Светло-зеленыйЗеленый + добавить белый / желтый
 Бирюзово-зеленыйЗеленый + добавить синий
 Зелёно-серыйБелый + Добавить светло-серый плюс капля зелёного
 АвокадоЖелтый + добавить коричневый и чёрный
 ОливковыйЗеленый + добавить желтый
 ХакиКоричневый + Зелёный
 
ФисташковыйФисташковая краска получается при смешивании желтой краски с небольшим количеством синей
 ЖёлтыйЖёлтый + белый для осветления, красный или коричневый для тёмного оттенка
 Лимонно-жёлтыйЖёлтый + добавить белый, немного зелёного
 ГорчичныйЖёлтый + Добавить красный, чёрный и немного зелёного
 Мандарин, оранжевыйЖёлтый + добавить красный и коричневый
 ЗолотойЖёлтый + капля красного или коричневого
 ОранжевыйБелый + добавить оранжевый и коричневый
 ОранжевыйЖёлтый + добавить красный
 Тёмно-коричневыйЖёлтый + красный, чёрный и белый
 Красно-коричневыйКрасный & жёлтый + Добавить синий и белый для осветления
 
Средний коричневый
Жёлтый + Добавить красный и синий, белый для осветления, чёрный для тёмного.
 Золотисто-коричневыйЖёлтый + Добавить красный, синий, белый. Больше жёлтого для контрастности
 Медно-серыйЧёрный + добавить белый и красный
 Светло-коричневыйЖёлтый + добавить белый, чёрный, коричневый
 Королевский синийСиний + добавить чёрный и каплю зелёного
 Тёмно-синийСиний + добавить чёрный и каплю зелёного
 Серо-голубойБелый + Добавить светло-серый плюс капля синего
 Цвет морской волныБелый + добавить зелёный и чёрный
 Бирюзово-синийСиний + добавить немного зелёного
 Бело-синийБелый + добавить синий
 Веджвуд-синийБелый + добавить синий и каплю чёрного
 Сливовый/ФиолетовыйКрасный + добавить белый, синий и чёрный
 Тёмно-пурпурныйКрасный + добавить синий и чёрный
 Королевский пурпурныйКрасный + добавить синий и жёлтый
 СерыйБелый + Добавить немного чёрного
 Розово-серыйБелый + Капля красного или чёрного
 Серый угольБелый + добавить чёрный
 Перламутрово-серыйБелый + Добавить чёрный, немного синего
 Почти белыйБелый + Добавить коричневый или чёрный
 БежевыйВзять коричневый и постепенно добавлять белый до получения бежевого цвета. Добавлять жёлтый для яркости.
 Цвет мёдаБелый, жёлтый и тёмно-коричневый
 Цвет яичной скорлупыБелый + жёлтый, немного коричневого
 Чёрныйкрасный + синий + зеленый

kody-cvetov-html.rabotayvinter.net

Цветовые миксеры. ColorSchemer Studio vs Adobe Kuler / Habr

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

О чем же я всё таки буду писать? О нескольких сервисах-миксерах — подборщиках адекватных для посетителя цветов, что является несомненно полезным инструментом в работе юзабилиста. Цвета, несомненно, очень важный инструмент в достижении большего удобства на сайте, что ярко доказывает на себе пример Яндекса. Например — то же цветовое разграничение блоков, которые я мимоходом описал в заметке о идеальных формах, и собираюсь в ближайшее время занятся продолжением сего вопроса.

ColorSchemer Studio

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

Дабы мои мысли нашли под собой основание — я заглянул в википедию, чтобы посмотреть — что она выдаст мне по определению «миксер» (. Итак, что мы там имеем:

Миксер — малый бытовой прибор предназначенный для взбивания яиц, приготовления напитков, муссов, омлетов, жидкого теста и т.п. Миксеры бывают стационарные и ручные (более распространённые устройства).

Очень… очень исчерпывающий ответ на столь конкретный запрос. Чтобы в дальнейшем у других людей не было проблем — я создал определение Цветовой миксер.

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

Цветовое колесо


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

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


Цветовые гармонии


Инструмент «Цветовые гармонии» помогает нам увидеть этапы переходов между двумя основными цветами. Причем выдает этот инструмент 2 вида возможных переходов — темный, и светлый. Удобно.


Цвета с лучшей совместимостью


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


Photoschemer


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


Цветовой миксер


Опять простейший, и интуитивно понятный инструмент — загружаем два разных цвета, и получаем разнообразные пропорции от их смешивания. Честно говоря — я ни разу этот инструмент не использовал за ненадобностью. Хотя надеюсь кому-то он всё таки потребуется, иначе бы он не был в составе программы. Возможно художникам?


Анализатор цветовых сочитаний


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


Быстрое превью


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


Печать


После того как мы сохранили свою именную цветовую палитру — возможно потребуется её распечатать? И это легко сделать с помощью инструмента Print Your Color Schemes. Этим же инструментом можно перегнать полученные результаты в pdf — отличная возможность, если учитывать, что pdf стандартизировали.


Импорт и экспорт


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

Импорт:

Организовать импорт можно из любой сайтовой CSS (ну ничего себе…), gif изображения, файла цветовых таблиц (.act), и цветовой палитры photoshop (.aco)


Экспорт:

Экспортировать можно обратно в любую CSS, или html body атрибуты, в gif изображение, цветовую палитру photoshop, файлы цветовых таблиц, цветовую палитру illustrator (боже, и сюда добрались), Adobe Fireworks, и в Corel Painter

Достаточно обьемный список, не правда ли?


Также в программу входит сверх-удобная пипетка в качестве бонуса. Её кстати можно скачать отдельно бесплатно.

Цена


Увы и ах — но за программу требуют деньгу, что вполне логично — продукт ведь отличный. Стоит она 49 долларов в обоих вариациях — как для Windows, так и для MacOS (я думаю, многие уже перепугались, глядя на скриншоты, что пользователей windows оставили за бортом. К счастью это не так).

Дабы потестировать программу можно воспользоваться 15-дневной trial-версией, но будет мешать попап при старте программы.



На момент написания статьи была доступна версия 1.5.3 для MacOS, и 1.5.1 для Windows

Скачать программу можно тут (Windows) (2.1MB)

ColorSchemer Studio для MacOS X 1.1MB

Скачать продвинутую пипетку 0.6 MB

Скачать виджет на рабочий стол (Win, Mac) —40 KB — позволяет искать уже готовые цветовые палитры, не отрываясь от рабочего стола.

Купить программу можно тут — $49


Готовые сочетания


А теперь самое вкусненькое — на сайте программы просто МОРЕ отличнейших цветовых решений. Дерзайте!

Онлайновая версия ColorSchemer Studio


Выводы


Покупать программу конечно стоит (её разумеется можно и взломать, но это личное дело каждого). ColorSchemer Studio предоставляет море возможностей для юзабилистов, графических дизайнеров, и даже художников. Начинающим тоже стоит её советовать, ведь она поможет нам избежать монстров с непобедимыми цветами.

Adobe Kuler

В первой статье мы выяснили что такое цветовой миксер, и с чем его требуется кушать для пущего увеличения аппетита на примере программы ColorSchemer Studio. Несомненно хорошая вещь, но платная, а я решил сегодня посвятить статью бесплатному, и web-based инструменту от компании Adobe, которые также как и компания ColorSchemer вовремя просекли о том, чего не хватает дизайнерской братии. Итак встречайте — Adobe Kuler.


Эта заметка будет не в пример меньше, чем предыдущая, но не менее полезная. Почему меньше? Потому что веб-сервисы как бы не старались, а дорасти до полноценной программы пока не могут — следовательно — меньше возможностей, но удобнее. Еще один несомненный плюс — Kuler сохраняет результаты в вашем Adobe ID — т.е. в случае смены ОС на вашем компьютере, или постоянных сменах компьютера (работа-дом, дом и работа) — все будет доступно, если на компьютерах есть интернет. Что гораздо удобнее, чем возить на флешке готовые палитры из ColorSchemer Studio.


Цветовой миксер


По сравнению с программой на компьютере — веб сервисы явно уступают в возможностях, но не так уж и сильно как раньше. Тут есть всё, что нужно, и даже немного сверху.

В отличии от ColorSchemer Studio, где роль миксера беззастенчиво выполняет цветовое колесо (color wheel) — тут с этой обязанностью справляется какой-то цветовой боченок. По меньшей мере у меня асоциации были именно такие — мы мешаем цвета в бочке, при этом смотрим на эту самую бочку сверху. В принципе — совершенно не затрудняет, и даже скорее всего облегчает задачу — ожидаемый цвет можно получить гораздо быстрее.


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

К счастью разработчики из Adobe Labs знают свою работу хорошо, поэтому к несколько странному интерфейсу привыкаешь быстро.


Готовые цветовые решения


В самый первый раз когда попадаешь на Adobe Kuler — выдается красивый рейтинг лучших, по мнению посетителей, палитр — выбрать можно сразу их и с ними же продолжить работу. Плюсы понятны — далеко ходить не нужно, всё уже готово на полочке.

Из минусов хотелось бы сказать только одно — кулер достаточно популярный сервис, и выбрав цвета из первой десятке есть риск встретить «цветового клона» своего будущего сайта. Т.е. лучшее решение — это всё таки создать свой уникальный сборник, благо это удобно.


Уже готовые решения можно отсортировать по нескольким способам:

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

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

3. Новые — если вы только что создали свою уникальную палитру, и хотели бы чтобы её кто-то увидел и скачал, кроме вас — этот раздел именно для таких как вы. Тут публикуются самые новые цветовые палитры. Из минусов — ежеминутно создается более 20 палитр, поэтому потеряться можно и тут.

Создав свое решение вы тоже можете добавить его на сайт.


Экспорт


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

Выводы


Как и любое веб-решение какой-то задачи инструмент немного проигрывает в функциональности своим программным собратьям, но зато выигрывает в удобстве и скорости получения результата. Рекомендую использовать данный сервис в случае того, если вы часто меняете свой компьютер, ваши цвета размещенные в интернете никуда от вас не денутся. Для тех же, у кого проблемы с переносом данных нет — рекомендую всё же воспользоватся платным программным аналогом — ColorSchemer Studio.

Источник: Блог о юзабилити веб интерфейсов (Adobe Kuler, Colorschemer)
Автор: Ярослав Бирзул (DezmASter)

habr.com

Отправить ответ

avatar
  Подписаться  
Уведомление о