0

Мне надо узнать имя цвета по HEX, пример #fbfa73 - Soft yellow.

Пробовал npm пакет - ntcjs и другие, но они определяют не правильно. Некоторые пишут, что #fbfa73 - это green или golden, мне же надо что бы в название было конкретное по типу "Yellow" или "Blue" как на сайте https://www.colorhexa.com/color-names

2 ответа 2

0

Можете воспользоваться прекрасным сервисом https://www.thecolorapi.com/

const hexValue = document.querySelector('#hexValue');
const search = document.querySelector('#search');
const result = document.querySelector('#result');

const getColorName = (hexValue) => {
  fetch(`https://www.thecolorapi.com/id?hex=${hexValue}`)
  .then(res => res.json())
  .then(data => {
    console.log(data);
    
    result.innerHTML = data.name.value
  })
  .catch(e => console.log(e.message))
}

search.addEventListener('click', () => getColorName(hexValue.value));
<input id="hexValue">
<button id="search">Search</button>
<p id="result"></p>

Единственная проблема, которую я заметил - это то что при неправильном формате hex он всё равно пытается что-то да и выдать (например мне выдавал Black). Так что валидацию надо будет вам самим писать

1
  • К сожалению этот сервис так же не показывает конкретное имя цвета. Например #fbfd3f он называет Golden Fizz. Мне же нужно что бы определяло что это yellow 10 июн 2022 в 18:30
0

Определитель названия цвета можно сделать с помощью двухмерного массива, в котором находится база соответствия кодов цветов и их названий:

<style>
#mycolor{
    border-style: solid;
    width: 120px;
    height: 50px;
    text-align: center;
}
</style>
<div id=mycolor></div>
<script>
let colors = [
    ["#ff0000", "#00ff00", "#0000ff", "#fbfa73", "#ffd700"], // коды
    ["red", "green", "blue", "yellow", "gold"] // названия
]
let color = prompt("введите hex:");
let myindex = colors[0].indexOf(color);
if(myindex == -1){
    mycolor.innerText = "неизвестный цвет";
}else{
    mycolor.style.background = color;
    mycolor.innerText = colors[1][myindex];
}
</script>

2
  • А если у меня 1000 цветов + я не знаю какие точно встретятся ?) - я не могу создать такой массив 10 июн 2022 в 22:37
  • Тогда попробуйте спросить ещё в каком-то другом разделе, связанным с использованием онлайн-сервисов, тут напрашивается решение, как это сделать с помощью javascript.
    – Опан
    11 июн 2022 в 0:46

Ваш ответ

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

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