0

Имеется вот такой генератор Можете выбрать там какой-нибудь яркий цвет. Обратите внимание, что там нумерация идёт от 900 и до 50. Цвет в кружке -- начальный цвет. Именно от него идёт генерация других цветом.

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

Сделала я свою реализацию со сдвигом цветом в rgb. К примеру, был цвет rgb(150, 150, 150) и я просто сдвигаю значения каждого канала и получаю, к примеру, следующее: rgb(130, 130, 130). Тем самым начальный цвет стал темнее.

Но вся суть в том, что по ссылке выше работает какой-то другой алгоритм и меняются ещё и оттенки.

может в самой либе это есть но я там не нашла конкретно, что мне нужно. Вот здесь /packages/mui-system/src/colorManipulator.js но там, насколько я поняла, нет того, что нужно. Хотя... Могу ошибиться.

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

2
  • 1
    «в моей реализации цвета только становятся темнее и светлее, а в примере по ссылке они ещё и оттенок немного меняют» - масло масляное, оттенок это есть светлота (lightness). Если подразумевалась насыщенность цвета (saturation), то она меняется переводом RGB►HSL/HSV►RGB, как и тон (hue). Это не так уж сложно, тем более что теории и формул в интернете куча (вот например первое из гугла), как и готовых библиотек (просто используй поиск по npm и по github).
    – yar85
    13 сен 2021 в 22:37
  • Ну и готовое на enSO тоже никто не прятал)) А как генерировать палитры - см. материалы по цветоведению в дизайне (они вроде включают теор.основы типа "что такое цвет", хотя хз, я рисовальщик а не дизайнер, но фундаментальные основы вроде общие).
    – yar85
    13 сен 2021 в 22:43

3 ответа 3

0

Почему не читаете там названия палитры?

Наверно так: COMPLEMENTARY
3. Комплементарные цвета

ANALOGOUS

2.Аналогичное сочетание цветов

TRIADIC

5.Триада

https://aipa.ru/content/34-garmonichnye-sochetaniya-cvetov-cvetovoj-krug-jokhanessa-ittena

1
  • Не, всё это не о том. Мне удалось изучить код по ссылке. Там всё очень сложно, формул тьма, а код ещё и минифицирован и это главная проблема. В общем, там под капотом работает нейронная сеть. Сворачиваемся господа))
    – Katya
    15 сен 2021 в 12:51
0

Господи…та нет там никакой нейронной сети. Нужно хорошо поискать готовые цветовые схемы библиотек либо найти в литературе эти формулы как вам уже сказали выше.

Вот тут можно поиграть интерактив. 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 схем.

2
  • Вы даже не представляете сколько мне пришлось пересмотреть разных генераторов. Не нашла ни одного где бы хотя бы что-то подобное было. Я ведь уже написала, что там машинное обучение. Даже в самом коде датасеты для обучения есть. Сами здесь посмотрите material.io/inline-tools/color/bundle.js и по ctrl+F вбейте вот это 94.67497003305085 и увидите там датасет для обучения. Может я ошибаюсь в чём то, но там много предварительно подготовленных цветов и по формулам и тем цветам ведутся расчёты.
    – Katya
    15 сен 2021 в 14:39
  • Вы такой генератор не соорудите просто на синусах и косинусах. И мне не интересны все схемы, а только самая первая.
    – Katya
    15 сен 2021 в 14:40
0

«Не нашла ни одного где бы хотя бы что-то подобное было.” Цвета с 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/ “тип комбинации цветов” тройной Похоже сделали угол константа и вся разница, может и в том сайте так.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.