Получить название цвета по HEX или RGB

Question

Как я могу получить имя цвета, используя JS / JQuery, зная код RBG / HEX?

Например:

Colorname      RGB
black          #000000  
white          #FFFFFF
red            #FF0000
green          #008000

Answer 1

Вы можете сделать это с помощью плагина color_classifier.js . Он работает хорошо и возвращает имя ближайший цвет, который имеет имя.

Просто используйте вот так

window.classifier = new ColorClassifier();
get_dataset('dataset.js', function (data){
    window.classifier.learn(data);
});
var result_name = window.classifier.classify("#aaf000");

Answer 2

Вы можете использовать Имя, которое Цвет .

Пример:

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let is_exact_match = result[2]; // false           : True if exact color match

---

Существует также разновидность Имени, котораяЦвет, который включает дополнительные параметры:

http://www.color -blindness.com / color-name-hue-tool / js / ntc.js

Пример:

let result = ntc.name('#6195ed');

let rgb_value = result[0];      // #6495ed         : RGB value of closest match
let specific_name = result[1];  // Cornflower Blue : Color name of closest match
let shade_value = result[2];    // #0000ff         : RGB value of shade of closest match
let shade_name = result[3];     // Blue            : Color name of shade of closest match
let is_exact_match = result[4]; // false           : True if exact color match

Answer 3

Сначала создайте функцию для преобразования цвета rgb в hsl:

function hsl(rgbArr) {
  var r1 = Number(rgbArr[0]) / 255, g1 = Number(rgbArr[1]) / 255, b1 = Number(rgbArr[2]) / 255;
  var maxColor = Math.max(r1,g1,b1), minColor = Math.min(r1,g1,b1);
  var L = (maxColor + minColor) / 2 , S = 0, H = 0;
  if(maxColor != minColor){
    if(L < 0.5){
      S = (maxColor - minColor) / (maxColor + minColor);
    }else{
      S = (maxColor - minColor) / (2.0 - maxColor - minColor);
    }
    if(r1 == maxColor){
      H = (g1-b1) / (maxColor - minColor);
    }else if(g1 == maxColor){
      H = 2.0 + (b1 - r1) / (maxColor - minColor);
    }else{
      H = 4.0 + (r1 - g1) / (maxColor - minColor);
    }
  }
  L = L * 100;
  S = S * 100;
  H = H * 60;
  if(H<0){
    H += 360;
  }
  return {h:H, s:S, l:L};
}

Создание функции для классификации цветов:

function colorName(hsl) {
        var l = Math.floor(hsl.l), s = Math.floor(hsl.s), h = Math.floor(hsl.h);
        if (s <= 10 && l >= 90) {
            return ("White")
        } else if ((s <= 10 && l <= 70) || s === 0) {
            return ("Gray")
        } else if (l <= 15) {
            return ("Black")
        } else if ((h >= 0 && h <= 15) || h >= 346) {
            return ("Red");
        } else if (h >= 16 && h <= 35) {
            if (s < 90) {
                return ("Brown");
            } else {
                return ("Orange");
            }
        } else if (h >= 36 && h <= 54) {
            if (s < 90) {
                return ("Brown");
            } else {
                return ("Yellow");
            }
        } else if (h >= 55 && h <= 165) {
            return ("Green");
        } else if (h >= 166 && h <= 260) {
            return ("Blue")
        } else if (h >= 261 && h <= 290) {
            return ("Purple")
        } else if (h >= 291 && h <= 345) {
            return ("Pink")
        }
    }

И функция для получения интенсивности цвета:

function inten(rgb){
  var hex = "",hex += Number(rgb[0]).toString(16), hex += Number(rgb[1]).toString(16), hex += Number(rgb[2]).toString(16), txt = "";
  var rgb = parseInt(hex, 16);
  var r = (rgb >> 16) & 0xff; 
  var g = (rgb >>  8) & 0xff;
  var b = (rgb >>  0) & 0xff; 
  var inten = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  if(inten >= 80 && inten <= 100){
    txt = "semi dark";
  }    else if(inten < 40){
    txt = "dark";
  }    else{
    txt = "light";
  }
 return txt;
}

Пример:

var color = "rgb(253, 209, 57)";
var rgb = color.replace(/[^0-9,]/g,'').replace().split(",");
var nameColor = colorName(hsl(rgb))+" "+inten(rgb);
console.log(nameColor);

Answer 4

Здесь вы можете увидеть RGB и соответствующие названия цветов:

http://www.w3schools.com/cssref/css_colornames.asp

Как вы можете использовать Это зависит от вашего приложения, вы можете сохранить его в базе данных или жестко его кодировать.