Как все началось
Как фронтенд-разработчик, я обычно много работаю с названиями цветов в своих проектах. Поэтому, когда я хочу начать проект, я обычно создаю файл SCSS и называю его цветами, а затем определяю в нем все переменные цвета.
Итак, проблема в том, когда я хочу назвать эти переменные. С основными цветами легко, но когда дело доходит до большого количества названий цветов, я понятия не имею, как их назвать? Ну, я знаю только красный, зеленый и синий 😎 (хорошо, шучу… я узнаю больше названий цветов… 😉).
Так что на то, чтобы выбрать собственное имя, у меня ушло бы около 15 минут. Такая трата времени 😔.
Я был уверен, что должен быть способ получше. Поэтому я немного поискал и нашел несколько полезных веб-сайтов, которые помогли мне выбрать названия цветов, например http://chir.ag/projects/name-that-color
Инструменты были хорошими и красивыми, но мне не хотелось покидать среду программирования и переключаться на другое приложение только для того, чтобы найти имя. Поэтому я решил написать небольшой модуль узла, чтобы сделать это за меня.
Так родился Черанги.
Cherangi (Che Rangi?) - предложение на фарси (персидском), которое означает «Какого цвета?»
Установка
$ npm install -g cherangi
использование
$ cherangi #fcfcfc
полученные результаты
{ status: 2,
name: 'Brilliance',
hex: '#fdfdfd',
delta: 0.34559411394170403,
message: 'Not perceptible by human eyes' }
Как я разработал Cherangi
Для начала: самый быстрый способ получить имена - через терминал; Я могу получить доступ к терминалу в Visual Studio Code (который является моим основным редактором кода). А модули Node могут выполняться как CLI, поэтому я решил сделать cherangi как модуль node.
Исходный код можно найти здесь 👇 на моей странице github.
Итак, создание модуля узла было простым: я уже построил несколько других модулей и сразу же начал писать коды.
Сначала мне нужна была функция, которая считывала бы ввод и очищала его до значения цвета HEX.
Затем следующей проблемой были имена. Ну, очевидно, я не мог назвать цвета, поэтому мне понадобилась библиотека названий цветов, чтобы мне помочь.
Первой мыслью было поискать в сети имена и извлечь их. Когда я начал это делать, я нашел отличный проект на github от meodai, который уже создал то, что я искал.
Поэтому я использовал его цветовую библиотеку (16K + Color 🌈 имена доступны 😎).
ОК, теперь давайте столкнемся со следующей проблемой. Инструмент должен был прочитать цвет ввода и сопоставить его с библиотекой цветов. если совпадение, то мне нужно показать имя, но что, если совпадения не найдено?
Если совпадений не было найдено, лучшим способом было показать в библиотеке цветов ближайший цвет, который соответствует входному цвету.
Но как? После небольшого исследования я узнал больше о цветовых системах, прочитав о них (я люблю кодировать ... разве не так здорово? Ты так много узнаешь, пока хочешь что-то создать).
Итак, я узнал, что мне нужно было найти расстояния между этими двумя точками; поэтому мне пришлось изменить цветовую систему RGB на цветовую систему LAB, чтобы иметь возможность рассчитать расстояние с помощью алгоритма Delta E.
Благодаря Zachary Schuessler за отличную статью о Delta E мне удалось написать функцию, которая будет производить вычисления и находить мне наиболее близкий цвет.
Прекрасной особенностью этого алгоритма было то, что он мог возвращать саму дельту, которую я немного изменил в своей функции и назвал ее статусом.
Теперь значение статуса может даже сказать, насколько далеко два цвета находятся друг от друга и насколько это можно обнаружить. для человеческих глаз 👀. Вуаля! 🎉 это так круто, Теперь я даже могу сказать, может ли человек различать два цвета или нет.
Итак, проблема решена. Теперь у меня была замечательная функция, которая делала за меня все вычисления.
deltaE1994 Функция
mathColor Функция
Теперь я мог прочитать ввод, сопоставить его с библиотекой цветов, и, если совпадения не было найдено, был выбран ближайший цвет и для пользователя был отправлен следующий объект:
{ status: 2,
name: 'Brilliance',
hex: '#fdfdfd',
delta: 0.34559411394170403,
message: 'Not perceptible by human eyes' }
И все, модуль готов. Я надеюсь тебе это понравится.
Пожалуйста, оставьте мне свои комментарии ниже, чтобы я мог улучшить этот инструмент.
Очень скоро я напишу о своем пути создания этого приложения для мобильных 📱.
Ваше здоровье!
