Определить основные цвета картинки онлайн: Определить основные цвета картинки онлайн

Содержание

Эксперименты от Google: подбор палитры по фото

Google уже давно вышел за рамки простого поисковика. Сейчас это целая корпорация, которая занимает вопросами веб-дизайна, безопасности программирования и ещё десятком-другим проблем и поиска решений для них. Новая фишка от ребят из Силиконовой долины – платформа Experiments with Google. Здесь сторонние разработчики и члены команды предлагают свои необычные, “экспериментальные” идеи на суд сообщества.

Одним из крутейших инструментов для дизайнеров должен стать Art Palette, разработанная Simon Doury и Etienne Ferrier. Art Palette работает как поисковая система, которая находит произведения искусства на основе выбранной цветовой палитры. Используя этот инструмент, вы можете исследовать, как те же самые пять цветов из “Ирисов” Ван Гога могут быть связаны с иранским фолиантом 16-го века или кувшинками Моне.

<center><ins class="lazy lazy-hidden adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>

Как утверждают сами создатели, такой инструмент будет полезен не только ценителям искусства и художникам, но и дизайнерам – веб-дизайнерам или ребятам, занимающимся интерьером.

Как это работает?

Для начала переходим на сайт Art Palette.

Можем выбрать, чтобы система нас удивила – Surprise Me – или предоставим изображение сами. Можно и фото сделать – но я слишком красив для Google-экспериментов 🙂 НА изображении отмечается 5 точек, которые и создадут основу будущей палитры. Меняйте и выставляйте её как хотите.

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

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

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

Цветовая палитра по фото для сайта. Генератор цветовых схем online

Создать палитру из фото онлайн

Определите цветовую схему на любой фотографии или профиля instagram.

Подбирайте подходящие оттенки и используйте в своих проектах: на сайтах, в полиграфии, в иллюстрациях и мудбордах.

Скопировать ссылку на палитру 😍 — gradients.app/ru/mypalette/{{rndurl}}

Акцентные

Яркие цвета палитры, подчёркивают важные детали и привлекают внимание 🔥

Приглушённые

Подходят для оповещений, карточек с информацией и других блоков 👍

Светлые

Идеальны для фонов и подложек 😺

Тёмные

Можно использовать для текста и заголовков 📝

Противоположные

Обратная сторона цветовой палитры. Хорошо контрастируют с цветами в вашей схеме. 🦇

#{{invertColor(getColor(1))}}

#{{invertColor(getColor(2))}}

#{{invertColor(getColor(3))}}

#{{invertColor(getColor(4))}}

#{{invertColor(getColor(5))}}

#{{invertColor(getColor(6))}}

#{{invertColor(getColor(7))}}

#{{invertColor(getColor(8))}}

#{{invertColor(getColor(9))}}

#{{invertColor(getColor(10))}}

Как получить основные цвета картинки? — Хабр Q&A

Подскажите чем можно вытащить основные цвета из картинки?
Пользовался npm imagecolors, но проблема заключается в следующем:
Мне нужно организовать поиск по цвету картинки (/?colors=ffffff), из имеющихся 200к изображений, все цвета при заливки изображения сохраняются в базу данных в виде массива ([‘ffffff’, ‘cccccc’]), так вот, проблема в том что с imagecolors я получаю 5 первых цветов, в итоге из 200к изображений по поиску определенного цвета находится только одно изображение (в основном).

Получается что берутся все пиксели с кучей оттенков и в итоге поиск по цвету находит только одну картинку.
Как быть? Что делать?
Может есть какие то npm с помощью которых можно получить основную цветовую палитру (общую, преобладающую) или например npm позволяющие сконвертировать hex в название цвета, чтобы при запросе fffffff определить цвет как white и найти названия цветов в массиве цветов [‘white’, ‘green’, ‘orange’]

Спасибо за любую информацию!

Собственно само решение, может кому то и пригодится =)
Устанавливаем пакет npm imagecolors, с помощью него при сохранении картинки на сервер нужно будет получить RGB и Percent цветовой палитры картинки. Я сохраняю все данные и всего скорее буду экспериментировать еще с различными выборками.
Вот то нужно что выплевывает imagecolors на данный момент с одного изображения

[
    {
         rgb: {
             r:  255,
             g: 255,
             b: 255
         },
         percent: 20.5 // процент преобладания цвета на данном изображении
    },
     {
         rgb: {
             r:  44,
             g: 55,
             b: 66
         },
         percent: 11
    }
]

