javascript / узнать имя цвета по hex

Question

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

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

Answer 1

Можете воспользоваться прекрасным сервисом 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). Так что валидацию надо будет вам самим писать

Answer 2

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

<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>

БЛОГ НА HUSL

javascript / узнать имя цвета по hex

Ответы (2 шт):