3057

Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры

Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры Цвет, Палитра, Основные цвета картинки, Подбор цвета, Цветовой ряд, Гармоничные цвета, Дизайн, Ui, Длиннопост

Предисловие:


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


Если вы хотите получить подобную палитру на основе картинки оффлайн, то, думаю, самый простой способ сделать это - провести "пикселизацию" картинки. В Adobe Photoshop это делается с помощью инструмента "Мозаика" (пункт Фильтр > Оформление > Мозаика).


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


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


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


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


Так же некоторые из этих сайтов-сервисов позволяют сгенерировать css, для выбранной палитры или скачать цвета в файл ASE, ACO или в картинку png или jpg. Некоторые принимают только .jpg картинки, а некоторые даже .gif. Некоторые позволяют создать аккаунт и сохранять подборки цветов, другие не имеют такого сервиса. Различий, функций и критериев очень много, надеюсь вы найдете то, что вам поможет.

Категории:

Сайты для генерации палитры основных цветов по картинке

Сайты по поиску картинок определенного оттенка или цвета

Сайты для генерации палитры основных цветов определенного сайта

Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.

Палитры с подобранными цветами Material Design и динамическими макетами Android приложения

Мультифункциональные сайты с разными инструментами для цвета

Сайты с картинками и готовыми палитрами цветов к ним

Сайты с просто подборками гармоничных цветов

Источники

Сайты для генерации палитры основных цветов по картинке:

https://color.adobe.com/

http://palettefx.com/

http://patorjk.com/color-palette-generator/

https://www.degraeve.com/color-palette/

https://lokeshdhakar.com/projects/color-thief/

https://www.colourlovers.com/photocopa

https://www.aminus3.com/color/scheme-generator/

http://labs.tineye.com/color/

https://www.imgonline.com.ua/get-dominant-colors.php

https://www.generateit.net/color-palette-generator/

http://www.cssdrive.com/imagepalette/index.php

http://colrd.com/create/image-dna/

https://colordrop.io/scan/

http://www.colorhunter.com/

https://bighugelabs.com/colors.php

http://www.colr.org/

http://materialmixer.co/#image

http://colorexplorer.com/imageimport.aspx

https://www.wisegeek.com/how-can-i-find-the-average-color-in...

https://dribbble.com/

https://coolors.co/app


Сайты по поиску картинок определенного оттенка или цвета:

https://dribbble.com/colors/

https://services.tineye.com/MulticolorEngine

https://www.aminus3.com/color/

http://colrd.com/


Сайты для генерации палитры основных цветов определенного сайта:

https://www.colorcombos.com/grabcolors.html

http://webcolourdata.com/


Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.:

https://color.adobe.com/

http://paletton.com/

http://colorblender.com/

https://colorscheme.ru/

http://colorexplorer.com/colorpicker.aspx

http://colormixers.com/

https://coolors.co/app

http://www.ficml.org/jemimap/style/color/wheel.html

http://colrd.com/create/color/

https://meyerweb.com/eric/tools/color-blend/

https://www.sessions.edu/color-calculator/

http://colory.ru/colorgenerator

http://colory.ru/colorgenerator2

https://www.colorspire.com/

http://materialmixer.co/#color

http://mcg.mbitson.com/

https://www.materialpalette.com/colors

http://www.workwithcolor.com/hsl-color-picker-01.htm

http://www.workwithcolor.com/mm-color-blender-01.htm

http://www.workwithcolor.com/hsl-color-schemer-01.htm

http://www.workwithcolor.com/color-converter-01.htm


Палитры с подобранными цветами Material Design и динамическими макетами Android приложения:

(Там гармоничные, сочетающиеся цвета, но в основном эти сайты для Android UX дизайнеров)

https://www.materialpalette.com/

https://codecrafted.net/randommaterial/

http://materialmixer.co/


Мультифункциональные сайты с разными инструментами для цвета:

