|
1515 / 572 / 137
Регистрация: 20.02.2016
Сообщений: 3,377
|
|
Как получить комплементарный (контрастный) цвет, зная координаты точки на окружности09.06.2018, 02:33. Показов 6709. Ответов 18
Метки нет (Все метки)
Доброго всем времени суток! Для одного проекта нужно частично повторить возможности данного сервиса по подбору цветов. Как известно цвета кодируются по триколорной модели RGB где у каждого из трёх цветов может быть до 255 оттенков. То есть получается что мы имеем координаты одной точки на окружности и для того что бы например получить комплиментарный (контрастный) цвет нам нужно найти точку которая будет противоположной. Я придумал кое какие простенькие алгоритмы что бы приблизительно симулировать подобный функционал, но понять как вычислить точные координаты у меня не очень выходит, из-за слабого математического аппарата в черепушке. Плиз подскажите если уж не решение, то хотя бы статейку которую мне следует изучить что бы начать двигаться в верном направлении.
Заранее всем спасибо)
2
|
|
| 09.06.2018, 02:33 | |
|
Ответы с готовыми решениями:
18
Получить цвет пикселя, зная его координаты
|
|
3390 / 1913 / 571
Регистрация: 09.04.2015
Сообщений: 5,365
|
|
| 09.06.2018, 08:33 | |
|
В общем ничего особо сложного нет. Первое что надо отметить, это то что в цветовом круге представлены не все цвета. Некогда разбираться до абсолютной точности, но примерно половины возможных цветов в круге нет.
То есть сейчас в круге представлен некоторый набор цветов на внешней окружности и потом эти цвета постепенно стремятся к цвету в центре круга. В качестве базового в центре приведен белый цвет (255,255,255). Если в центр поместить черный цвет (0,0,0) то будет построена вторая половина цветов. Теперь рассмотрим вопрос как построена цветовая гамма внешней окружности цветового круга. Для облегчения восприятия отображать цвета лучше не на окружности (трудно рисовать, да и расчетный массив тяжелее представлять). Составим табличку размером 3х3, где середина это центр круга, середина верхней строки - верх круга (90 градусов) середина левого столбца - левая точка круга (180 градусов) первая ячейка в первой строке - это точка на круге по направлению влево вверх (135 градусов) далее не расписываю, должно быть понятно. Рассматриваем цветовую гамму как показано на сайте, в реальности можно получить минимум три существенно различающихся видов представления цветов (это не учитывая простых поворотов и переворотов круга на изнанку) Сначала выбираем базовые цвета для левой нижней и правой точек. Как раз изменение расположения этих цветов и дают существенные различия. В показанном круге это чистые базовые цвета зеленый(0,255,0) синий(0,0,255) и красный (255,0,0). Вверху ставим смесь левого и правого цветов - желтый (255,255,0) После этого заполняем угловые цвета, как сумма или середина цветов на сторонах. Вот таблица цветов (127,255,0) (255,255,0) (255,127,0) (0,255,0) ......(0,0,0)...... (255,0,0) (0,255,255) (0,0,255) (255,0,255) Далее просто организуется плавный переход по светам при движении по окружности, вот пример 90 - (255,255,0) 67.5 - (255,191,0) 45 - (255,127,0) 22.5 - (255,64,0) 0 - (255,0,0) -22.5 - (255,0,127) -45 - (255,0,255) -67.5 - (127,0,255) -90 - (0,0,255) Вот собственно и все по принципам построения остается написать формулы для вычисления нужных величин. Формулы для верхнего и нижнего полукругов немного отличаются.
2
|
|
|
Диссидент
27714 / 17332 / 3810
Регистрация: 24.12.2010
Сообщений: 38,978
|
|
| 09.06.2018, 11:11 | |
|
Jasta, Спасибо вам за постановку вопроса и за полезную ссылку. И за красивый термин "комплиментарность"
![]() SSC, Спасибо за пояснения (хотя я пока в них не разобрался). И не подскажите, как оценить степень комплиментарности двух цветов? Поясню свою задачу. В моей программе юзер может задавать цвета как фона, так и шрифта. И случайно он может задать их так, что ничего не увидит (цвета будут мало комплиментарны). В этом случае я собираюсь насильно подправить заданный цвет, чтобы добиться нужной степени комплиментарности. Дело там немного осложняется тем, что на одном фоне могут быть разные объекты (надписи) со своим цветами, но это уже моя забота. Если вы знаете еще какие-то материалы на этот счет, дайте ссылочку, если не лень
1
|
|
|
3390 / 1913 / 571
Регистрация: 09.04.2015
Сообщений: 5,365
|
|||
| 09.06.2018, 13:25 | |||
|
Сегодня утром увидел эту задачу, посмотрел ссылку, и сразу придумал как построить такой цветовой круг как в примере.
Оттуда понял, что комплиментарность пары цветов, это "философское" понятие, зависящее от выбора способа получения цветового круга, а нам, как программистам желательно иметь функции, одну чтобы получить по известному цвету "комплиментарный" цвет, и другую функцию, которая получив два цвета выдаст уровень из "комплиментарности". (Это я Байт, Вашу задачу представил). А теперь порассуждаем о возможном методе реализации подобных функций. Нарисованный по ссылке цветовой круг имеет некоторый алгоритм построения (и мне он понятен, и я его как мог по быстрому описал). Сейчас я в MATLABe построил несколько цветовых кругов ... Ну не кругов, а квадратов. Но ведь есть старый бородатый анекдот про армейское определение: "Эллипс рассеивания это круг, вписанный в квадрат со сторонами 3 на 4". Поэтому глядя на мой квадрат можно легко представить круг (извиняюсь круг было долго строить). Как я уже отмечал на круге выводится примерно половина цветов при определении цвета в формате RGB. Система построения круга по ссылке позволяет получить три различных цветовых круга, в зависимости от того какой базовый цвет из трех поставить снизу (чистая комбинаторика). И ниже на рисунках показано две из них. Но так как цветовой круг/квадрат строится из условия постановки в центр белого цвета, то можно построить и альтернативный цветовой круг с черным цветом посредине (как у Луны, есть видимая сторона, а есть и обратная). А теперь небольшой пространственный фокус, давайте представим что перед нами не цветовой круг, а цветовой шар и мы на нем видим переднюю сторону, но есть и задняя, как у Луны. И вот она идея, а что если "комплиментарным" цветом считать тот цвет который находится на прямо противоположной стороне шара, а отклонение от этой прямой проходящей через центр шара, и считать уровнем некомплиментарности. На рисунках показаны две пары цветовых кругов с их обратными сторонами. PS Конечно все это требует практической проверки, но ведь некоторый алгоритм четко прослеживается. PS2 Как-то несколько лет назад я где-то (возможно и здесь на форуме) читал материал от программиста-дальтоника какого-то легкого вида, который писал о проблеме работы дальтоников с компьютерными программами. Было очень интересно, и Ваша задача Байт по моему немного пересекается с его проблемой.
2
|
|||
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
|
| 11.06.2018, 11:33 | |
|
Байт, если ещё актуально... Цветовое пространство RGB - это трёхмерный куб. Любой цвет - это точка внутри куба с соответствующими цвету координатами (R;G;B). Самый простой способ получения парного цвета - это инверсия или отражение координат относительно центра куба. Сумма цветов должна давать белый, то есть R1+R2=255, G1+G2=255, B1+B2=255. Зная один цвет (R1;G1;B1) можно легко найти второй (R2;G2;B2). Такая инверсия имеет смысл только для ярко выраженных цветов удаленных от центра (128;128;128). При приближении к центру цвета будет всё менее отличаться друг от друга. Самая простая мера различимости цветов - это расстояние от одного цвета до другого в трёхмерном пространстве RGB (можно и без корня):
Чем ближе цвета в пространстве, тем они менее отличимы. Кликните здесь для просмотра всего текста
Цвет - это довольно заковыристая штука. Дело в том, что понятие цвет не физическое, а чувственное. В отличие от света. Поэтому, многие формулы и отношения цветов получены усреднением ощущений нескольких испытуемых и далеки от линейности. Есть есть желание концептуально проникнуться в понятие цвета, то я бы порекомендовал книгу Гуревича М.М. "Цвет и его измерение" Издательство Академии наук СССР, 1950г. Главное пропустить вводную часть, где отдаётся дань мудрости вождей, дальше всё очень доходчиво и понятно. Организация МКО (CEI) в 1931 году, фактически, стандартизовала цвет утвердив эталонную цветовую модель CIE XYZ. В книге Гуревича детально рассмотрены все предпосылки, вывод и смысл данной модели, включая описание множества опытов и экспериментов с цветом.
3
|
|
|
Диссидент
27714 / 17332 / 3810
Регистрация: 24.12.2010
Сообщений: 38,978
|
||
| 11.06.2018, 16:14 | ||
|
И конечно, R2 = 255 - R1 не проходит, ибо 127,127,127 на 128,128,128 не различишь ![]() За "ссылку" на книжонку - спасибо, попробую поискать Среди книжек той поры иногда попадаются чрезвычайно интересные.
1
|
||
|
1515 / 572 / 137
Регистрация: 20.02.2016
Сообщений: 3,377
|
||
| 11.06.2018, 20:32 [ТС] | ||
|
Ygg, инверсия позволяет получить достаточно контрастный цвет, но в некоторых случаях он сильно отличается от того что выдает Addobe Color
0
|
||
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
||
| 11.06.2018, 21:44 | ||
|
1
|
||
|
1515 / 572 / 137
Регистрация: 20.02.2016
Сообщений: 3,377
|
|
| 12.06.2018, 23:45 [ТС] | |
|
Ygg, спасибо вам за ссылки. В конце русскоязычной статьи как раз есть формулы для нахождения комплиментарного цвета. Попробовал их использовать, получил результат очень близкий к инверсии, но всё равно сильно отличающийся от того что выдаёт Addobe.
P.S. Если не сложно плиз кто нибудь рассчитайте по формулам из статьи дополнительный цвет для RGB (159, 78, 238), и напишите результат просто для того что бы убедится что я не где не напортачил. Перевести из RGB в HVS можно здесь Заранее спасибо Добавлено через 4 часа 1 минуту Я выяснил причину сильной разницы между расчётными цветами и теми что выдаёт Addobe Color. Дело в том что у Addobe спектр цветов смещен на 60 градусов, то есть если в модели HSV на против красного находится бирюзовый, на у Addobe на против него стоит зелёный
0
|
|
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
||
| 13.06.2018, 01:19 | ||
|
2
|
||
|
1515 / 572 / 137
Регистрация: 20.02.2016
Сообщений: 3,377
|
||
| 13.06.2018, 03:51 [ТС] | ||
|
0
|
||
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
|
| 13.06.2018, 08:35 | |
|
2
|
|
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
|
| 14.06.2018, 00:21 | |
|
Переделал формулы HSV под различные сектора. Получился линейный градиент между 6 основными положениями с картинки. Участок от красного до жёлтого у Adobe явно не линейный, оранжевый смещён ближе к красному градусов на 10. Больше ничего в голову не приходит, нужны какие-то реальные формулы или теория. Сделал на скорую руку для тестов программку на WinApi и C++ под VisualStudio12.
1
|
|
|
3390 / 1913 / 571
Регистрация: 09.04.2015
Сообщений: 5,365
|
|||||||
| 14.06.2018, 08:12 | |||||||
|
В сообщении #11 Ygg правильно отметил, что чистые цвета расположены не точно по секторам.
Написал на MATLABe программку для построения цветового круга с учетом углов положения чистых цветов. Получилось что вид цветовой гаммы круга задают 5 переменных, плюс выбор белый или черный цвет в центре. Совпадение с цветами Adobe довольно близкое.
Однако заметил следующую особенность, даже на двух кругах с белым и черным центром отображаются далеко не все возможные цвета. В отображении есть только те цвета у которых, один из цветовых параметров имеет значение или 0 или 255. Поэтому в кругах нельзя всегда найти необходимый произвольный цвет, для нахождения к нему некоторого другого с соответствующими свойствами, требуется какая-то предварительная обработка.
2
|
|||||||
|
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
|
|
| 14.06.2018, 09:56 | |
|
Может в старом Paint все цвета? И удобный выбор.
Плотность цветов линейна по координатам мышки а не баян на круге… Дальше по готовым формулам с вики RGB-HSV-дополнительный HSV-RGB.
1
|
|
|
2732 / 887 / 330
Регистрация: 10.02.2018
Сообщений: 2,095
|
|||
| 14.06.2018, 13:03 | |||
|
По поводу оранжевого. На сервисе Adobe из первого поста это легко увидеть. Нужно выбрать произвольную схему размещения цветов. Под кругом есть пять цветовых квадратов, каждый из них соответствует одной точке на круге. Если кликнуть по квадрату мышью, то можно задать его цвет через RGB (ползунками или введя цифры). Цветовая точка автоматически покажется на круге. Для наглядности нужно задать три цвета/точки: красный (255,0,0), жёлтый (255,255,0) и оранжевый (255,127,0). При линейном градиенте такой оранжевый должен был бы оказаться точно посередине между красным и жёлтым, но это не так. Если красный это 0 градусов, а жёлтый 122 градуса, то оранжевый должен быть на 61 градусе. На круге Adobe он находится на 52 градусах.
1
|
|||
|
1472 / 827 / 140
Регистрация: 12.10.2013
Сообщений: 5,456
|
||||
| 14.06.2018, 15:43 | ||||
|
Может там вообще fail.. это видно в посте 13 по кривости точек.
1
|
||||
| 14.06.2018, 17:00 | |
|
Не по теме: Excalibur921, в 10 посте говорится о похожести на инверсию, вроде. Этих кругов существует много разных и каждый основан на своих тараканах (например), единого эталона нет. Зачем ТС именно вариант Adobe, пусть он сам и расскажет, если посчитает нужным. Adobe давно и профессионально занимается различными графическими редакторами. Мне же было просто интересно ещё раз покопаться в тематике цвета и узнать для себя что-то новое.
0
|
|
| 14.06.2018, 17:00 | |
|
Помогаю со студенческими работами здесь
19
Как найти координаты точки на PictureBox не зная пропорции?
Как найти координаты точки соответствующей заданному градусу окружности? В заданном текстовом файле каждая тройка натуральных чисел задает координаты точки и ее цвет. Получить на экране последние из точек одного цвета. Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
||||
|
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта
Симптом:
После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
|
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
|
Новый ноутбук
volvo 07.12.2025
Всем привет.
По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне:
Ryzen 5 7533HS
64 Gb DDR5
1Tb NVMe
16" Full HD Display
Win11 Pro
|
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
|
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
|
|
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов
На странице:
https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/
нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
|
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов.
. . .
|
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
|
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
|
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут.
В век Веб все очень привыкли к дизайну Single-Page-Application .
Быстренько разберем подход "на фреймах".
Мы делаем одну. . .
|