Генерация палитры цветов с JS по rgb
Имеется вот такой генератор Можете выбрать там какой-нибудь яркий цвет. Обратите внимание, что там нумерация идёт от 900 и до 50. Цвет в кружке -- начальный цвет. Именно от него идёт генерация других цветом.
Нужен код по генерации точно такой же палитры. Мне удалось написать свою реализацию, но дело в том, что в моей реализации цвета только становятся темнее и светлее, а в примере по ссылке они ещё и оттенок немного меняют, а не просто затемняются или засветляются.
Сделала я свою реализацию со сдвигом цветом в rgb. К примеру, был цвет rgb(150, 150, 150) и я просто сдвигаю значения каждого канала и получаю, к примеру, следующее: rgb(130, 130, 130). Тем самым начальный цвет стал темнее.
Но вся суть в том, что по ссылке выше работает какой-то другой алгоритм и меняются ещё и оттенки.
может в самой либе это есть но я там не нашла конкретно, что мне нужно. Вот здесь /packages/mui-system/src/colorManipulator.js но там, насколько я поняла, нет того, что нужно. Хотя... Могу ошибиться.
За любую помощь буду признательна. Даже если просто направите, дадите ссылку на материал для изучению...
Ответы (4 шт):
Почему не читаете там названия палитры?
Наверно так:
COMPLEMENTARY
3. Комплементарные цвета
ANALOGOUS
2.Аналогичное сочетание цветов
TRIADIC
5.Триада
https://aipa.ru/content/34-garmonichnye-sochetaniya-cvetov-cvetovoj-krug-jokhanessa-ittena
Господи…та нет там никакой нейронной сети. Нужно хорошо поискать готовые цветовые схемы библиотек либо найти в литературе эти формулы как вам уже сказали выше.
Вот тут можно поиграть интерактив. https://colorscheme.ru/ Судя по работе всех 6 схем там тригонометрия школьного уровня “повернуть точку на угол”. Непонятно почему не показано движение точек к центру и от центра. Задаем точку на круге базовый цвет, остальные точки получаем через матрицу поворота в 2д.
https://ru.wikipedia.org/wiki/Матрица_поворота
x=x *cos(ang_rad)-y *sin(ang_rad)
y=x *sin(ang_rad)+y *cos(ang_rad)
Положительный угол крутит в одну строну, отрицательный в другую. Потаскайте точку там, остальные просто прибавляют угол к текущей в одну и другую стороны. Осталось только нарисовать такой круг палитру и читать по нужным координатам цвет пикселя и вся цветовая схема, точней их там 6…значит все 6 схем.
«Не нашла ни одного где бы хотя бы что-то подобное было.” Цвета с https://material.io/inline-tools/color/ и https://colorscheme.ru/ комплиментраные не совпадают. Видимо кто-то из них накрутил своего. А мне кажется тут https://colorscheme.ru/ вполне симпатичные цвета. Похоже и строгих правил тут вообще нет раз можно раздвигать точки мышкой аж в 6 схемах и алгоритм нагляден. А тут и к центру можно двигать, https://sebweo.com/ru/tsvetovoy-krug-online/ цвет похоже на https://material.io/inline-tools/color/
тест :
1)https://material.io/inline-tools/color/
2)https://sebweo.com/ru/tsvetovoy-krug-online/
1)вход #ff0505 выход #05ffff 2)выход #05FFFF
1)вход #05ff67 выход #ff059b 2) выход #FF059D
3)вход #050eff выход #fff705 2) выход #FFF605 Очень близко и никакой магии.
“что там машинное обучение.» Зачем…
“Вы такой генератор не соорудите просто на синусах и косинусах.”
Именно на углах и строят все 6 схем. Вот тут https://sebweo.com/ru/tsvetovoy-krug-online/ “тип комбинации цветов” тройной Похоже сделали угол константа и вся разница, может и в том сайте так.
Переводи RGB в HSL и по строкам крути L - lightness. По вертикали крути H - hue на сколько там крутится комплиментарные цвета. И переводи обратно.
Функции перевода можно взять тут https://gist.github.com/mjackson/5311256