(На этих сайтах есть инструменты не только подбора цвета в виде обычной палитры, но и для генерации градиента, паттерна или чего-нибудь еще)

http://colrd.com/

https://www.colourlovers.com/

https://www.colorcombos.com/

https://www.degraeve.com/

https://colordrop.io/

https://coolors.co/

https://www.imgonline.com.ua/


Сайты с картинками и готовыми палитрами цветов к ним:

(Поможет, если вдруг не хватает фантазии)

https://colorpalettes.net/

https://color.romanuke.com/

http://www.colorhunter.com/

http://colrd.com/

http://www.cssdrive.com/

http://moviesincolor.com

https://www.design-seeds.com/

https://www.aminus3.com/color/


Сайты с просто подборками гармоничных цветов:

https://coolors.co/browser/latest/1

https://colordrop.io/

https://colorhunt.co/

http://www.colormunki.com/pantone

http://www.colormunki.com/munsell

https://colorup.tikkurila.com/index.html#/l/ru/6/8/colors

https://www.colorcombos.com/popular-color-combinations

http://colrd.com/palette/


Источники:

http://www.dejurka.ru/articless/color-swatches/

https://designshack.net/articles/inspiration/developing-a-co...

https://tin-liva.livejournal.com/89084.html

http://do.esprezo.ru/color-picking

https://vgrafike.ru/ochetaniya-cvetov-onlajn/

http://www.nautical.dorisyershova-design.ru/2014/07/14/%D1%8...

http://www.workwithcolor.com/more-online-color-tools.htm

Если кто-то знает сайты из схожей тематики, но которые я не указал - обязательно пишите их в комментариях.

Дубликаты не найдены

+190
Иллюстрация к комментарию
раскрыть ветку 7
-2
Не говно.
-27
Зашла в комментарии, чтобы увидеть эту картинку.
раскрыть ветку 5
+37
Всем насрать
раскрыть ветку 3
+4
Иллюстрация к комментарию
ещё комментарии
+59
Сохранил ,плюсанул , закрыл , забыл
раскрыть ветку 3
+19

А я ещё за сиськи плюсанул

раскрыть ветку 1
0
А я ничего из этого не делал, только написал свой никому ненужный комментарий
0

Можешь подписаться, тогда не забудешь) https://vk.com/nnovosch

+35
Иллюстрация к комментарию
раскрыть ветку 2
+14
Иллюстрация к комментарию
-1
Иллюстрация к комментарию
+45

Удивительно, что в такой огромной подборке нет известнейшего colormind.io

Очень рекомендую. Особенно удобен (лично мне) функцией блокировки цветов.


ТС - ты крут, завидую такой целеустремлённости )

+41
Вот читаю комментарии и у меня складывается ощущение, что я один зашёл сюда ради девушки на фото.
раскрыть ветку 14
+2
Я зашел чтобы найти твой коммент и не начать писать тоже самое
+4
так и есть
раскрыть ветку 4
+3
Мельчают пикабушники
раскрыть ветку 3
+1

Так же

