0

I'm new to Javascript and jQuery and am having trouble adjusting the following script:

http://jsfiddle.net/kJdX3/

As written, it finds the closest color from an array of color values.

How could I edit the code so that instead of evaluating the color values inside this array:

var base_colors=["660000","0066cc","ff9900"];

it would evaluate the hexvalue property inside a JSON array like this one:

var base_colors = [
    { "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
    { "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
    { "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];

Finally, how can I use jQuery to reference an external JSON file containing the base_colors array?

1
  • Did my answer not help? Commented Feb 8, 2013 at 14:58

2 Answers 2

1

I've made changes to your jsFiddle that should achieve this.

http://jsfiddle.net/kJdX3/9/

function getSimilarColors (color) {
    var base_colors = [
{ "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
{ "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
{ "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];
    //Convert to RGB, then R, G, B
    var color_rgb = hex2rgb(color);
    var color_r = color_rgb.split(',')[0];
    var color_g = color_rgb.split(',')[1];
    var color_b = color_rgb.split(',')[2];

    //Create an emtyp array for the difference betwwen the colors
    var differenceArray=[];

    //Function to find the smallest value in an array
    Array.min = function( array ){
           return Math.min.apply( Math, array );
    };


    //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
    $.each(base_colors, function(index, value) { 
        var base_color_rgb = hex2rgb(value.hexvalue);
        var base_colors_r = base_color_rgb.split(',')[0];
        var base_colors_g = base_color_rgb.split(',')[1];
        var base_colors_b = base_color_rgb.split(',')[2];

        //Add the difference to the differenceArray
        differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
    });

    //Get the lowest number from the differenceArray
    var lowest = Array.min(differenceArray);

    //Get the index for that lowest number
    var index = differenceArray.indexOf(lowest);

    //Function to convert HEX to RGB
    function hex2rgb( colour ) {
        var r,g,b;
        if ( colour.charAt(0) == '#' ) {
            colour = colour.substr(1);
        }

        r = colour.charAt(0) + colour.charAt(1);
        g = colour.charAt(2) + colour.charAt(3);
        b = colour.charAt(4) + colour.charAt(5);

        r = parseInt( r,16 );
        g = parseInt( g,16 );
        b = parseInt( b ,16);
        return r+','+g+','+b;
    }

    //Return the HEX code
    return base_colors[index].hexvalue;
}

Here's what I changed:

var base_color_rgb = hex2rgb(value.hexvalue);

return base_colors[index].hexvalue;

Sign up to request clarification or add additional context in comments.

1 Comment

@user2051468 if this answer is acceptable, please hit the check box to the left to mark it as the correct answer. Thanks!
0

Use http://api.jquery.com/jQuery.getJSON/

$.getJSON(url, params, function(data) {
 // your json with colors
});

Very important: the json should be valid!

1 Comment

I appreciate the help, but I am still a bit lost trying to redirect the getSimilarColors function to look for the color values in an external file. Assuming I copy the base_colors variable to an external file in the same folder/directory and name it json_colors.js, how should I change my code? -- thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.