В коллекции я сохраняю все это данные в поле db.images.pixels, в схеме монгуста банально тип массив

pixels: { type: Array }

Пользователям предоставляю ссылки на поиск картинок по цветам такого вида

search?pixels[r]=255&pixels[g]=255&pixels[b]=255&pixels[min]=10

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

Вот пример выборки для наглядности

Col.find({
     pixels: {
         '$elemMatch': {
              'rgb.r':  { $lte: 255-10,  $gte: 255+10 },
              'rgb.g':  { $lte: 255-10,  $gte: 255+10 },
              'rgb.b':  { $lte: 255-10,  $gte: 255+10 },
              'percent': { $gte: 10 }
         
     }
})

При такой выборке очень даже неплохой результат получаю.
Потом еще сортировкой займусь чтобы картинки с максимальным percent были выше остальных.

Определение цветовых схем — компьютерное зрение — Azure Cognitive Services

05/26/2021
Чтение занимает 2 мин

В этой статье

Компьютерное зрение анализирует цвета на изображениях, чтобы указать следующие три различные атрибуты: преобладающий цвет переднего плана, преобладающий цвет фона и набор преобладающих цветов изображения в целом. Возвращаемые цвета, которые содержатся в наборе: черный, синий, коричневый, серый, зеленый, оранжевый, розовый, сиреневый, красный, сине-зеленый, белый и желтый.

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

Компьютерное зрение также возвращает логическое значение, которое указывает, является ли изображение черно-белым.

Примеры определения цветовой схемы

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

{
    "color": {
        "dominantColorForeground": "Black",
        "dominantColorBackground": "Black",
        "dominantColors": ["Black", "White"],
        "accentColor": "BB6D10",
        "isBwImg": false
    },
    "requestId": "0dc394bf-db50-4871-bdcc-13707d9405ea",
    "metadata": {
        "height": 202,
        "width": 300,
        "format": "Jpeg"
    }
}

Примеры преобладающих цветов

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

Образ —	Преобладающие цвета
	Передний план: черный Фон: белый Цвета: черный, белый, зеленый
	Передний план: черный Фон: черный Цвета: черный

Примеры акцентных цветов

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

Образ —	Цвет элементов
	#BB6D10
	#C6A205
	#474A84

Примеры определения черно-белых изображений

В приведенной ниже таблице представлены результаты оценки черно-белых изображений для примеров изображений с помощью службы «Компьютерное зрение».

Образ —	Черно-белое
	Да
	false

Использование API

Функция обнаружения цветовых схем является частью API Анализа изображений. Вы можете вызывать этот API с помощью собственного пакета SDK или с помощью вызовов REST. Включите Color в параметр запроса visualFeatures. Затем, получив полный ответ JSON, просто выполните анализ строки для поиска содержимого раздела "color".

Как узнать или определить цветовой код изображения онлайн без программ

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

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

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

Онлайн-инструменты для определения цветов на изображении

Одна из основных концепций дизайнеров — знание цветов Код RGB и CMYK . Это важно при любом дизайне, зная свойства каждого цвета и его использование в изображениях.

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

Далее мы упомянем некоторые из наиболее часто используемых и известных в Интернете инструментов для определения цветов в изображениях.

PineИнструменты

PineИнструменты Интернет-пользователи чаще всего посещают веб-сайт для определения цветов и кодов изображений. С помощью этого инструмента до 64 цветов можно идентифицировать в том же изображении, в зависимости от содержащейся в нем палитры.

Imagecolorpicker.com

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

Site24x7

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

Adobe Color

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

цвет охотника

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

Функции цветовой палитры и идентификационных кодов

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

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

Le цветовой код это чисто цифровая функция для взаимопонимания между компьютерами и всеми виртуальными программами. В электронике также существует система цветовой кодировки для определения емкости резисторов и конденсаторов.

Существуют теоретические основы классификации цветов, позволяющие систематизировать их по различным характеристикам, поддерживающим цветовые палитры. Один из них, о котором мы упоминали ранее, — это RVB или RVA хорошо известный на испанском, а CMY или CMA, переведенный.

Это также зависит от системы, воспроизводящей цвет, например, кодирование HTML, VGA ou X11 Цвет . Это разные методы кодирования именованного цвета одним и тем же кодом для всех этих систем.report this ad

Также возможно, что цвета могут быть названы или названы по-разному через эти упомянутые системы. Примером может служить Silver для HTML или VGA, который считается серым для цветов X11.

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