0
instasamka в Инстаграм
раскрыть ветку 5
0
Это не она. На фото Настя Молкова. В инстаграм bupsikitty
раскрыть ветку 4
0
Тоже интересно
+66
Иллюстрация к комментарию
раскрыть ветку 40
+52
Моя боль(( так хочу увидеть его черно-синим, но ни разу не получилось
раскрыть ветку 35
+74

Держи черно-синее. Не благодари

Иллюстрация к комментарию
раскрыть ветку 15
+22
+только наоборот ,ни разу не видел бело золотым
+28

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

раскрыть ветку 5
+11

Ни разу не видел его бело-желтым ((

+4

я просто в фш пипеткой цвета проверила и успокоилась: серо-голубой и коричневый там

раскрыть ветку 1
+3
Наркоман что ли?
+2
https://youtu.be/bg41XfnIBvk не благодари
+1
Да и не парься, оно реально золотисто-голубоватое на фотке. А то, что кто-то додумывает искажения баланса белого - это уже их дело. Может, это фотка 6а другой планете и там вообще свет зелёный, давайте теперь думать - каким будет цвет платья при освещении солнечным светом.
0
Все уже давно доказано, какое оно. Даже не вздумай начинать это снова )))
раскрыть ветку 1
0

если у тебя ноутбук покачай экран туда сюда

раскрыть ветку 3
+1
Пытался заставить себя увидеть сине-чёрное, всматриваясь в фон, но все равно становится только золотисто-голубое
0
Что за магия, зашла в комменты, увидела бело желтое, спустилась вниз и обратно вверх оно сине черноееее
раскрыть ветку 2
+3

Тоже самое было. Еще тогда. Первый и единственный раз увидел бело-золотым. Пошел показывать родителям - стало черно синим. И до сих пор такое.

раскрыть ветку 1
+31
mr.pugo в инстаграме хорошие палитры выкладывает
Иллюстрация к комментарию
Иллюстрация к комментарию
раскрыть ветку 8
+13

И в dribbble: https://dribbble.com/mrpugo

+11

эх, эти палитры еще надо уметь применять

раскрыть ветку 6
+11
Ну смотри. Выбираешь один оттенок как основной. Используешь для шапки, заголовков, кнопок. Для фона и обычного текста используешь чёрно-белые цвета. Для начала этого хватит. Сайт будет хорошо смотреться.
Если надо что-то особенное выделить - то из палитры выбираешь ещё один цвет, контрастный к первому. И продолжаешь его использовать для всех выделений.
Как-то так.
P.S. У меня самого опыта немного, более опытные дополнять и исправять, надеюсь)
раскрыть ветку 2
0
Да, кто б научил...
раскрыть ветку 1
-1
Ты поллитры применять не умеешь? Приноси вечером вместе с закуской, научу.
+8

а вот крутанские штуки с градиентами

https://uigradients.com/#Piglet

https://www.eggradients.com/

раскрыть ветку 1
+1

А для чего они и как их использовать? С палитрами то понятно, а градиенты с сайтов?

p.s. ой здрасьте :D

Иллюстрация к комментарию
+6

Загрузил фото. Почему то не работает ни один сайт. Палитру забыли загрузить что ли? Не пойму...

Иллюстрация к комментарию
раскрыть ветку 6
+3

так тонко, что даже толсто.

Иллюстрация к комментарию
-2

В смысле "не работает"? Судя по вашему скриншоту сайт выделил из фотографии основные цвета и предоставил вам их коды и названия.

раскрыть ветку 4
+5

не каждый лишь может.

Иллюстрация к комментарию
раскрыть ветку 1
0
Спасибо вам огромное за пост!
0

Это была очень тонкая шутка :D извини за полученные минуса.

+8
Увидев первую картинку - я надеялся на другой список сайтов с разнообразной "палитрой"
+3
Иллюстрация к комментарию
+3

https://www.w3schools.com/colors/colors_picker.asp

Там много полезного

+3
Есть паблик в ВК на такую тему, где бот публикует случайную картинку с наиболее важными на ней цветами. https://vk.com/nnovosch
+4

Для чего все это?

раскрыть ветку 5
+13

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

раскрыть ветку 3
+2

Здравствуйте! А если цель стоит немного другая, на кучу абсолютно разных картинок нужно нанести читаемый и что очень важно, гармонично вписывающийся текст, просто черным с белой обводкой или белым с черной обводкой не подойдет. Как оптимально поступить в этом случае? Спасибо.

раскрыть ветку 1
0
Комментарий удален. Причина: данный аккаунт был удалён
+1
Я иногда такой инструмент использую для выбора цветов при разработке дизайна интерфейсов или полиграфи.
+2

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

https://yadi.sk/d/YLJ9mx3fsIXH6w

Выглядит вот так:

Иллюстрация к комментарию
+2

Большое спасибо тебе за труды. )))

