CODEWITHSUNDEEP
javascripthtmlcanvascolorsrgb
omega
omega

Reputation: 43833

how to get rgb values for a color that's close to another color?

If I have a color in RGB. How can I create a javascript function that returns true when another RGB value is close to the initial RGB and false otherwise?

Upvotes: 1

Views: 2338

Answers (2)

Tim Taurit
Tim Taurit

Reputation: 9239

It all depends what means 'close' to you. You can make function like:

var color1 = { "r": 255, "g": 255, "b": 255 }
var color2 = { "r": 250, "g": 252, "b": 252 }

function isClose(color1, color2) {
    var threshold = 30;
    var distance = Math.abs(color1.r - color2.r) + Math.abs(color1.g - color2.g) + Math.abs(color1.b - color2.b);

    if (distance < threshold) return true;
    return false;
}

which would match colors that are very close (based on simple rgb vector distance), but still there is a threshold parameter which has to be chosen experimentally.

Upvotes: 2

haynar
haynar

Reputation: 6030

I've used this and it works very well for me:

// assuming that color1 and color2 are objects with r, g and b properties
// and tolerance is the "distance" of colors in range 0-255
function isNeighborColor(color1, color2, tolerance) {
    if(tolerance == undefined) {
        tolerance = 32;
    }

    return Math.abs(color1.r - color2.r) <= tolerance
        && Math.abs(color1.g - color2.g) <= tolerance
        && Math.abs(color1.b - color2.b) <= tolerance;
}

and depending on your particular problem the meaning of the color distance can be different, for example maybe in your case you would need to change && to ||

Upvotes: 6

Related Questions