Color detection with OpenCV.JS

Question

I use OpenCV for developing in Javascript.

I am trying to detect variations of orange RGB color between (255, 80, 0) and (255, 170, 0) in any image.

I was trying to do the same as here https://docs.opencv.org/3.3.1/db/d64/tutorial_js_colorspaces.html , but it not working when I changed from black detection to orange detection.

I tried the following code and many others combinations, but have got unexpected.

So, how to choose the limits for ORANGE color?

Here goes the javascript code:

let lower = [230, 155, 0, 0];
let higher = [255, 195, 25, 255];
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let low = new cv.Mat(src.rows, src.cols, src.type(), lower);
let high = new cv.Mat(src.rows, src.cols, src.type(), higher);
cv.inRange(src, low, high, dst);
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete(); low.delete(); high.delete(); 

This is the unexpected result

Answer 1

If orange is about [255, 170, 0] in RGB space I would suggest to widen your range around that:

let lower = [230, 155, 80, 0];
let higher = [255, 195, 120, 255];

In your settings your orange needs to have exactly R=255 and B=0, that is not going to happen in real images. I do not know what the fourth parameter selects (alpha channel?) so it is all in range.

Answer 2

Here is a demo with OpenCV JS where you can select a target color range from an image you like.

https://alexcpn.github.io/opencvjsdemo.html

Update : This link is broken

Output below