+2
ТС, ты - ахеренен! Спасибо, схоронил твой пост.
+2
В жопу палитру, беру девченку
+2

Да.. Умеешь ты заморочиться. (+)

раскрыть ветку 6
+8

Заморочиться - это мое кредо, к сожалению или к счастью :\

раскрыть ветку 5
+6
"Это твой дар, твоё проклятие"
+3
Человек! Спасибо. От лица художника спасибо вдвойне, порой на пустую голову эти сервисы очень спасают
+2

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

+2

Спасибо Вам! А уметь стараться — очень полезно в жизни. Всем советую!))

+2

Как то ник твой не соответствует манере. Смени на "Полировщик мечей", они люди весьма замороченные .)

+1

однажды пришел клиент и заказал сделать кнопки цветами вердепомовый и камелопардовый. так я узнал про сайт http://getcolor.ru - можно искать цвет по названию или вводить цвет по коду/из палитры и получать его название

+1

Где ты был две недели назад, когда я выебал себе все мозги подбирая шторы в комнату?

+1
Увидел девушку, начал читать заголовок "большой список сайтов..." и тут в моей голове взыграло воображение.
Вот что бывает, когда у тебя ломка по клубничке
+1
Простите, я из дикого леса... А зачем? Как это применимо?
раскрыть ветку 3
+1

Чтобы рисовать/дизайнерить в приятной глазу цветовой гамме

0
Можно хвастаться перед другими фотографами, что ты "в тренде", а на самом деле - стараться производить серийную съёмку в одном запоминающемся стиле.
0

Присоединяюсь к вопросу

+1

А почему там только по 5? Скажу честно, прошла не по всем ссылкам, а только по нескольким. Хотелось бы гармоничных схем для представления данных. Мне бывает нужно по десять разных категорий изображать на одном рисунке. Хотелось бы, что и гармонично и цвета достаточно различались.

раскрыть ветку 2
+2

В списке не мало сайтов, которые показывают палитру и не только из 5 цветов.
Вот примеры:
http://palettefx.com/
http://www.cssdrive.com/imagepalette/index.php

http://patorjk.com/color-palette-generator/

https://lokeshdhakar.com/projects/color-thief/

раскрыть ветку 1
0

Оооооо! Спасибо огромное!

+1

Офигенно. Плюс.

0

Ооооо.. Храни вас Бог!))

0

@moderator, подскажите, пожалуйста. Та цифра, которая отображается под постом возле иконки дискеты - это то, сколько раз пользователи (уникальные или если один юзер по 10 раз нажмет, то все нажимания засчитаются?) нажали на иконку сохранения поста или то, у скольких пользователей в данный момент этот пост находится в "Сохраненном"?

Иллюстрация к комментарию
раскрыть ветку 4
0

Это именно уникальные пользователи.

раскрыть ветку 3
0

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

раскрыть ветку 2
0
У меня на глазах оно с бело-золотого стало черно-синим)Я маг?
И периодически вижу его в разных цветах)
0
Картинка, я так понимаю, для привлечения внимания
раскрыть ветку 2
0

Нет. Точнее не только. С этой картинки началось мое "расследование", которое вылилось в этот список. На слове "увидел" ссылка на пост в ВК, где была данная картинка.

раскрыть ветку 1
0
Если честно, я пост даже не читал
0
Иллюстрация к комментарию
0

Подходящий пост, чтобы написать свою задумку. Так как я не разработчик, то сам не смогу сделать. Суть: приложение на телефон, в которое можно загрузить фото и программа определит название цвета. Типа: киноварь, коралловый, серо-синий металлик, сливовый, серо-буро малиновый и.т.д. У нас как-то с девушкой был спор. Она говорила что кирпичная стена серая, а я немного дальтоник, видел красный, коричневый, бордовый, серый. В итоге я загрузил фото на сайт разбора палитры и тот выдал 4 основных цвета. Далее в фотошопе я подобрал похожие цвета и они оказались теми, что я назвал ранее. Видимо я дальтоник не на тёплые оттенки)

