Convert from .js to Processing

Hi! Can someone help me to convert this JavaScript to Processing. I’m not so cool for this code yet, but I really need this function for my app. Thank you stranger!

Code:

/*
Sample Usage:

  <script type="text/javascript" src="ntc.js"></script>

  <script type="text/javascript">

    var n_match  = ntc.name("#6195ED");
    n_rgb        = n_match[0]; // This is the RGB value of the closest matching color
    n_name       = n_match[1]; // This is the text string for the name of the match
    n_exactmatch = n_match[2]; // True if exact color match, False if close-match

    alert(n_match);

  </script>

*/

var ntc = {


  init: function() {
    var color, rgb, hsl;
    for(var i = 0; i < ntc.names.length; i++)
    {
      color = "#" + ntc.names[i][0];
      rgb = ntc.rgb(color);
      hsl = ntc.hsl(color);
      ntc.names[i].push(rgb[0], rgb[1], rgb[2], hsl[0], hsl[1], hsl[2]);
    }
  },

  name: function(color) {

    color = color.toUpperCase();
    if(color.length < 3 || color.length > 7)
      return ["#000000", "Invalid Color: " + color, false];
    if(color.length % 3 == 0)
      color = "#" + color;
    if(color.length == 4)
      color = "#" + color.substr(1, 1) + color.substr(1, 1) + color.substr(2, 1) + color.substr(2, 1) + color.substr(3, 1) + color.substr(3, 1);

    var rgb = ntc.rgb(color);
    var r = rgb[0], g = rgb[1], b = rgb[2];
    var hsl = ntc.hsl(color);
    var h = hsl[0], s = hsl[1], l = hsl[2];
    var ndf1 = 0; ndf2 = 0; ndf = 0;
    var cl = -1, df = -1;

    for(var i = 0; i < ntc.names.length; i++)
    {
      if(color == "#" + ntc.names[i][0])
        return ["#" + ntc.names[i][0], ntc.names[i][1], true];

      ndf1 = Math.pow(r - ntc.names[i][2], 2) + Math.pow(g - ntc.names[i][3], 2) + Math.pow(b - ntc.names[i][4], 2);
      ndf2 = Math.pow(h - ntc.names[i][5], 2) + Math.pow(s - ntc.names[i][6], 2) + Math.pow(l - ntc.names[i][7], 2);
      ndf = ndf1 + ndf2 * 2;
      if(df < 0 || df > ndf)
      {
        df = ndf;
        cl = i;
      }
    }

    return (cl < 0 ? ["#000000", "Invalid Color: " + color, false] : ["#" + ntc.names[cl][0], ntc.names[cl][1], false]);
  },

  // adopted from: Farbtastic 1.2
  // http://acko.net/dev/farbtastic
  hsl: function (color) {

    var rgb = [parseInt('0x' + color.substring(1, 3)) / 255, parseInt('0x' + color.substring(3, 5)) / 255, parseInt('0x' + color.substring(5, 7)) / 255];
    var min, max, delta, h, s, l;
    var r = rgb[0], g = rgb[1], b = rgb[2];

    min = Math.min(r, Math.min(g, b));
    max = Math.max(r, Math.max(g, b));
    delta = max - min;
    l = (min + max) / 2;

    s = 0;
    if(l > 0 && l < 1)
      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));

    h = 0;
    if(delta > 0)
    {
      if (max == r && max != g) h += (g - b) / delta;
      if (max == g && max != b) h += (2 + (b - r) / delta);
      if (max == b && max != r) h += (4 + (r - g) / delta);
      h /= 6;
    }
    return [parseInt(h * 255), parseInt(s * 255), parseInt(l * 255)];
  },

  // adopted from: Farbtastic 1.2
  // http://acko.net/dev/farbtastic
  rgb: function(color) {
    return [parseInt('0x' + color.substring(1, 3)), parseInt('0x' + color.substring(3, 5)),  parseInt('0x' + color.substring(5, 7))];
  },

  names: [
["000000", "Black"],
["000080", "Navy Blue"],
["0000C8", "Dark Blue"],
["0000FF", "Blue"],
["000741", "Stratos"],
["001B1C", "Swamp"],
["002387", "Resolution Blue"],
["002900", "Deep Fir"],
["002E20", "Burnham"],
["002FA7", "International Klein Blue"],
["003153", "Prussian Blue"],
["003366", "Midnight Blue"],
["003399", "Smalt"],
["003532", "Deep Teal"],
["003E40", "Cyprus"],
["004620", "Kaitoke Green"],
["0047AB", "Cobalt"],
["004816", "Crusoe"],
["004950", "Sherpa Blue"],
["0056A7", "Endeavour"],
["00581A", "Camarone"],
["0066CC", "Science Blue"],
["0066FF", "Blue Ribbon"],
["00755E", "Tropical Rain Forest"],
["0076A3", "Allports"],
["007BA7", "Deep Cerulean"],
["007EC7", "Lochmara"],
["007FFF", "Azure Radiance"],
["008080", "Teal"],
["0095B6", "Bondi Blue"],
["009DC4", "Pacific Blue"],
["00A693", "Persian Green"],
["00A86B", "Jade"],
["00CC99", "Caribbean Green"],
["00CCCC", "Robin's Egg Blue"],
["00FF00", "Green"],
["00FF7F", "Spring Green"],
["00FFFF", "Cyan / Aqua"],
["010D1A", "Blue Charcoal"],
["011635", "Midnight"],
["011D13", "Holly"],
["012731", "Daintree"],
["01361C", "Cardin Green"],
["01371A", "County Green"],
["013E62", "Astronaut Blue"],
["013F6A", "Regal Blue"],
["014B43", "Aqua Deep"],
["015E85", "Orient"],
["016162", "Blue Stone"],
["016D39", "Fun Green"],
["01796F", "Pine Green"],
["017987", "Blue Lagoon"],
["01826B", "Deep Sea"],
["01A368", "Green Haze"],
["022D15", "English Holly"],
["02402C", "Sherwood Green"],
["02478E", "Congress Blue"],
["024E46", "Evening Sea"],
["026395", "Bahama Blue"],
["02866F", "Observatory"],
["02A4D3", "Cerulean"],
["03163C", "Tangaroa"],
["032B52", "Green Vogue"],
["036A6E", "Mosque"],
["041004", "Midnight Moss"],
["041322", "Black Pearl"],
["042E4C", "Blue Whale"],
["044022", "Zuccini"],
["044259", "Teal Blue"],
["051040", "Deep Cove"],
["051657", "Gulf Blue"],
["055989", "Venice Blue"],
["056F57", "Watercourse"],
["062A78", "Catalina Blue"],
["063537", "Tiber"],
["069B81", "Gossamer"],
["06A189", "Niagara"],
["073A50", "Tarawera"],
["080110", "Jaguar"],
["081910", "Black Bean"],
["082567", "Deep Sapphire"],
["088370", "Elf Green"],
["08E8DE", "Bright Turquoise"],
["092256", "Downriver"],
["09230F", "Palm Green"],
["09255D", "Madison"],
["093624", "Bottle Green"],
["095859", "Deep Sea Green"],
["097F4B", "Salem"],
["0A001C", "Black Russian"],
["0A480D", "Dark Fern"],
["0A6906", "Japanese Laurel"],
["0A6F75", "Atoll"],
["0B0B0B", "Cod Gray"],
["0B0F08", "Marshland"],
["0B1107", "Gordons Green"],
["0B1304", "Black Forest"],
["0B6207", "San Felix"],
["0BDA51", "Malachite"],
["0C0B1D", "Ebony"],
["0C0D0F", "Woodsmoke"],
["0C1911", "Racing Green"],
["0C7A79", "Surfie Green"],
["0C8990", "Blue Chill"],
["0D0332", "Black Rock"],
["0D1117", "Bunker"],
["0D1C19", "Aztec"],
["0D2E1C", "Bush"],
["0E0E18", "Cinder"],
["0E2A30", "Firefly"],
["0F2D9E", "Torea Bay"],
["10121D", "Vulcan"],
["101405", "Green Waterloo"],
["105852", "Eden"],
["110C6C", "Arapawa"],
["120A8F", "Ultramarine"],
["123447", "Elephant"],
["126B40", "Jewel"],
["130000", "Diesel"],
["130A06", "Asphalt"],
["13264D", "Blue Zodiac"],
["134F19", "Parsley"],
["140600", "Nero"],
["1450AA", "Tory Blue"],
["151F4C", "Bunting"],
["1560BD", "Denim"],
["15736B", "Genoa"],
["161928", "Mirage"],
["161D10", "Hunter Green"],
["162A40", "Big Stone"],
["163222", "Celtic"],
["16322C", "Timber Green"],
["163531", "Gable Green"],
["171F04", "Pine Tree"],
["175579", "Chathams Blue"],
["182D09", "Deep Forest Green"],
["18587A", "Blumine"],
["19330E", "Palm Leaf"],
["193751", "Nile Blue"],
["1959A8", "Fun Blue"],
["1A1A68", "Lucky Point"],
["1AB385", "Mountain Meadow"],
["1B0245", "Tolopea"],
["1B1035", "Haiti"],
["1B127B", "Deep Koamaru"],
["1B1404", "Acadia"],
["1B2F11", "Seaweed"],
["FFFF99", "Pale Canary"],
["FFFFB4", "Portafino"],
["FFFFF0", "Ivory"],
["FFFFFF", "White"]
]

}

ntc.init();
1 Like

This page is a great help to make some first steps in converting p5 to Processing and vise versa:

1 Like

Yes, I know, thank you! But this one is too hard for me now, I make a mess with tags, functions and etc… ((

a quick and dirty way you might convert it. i haven’t tested it but it should be fine you should only need to add the rest of the colors from the js names array

//ANSWER TO: https://discourse.processing.org/t/convert-from-js-to-processing/13578

class NameResponse
{
  String hex;
  String message;
  boolean isMatch;

  public NameResponse(String hex, String message, boolean isMatch) {
    this.hex = hex;
    this.message = message;
    this.isMatch = isMatch;
  }
}

class ColorProperty
{
  String hex, name;
  //ikr what bytes
  int[] rgb, hsl;

  public ColorProperty(String hex, String name) {
    this.hex = hex;
    this.name = name;
    this.rgb = convertHexToRgb(hex);
    this.hsl = convertHexToHsl(hex);
  }
}

ArrayList<ColorProperty> colorProperties;
void setup() {
  size(640, 480, P2D);
  colorProperties = new ArrayList<ColorProperty>();
  
  //i only added a small number of the full list i will leave it for you to fill in
  colorProperties.add(new ColorProperty("000000", "Black"));
  colorProperties.add(new ColorProperty("000080", "Navy Blue"));
  colorProperties.add(new ColorProperty("0000C8", "Dark Blue"));
  colorProperties.add(new ColorProperty("0000FF", "Blue"));
  colorProperties.add(new ColorProperty("000741", "Stratos"));
  colorProperties.add(new ColorProperty("001B1C", "Swamp"));
  colorProperties.add(new ColorProperty("002387", "Resolution Blue"));
  colorProperties.add(new ColorProperty("002900", "Deep Fir"));
  colorProperties.add(new ColorProperty("002E20", "Burnham"));
  colorProperties.add(new ColorProperty("002FA7", "International Klein Blue"));
  colorProperties.add(new ColorProperty("003153", "Prussian Blue"));
  colorProperties.add(new ColorProperty("003366", "Midnight Blue"));
  colorProperties.add(new ColorProperty("003399", "Smalt"));
  colorProperties.add(new ColorProperty("003532", "Deep Teal"));
  colorProperties.add(new ColorProperty("003E40", "Cyprus"));
  colorProperties.add(new ColorProperty("004620", "Kaitoke Green"));
  colorProperties.add(new ColorProperty("0047AB", "Cobalt"));
  colorProperties.add(new ColorProperty("004816", "Crusoe"));
  colorProperties.add(new ColorProperty("004950", "Sherpa Blue"));
  colorProperties.add(new ColorProperty("0056A7", "Endeavour"));
  colorProperties.add(new ColorProperty("00581A", "Camarone"));
  colorProperties.add(new ColorProperty("0066CC", "Science Blue"));
  colorProperties.add(new ColorProperty("0066FF", "Blue Ribbon"));
  colorProperties.add(new ColorProperty("00755E", "Tropical Rain Forest"));
  colorProperties.add(new ColorProperty("0076A3", "Allports"));
  colorProperties.add(new ColorProperty("007BA7", "Deep Cerulean"));
  colorProperties.add(new ColorProperty("007EC7", "Lochmara"));
  colorProperties.add(new ColorProperty("007FFF", "Azure Radiance"));
  colorProperties.add(new ColorProperty("008080", "Teal"));
  colorProperties.add(new ColorProperty("0095B6", "Bondi Blue"));
  colorProperties.add(new ColorProperty("009DC4", "Pacific Blue"));
  colorProperties.add(new ColorProperty("00A693", "Persian Green"));
  colorProperties.add(new ColorProperty("00A86B", "Jade"));
  colorProperties.add(new ColorProperty("00CC99", "Caribbean Green"));
  colorProperties.add(new ColorProperty("00CCCC", "Robin's Egg Blue"));
  colorProperties.add(new ColorProperty("00FF00", "Green"));
  colorProperties.add(new ColorProperty("00FF7F", "Spring Green"));
  colorProperties.add(new ColorProperty("00FFFF", "Cyan / Aqua"));
  colorProperties.add(new ColorProperty("010D1A", "Blue Charcoal"));
}

public int[] convertHexToRgb(String hex) {
  return new int[] { parseInt("0x" + hex.substring(1, 3)), parseInt("0x" + hex.substring(3, 5)), parseInt("0x" + hex.substring(5, 7)) };
}

public int[] convertHexToHsl(String hex) {
  int[] redgreenblue = convertHexToRgb(hex);
  float rScaled = redgreenblue[0] / 255, 
    gScaled = redgreenblue[1] / 255, 
    bScaled = redgreenblue[2] / 255, 
    minVal = min(rScaled, min(gScaled, bScaled)), 
    maxVal = max(rScaled, max(gScaled, bScaled)), 
    delta = maxVal - minVal, 
    l = (minVal + maxVal) / 2, 
    s = 0, 
    h = 0;

  if (l > 0 && l < 1) {
    s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
  }

  if (delta > 0) {
    if (maxVal == rScaled && maxVal != gScaled) h += (gScaled - bScaled) / delta;
    if (maxVal == gScaled && maxVal != bScaled) h += (2 + (bScaled - rScaled) / delta);
    if (maxVal == bScaled && maxVal != rScaled) h += (4 + (rScaled - gScaled) / delta);
    h /= 6;
  }

  return new int[] { parseInt(h * 255), parseInt(s * 255), parseInt(l * 255) };
}

public NameResponse Name(String hex) {
  hex = hex.toUpperCase();
  if (hex.length() < 3 || hex.length() > 7) {
    return new NameResponse("#000000", "Invalid Color: " + hex, false);
  }
  if (hex.length() % 3 == 0) {
    hex = "#" + hex;
  }
  if (hex.length() == 4) {
    //this is weird to me...
    hex = "#" + hex.substring(1, 1) + hex.substring(1, 1) + hex.substring(2, 1) + hex.substring(2, 1) + hex.substring(3, 1) + hex.substring(3, 1);
  }

  int[] rgb = convertHexToRgb(hex);
  int r = rgb[0], 
    g = rgb[1], 
    b =  rgb[2];

  int[] hsl = convertHexToHsl(hex);
  int h = hsl[0], 
    s = hsl[1], 
    l = hsl[2]; 
  float ndf1 = 0, 
    ndf2 = 0, 
    ndf = 0, 
    df = -1;
  int cl = -1;

  for (int i = 0; i < colorProperties.size(); i++) {
    ColorProperty cp = colorProperties.get(i);
    if (hex == "#" + cp.name) {
      return new NameResponse(cp.hex, cp.name, true);
    }

    ndf1 = pow(r - cp.rgb[0], 2) + pow(g - cp.rgb[1], 2) + pow(b - cp.rgb[2], 2);
    ndf2 = pow(h - cp.hsl[0], 2) + pow(s - cp.hsl[1], 2) + pow(l - cp.hsl[2], 2);
    ndf = ndf1 + ndf2 * 2;
    if (df < 0 || df > ndf) {
      df = ndf;
      cl = i;
    }
  }

  if (cl < 0) {
    return new NameResponse("#000000", "Invalid Color: " + hex, false);
  }

  ColorProperty cp = colorProperties.get(cl);
  return new NameResponse("#" + cp.hex, cp.name, false);
}

Thank you for your work!!!
I got error: “StringIndexOutOfBoundsException: String index out of range: 7” there

  return new int[] { parseInt("0x" + hex.substring(1, 3)), parseInt("0x" + hex.substring(3, 5)), parseInt("0x" + hex.substring(5, 7)) };

And where I should enter a color in hex, I mean is it some string like

String colorhex = "#000000"; // or "000000" it doesn't matter
println(name);                       // there print result to console "Black"

sorry i just missed a hash in the hexToHsl function in fact you could change that back to be more in line with the original code if you wanted but the below will work… almost. i will let you fix up the remainder as the bulk of the work is done it’s just a few little bits that need work

//ANSWER TO: https://discourse.processing.org/t/convert-from-js-to-processing/13578

class NameResponse
{
  String hex;
  String message;
  boolean isMatch;

  public NameResponse(String hex, String message, boolean isMatch) {
    this.hex = hex;
    this.message = message;
    this.isMatch = isMatch;
  }
  
  public String toString() {
    return "Hex: " + hex + ", Message: " + message + ", Is Match: " + isMatch;
  }
}

class ColorProperty
{
  String hex, name;
  //ikr what bytes
  int[] rgb, hsl;

  public ColorProperty(String hex, String name) {
    this.hex = hex;
    this.name = name;
    this.rgb = convertHexToRgb("#" + hex);
    this.hsl = convertHexToHsl(hex);
  }
}

ArrayList<ColorProperty> colorProperties;
void setup() {
  size(640, 480, P2D);
  colorProperties = new ArrayList<ColorProperty>();
  
  //i only added a small number of the full list i will leave it for you to fill in
  colorProperties.add(new ColorProperty("000000", "Black"));
  colorProperties.add(new ColorProperty("000080", "Navy Blue"));
  colorProperties.add(new ColorProperty("0000C8", "Dark Blue"));
  colorProperties.add(new ColorProperty("0000FF", "Blue"));
  colorProperties.add(new ColorProperty("000741", "Stratos"));
  colorProperties.add(new ColorProperty("001B1C", "Swamp"));
  colorProperties.add(new ColorProperty("002387", "Resolution Blue"));
  colorProperties.add(new ColorProperty("002900", "Deep Fir"));
  colorProperties.add(new ColorProperty("002E20", "Burnham"));
  colorProperties.add(new ColorProperty("002FA7", "International Klein Blue"));
  colorProperties.add(new ColorProperty("003153", "Prussian Blue"));
  colorProperties.add(new ColorProperty("003366", "Midnight Blue"));
  colorProperties.add(new ColorProperty("003399", "Smalt"));
  colorProperties.add(new ColorProperty("003532", "Deep Teal"));
  colorProperties.add(new ColorProperty("003E40", "Cyprus"));
  colorProperties.add(new ColorProperty("004620", "Kaitoke Green"));
  colorProperties.add(new ColorProperty("0047AB", "Cobalt"));
  colorProperties.add(new ColorProperty("004816", "Crusoe"));
  colorProperties.add(new ColorProperty("004950", "Sherpa Blue"));
  colorProperties.add(new ColorProperty("0056A7", "Endeavour"));
  colorProperties.add(new ColorProperty("00581A", "Camarone"));
  colorProperties.add(new ColorProperty("0066CC", "Science Blue"));
  colorProperties.add(new ColorProperty("0066FF", "Blue Ribbon"));
  colorProperties.add(new ColorProperty("00755E", "Tropical Rain Forest"));
  colorProperties.add(new ColorProperty("0076A3", "Allports"));
  colorProperties.add(new ColorProperty("007BA7", "Deep Cerulean"));
  colorProperties.add(new ColorProperty("007EC7", "Lochmara"));
  colorProperties.add(new ColorProperty("007FFF", "Azure Radiance"));
  colorProperties.add(new ColorProperty("008080", "Teal"));
  colorProperties.add(new ColorProperty("0095B6", "Bondi Blue"));
  colorProperties.add(new ColorProperty("009DC4", "Pacific Blue"));
  colorProperties.add(new ColorProperty("00A693", "Persian Green"));
  colorProperties.add(new ColorProperty("00A86B", "Jade"));
  colorProperties.add(new ColorProperty("00CC99", "Caribbean Green"));
  colorProperties.add(new ColorProperty("00CCCC", "Robin's Egg Blue"));
  colorProperties.add(new ColorProperty("00FF00", "Green"));
  colorProperties.add(new ColorProperty("00FF7F", "Spring Green"));
  colorProperties.add(new ColorProperty("00FFFF", "Cyan / Aqua"));
  colorProperties.add(new ColorProperty("010D1A", "Blue Charcoal"));
 
  
  //println(Name("#00FFFF").toString());
  println(Name("#000000").toString());
}

public int[] convertHexToRgb(String hex) {
  return new int[] { parseInt("0x" + hex.substring(1, 3)), parseInt("0x" + hex.substring(3, 5)), parseInt("0x" + hex.substring(5, 7)) };
}

public int[] convertHexToHsl(String hex) {
  int[] redgreenblue = convertHexToRgb("#" + hex);

  float rScaled = redgreenblue[0] / 255,
    gScaled = redgreenblue[1] / 255, 
    bScaled = redgreenblue[2] / 255, 
    minVal = min(rScaled, min(gScaled, bScaled)), 
    maxVal = max(rScaled, max(gScaled, bScaled)), 
    delta = maxVal - minVal, 
    l = (minVal + maxVal) / 2, 
    s = 0, 
    h = 0;

  if (l > 0 && l < 1) {
    s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
  }

  if (delta > 0) {
    if (maxVal == rScaled && maxVal != gScaled) h += (gScaled - bScaled) / delta;
    if (maxVal == gScaled && maxVal != bScaled) h += (2 + (bScaled - rScaled) / delta);
    if (maxVal == bScaled && maxVal != rScaled) h += (4 + (rScaled - gScaled) / delta);
    h /= 6;
  }

  return new int[] { parseInt(h * 255), parseInt(s * 255), parseInt(l * 255) };
}

public NameResponse Name(String hex) {
  hex = hex.toUpperCase();
  if (hex.length() < 3 || hex.length() > 7) {
    return new NameResponse("#000000", "Invalid Color: " + hex, false);
  }
  if (hex.length() % 3 == 0) {
    hex = "#" + hex;
  }
  if (hex.length() == 4) {
    //this actually uses substr which is diferent from substring
    //so you might need to adjust this to account for the difference
    hex = "#" + hex.substring(1, 1) + hex.substring(1, 1) + hex.substring(2, 1) + hex.substring(2, 1) + hex.substring(3, 1) + hex.substring(3, 1);
  }

  int[] rgb = convertHexToRgb(hex);
  int r = rgb[0], 
    g = rgb[1], 
    b =  rgb[2];

  int[] hsl = convertHexToHsl(hex);
  int h = hsl[0], 
    s = hsl[1], 
    l = hsl[2]; 
  float ndf1 = 0, 
    ndf2 = 0, 
    ndf = 0, 
    df = -1;
  int cl = -1;

  for (int i = 0; i < colorProperties.size(); i++) {
    ColorProperty cp = colorProperties.get(i);
    
    if (hex.equals("#" + cp.hex)) {
      return new NameResponse("#" + cp.hex, cp.name, true);
    }

    ndf1 = pow(r - cp.rgb[0], 2) + pow(g - cp.rgb[1], 2) + pow(b - cp.rgb[2], 2);
    ndf2 = pow(h - cp.hsl[0], 2) + pow(s - cp.hsl[1], 2) + pow(l - cp.hsl[2], 2);
    ndf = ndf1 + ndf2 * 2;
    if (df < 0 || df > ndf) {
      df = ndf;
      cl = i;
    }
  }

  if (cl < 0) {
    return new NameResponse("#000000", "Invalid Color: " + hex, false);
  }

  ColorProperty cp = colorProperties.get(cl);
  return new NameResponse("#" + cp.hex, cp.name, false);
}
1 Like

Oooooh!! Thank you again!! Yeaaah!! This works well!!
Thank you for quick response!! You are the best!! :partying_face::+1::+1::+1:

Sorry, this is me again… I’m too stupid to understand how to fix this code… It’s only gives exact match, but not closest match… I found that you didn’t convert this function:

  init: function() {
    var color, rgb, hsl;
    for(var i = 0; i < ntc.names.length; i++)
    {
      color = "#" + ntc.names[i][0];
      rgb = ntc.rgb(color);
      hsl = ntc.hsl(color);
      ntc.names[i].push(rgb[0], rgb[1], rgb[2], hsl[0], hsl[1], hsl[2]);
    }
  },

Right? That function gives the approximately match?
And I can’t figure out how to… I’m totally messed up…

the code you show (init) only intialises the names array by adding to each entry its rgb and hsl something the converted code does within the ColorProperty intialisation. What you are looking for, the matching, is done in the Name function.

this iterates over the list of colors in the ArrayList (or names array in the js version)
and searches for a match if one is found it returns and no more of the function is run

  for (int i = 0; i < colorProperties.size(); i++) {
    ColorProperty cp = colorProperties.get(i);
    
    if (hex.equals("#" + cp.hex)) {
      return new NameResponse("#" + cp.hex, cp.name, true);
    }

    ndf1 = pow(r - cp.rgb[0], 2) + pow(g - cp.rgb[1], 2) + pow(b - cp.rgb[2], 2);
    ndf2 = pow(h - cp.hsl[0], 2) + pow(s - cp.hsl[1], 2) + pow(l - cp.hsl[2], 2);
    ndf = ndf1 + ndf2 * 2;
    if (df < 0 || df > ndf) {
      df = ndf;
      cl = i;
    }
  }

if the above didn’t find an exact match then the next piece of code in the same function is used. cl is basically the closest index into the ArrayList for the color you are trying to Name however it is possible the color is unable to related to some entry and the index (cl) will be -1 so just return invalid color. if the index (cl) is valid then it gets the entry from the ArrayList and returns it. Note in the NameResponse return there is a value isMatch basically this tells you if the color you are trying to Name is within the known colors of the ArrayList.

  if (cl < 0) {
    return new NameResponse("#000000", "Invalid Color: " + hex, false);
  }

  ColorProperty cp = colorProperties.get(cl);
  return new NameResponse("#" + cp.hex, cp.name, false);

hope this helps. best of luck.

1 Like

So how to get closest color name? If write color that in array
println(Name("000080").toString());

It gives me

Hex: 000080, Message: Navy Blue, Is Match: true

When not in array 000070 for example
it always answering

Hex: #000000, Message: Black, Is Match: false

But should

Hex: 000070, Message: Navy Blue, Is Match: false

just change this

public int[] convertHexToRgb(String hex) {
  return new int[] { parseInt("0x" + hex.substring(1, 3)), parseInt("0x" + hex.substring(3, 5)), parseInt("0x" + hex.substring(5, 7)) };
}

to

public int[] convertHexToRgb(String hex) {
  return new int[] { unhex(hex.substring(1, 3)), unhex(hex.substring(3, 5)), unhex(hex.substring(5, 7)) };
}

best of luck with it all

1 Like

Thanks for ALL!! Really!!!
Got error
NumberFormatException: For input string: “#0
:disappointed:

a guy goes to a doctor and says it hurts when i move like this. the doctor looks at him then says well don’t do that. :stuck_out_tongue:

atm it is expected that all input will be a complete hex value. I am going to leave the error handling of input to you.