0
Когда-то мне понадобилось сделать такую картинку с интерьером. Пипетка и заливка решали)))))
0

Как раз мучаюсь над сложной картиной по фото, пользуюсь вот этим сайтом:
https://html-color-codes.info/colors-from-image/

0
Девушка в начале для привлечения внимания?))
раскрыть ветку 1
+1

Нет. Точнее не только. Эта картинка - нулевой пациент моего "расследования"

0

Не совсем такая, но легко подбирает и показывает соседние цвета.

http://html-color-codes.info/cvetovye-kody-HTML

0

Очень интересно и здорово, спасибо!
Не подскажешь, есть ли вариант перевода пантона из TPX в C и т.д.?

0
Мсье, вы бешеный! Но очень молодец! Спасибо! Использую color.romanuke.com и то, потому что меня на него навели. Теперь можно целый день потратить на изучение новых сайтов с ЦП. (цветовой подборкой)
0
Иллюстрация к комментарию
0

И что, ни одного комментария с вопросом что за телочка?

раскрыть ветку 1
0

Да потому что это обычная инстасамочка, которая выкладывает себя в нижнем белье и пишет очень "умные мысли". Таких в инсте навалом)

0

А есть сервис, который проверяет сайты на вырвиглазность?

0
Я не могу на корлд зарегистрироваться, пишет что не имею права использовать этот сайт (((
0
Спасибо)
0
А ещё в иллюстраторе можно сделать трассировку
0

Два клика в Фотошопе и будет вам палитра. Эффекты - пикселизвция и большой размер точки

раскрыть ветку 1
+2

Да, я говорил об этом во втором абзаце, но фотошоп есть не у всех (в особенности у Linux пользователей) + это не маленькая и не быстро запускающаяся "махина"

0

Отмечусь

0

Я с помощью сайта с цветовым кругом обои на кухню выбрал. Вписались.

0
Низкий поклон
0

Спасибо!

0

Спасибо! Выдайте 2 женщины этому господину.

раскрыть ветку 4
+2
А мне хотя бы половину женщины можно
раскрыть ветку 3
+2
половину женщины по вертикали
0

Левую или правую?

0
Хорошо, сверху оно будет женщиной.
0

Спасибо огромное! Потрясающая подборка!

0

Фотошоп - это океан.

0

А есть сайты где можно смешивать цвета, например 10% белого, 60 красного и 30 черного?

раскрыть ветку 4
+5
РГБ. Белый это 255.255.255, черный 0.0.0, красный 255.0.0 возьмем одну часть белого, 6 красного и 3 черного. Всего 10 частей. А сумма цветов получилась 1785.255.255. Делим на 10. Получается такой цвет 179.26.26
раскрыть ветку 1
+3
Иллюстрация к комментарию
0

Чтобы прям в процентах смешивать, таких сайтов в ходе поиска всех ссылок я нашел  сайта по смешиванию цветов. Просто на странице поста нажмите Ctrl+F и напишите "blend", 2 и 3 ссылка это то, что нужно.
Там выбираете начальный цвет и конечный цвет и количество отрезков/промежутков и сервис генерирует "градиент" - несколько цветов (в зависимости от количества выбранных отрезков), которые идут в "линии" перехода от начального цвета к конечному.
Соответственно центральный цвет будет цветом, где равномерно смешаны первый и конечный цвета, ну а другие цвета уже другое процентное соотношение имеют, его рассчитывай сам))

-2

Ебануться как у тебя все непросто)), а пипеткой ткнуть в нужный цвет и квадрат им залить в шопе западло?

раскрыть ветку 1
+1

А если, например, вся картинка будет черная и пару красных пикселей и я ткну как раз в них, это будет не то...

Похожие посты
Похожие посты закончились. Возможно, вас заинтересуют другие посты по тегам: