Getting RGB color range for specific colors

Question

I need to get the RGB color ranges of some basic colors. ex Red color is between RGB(a,b,c) to RGB(x,y,z) like wise or using its Hue value.Any suggestions are welcome.

Answer 1

I don't think anyone can answer this in a convincing way as it is all based on the opinion of the person answering. What do you really consider Red ?

Consider G = 0 and B = 0 , now start increasing R from 0 step by step. People would argue, is (100, 0, 0) a valid red for you ? Or (150, 0, 0) is the start range for you ? You really need to test this yourself.

The below is not scientific at all, it is only based on my opinion:

I would consider Red starting from (160, 0, 0) going up to (255, 0 0) .

Also, When R = 255 . I would consider any value (R= 255, G = g, B = b) where g > b as Red. Until you reach (g = 200 and b = 200) when it starts actually being white.

But when b > g , you'll get a color that may be considered a variation of red until certain range.

Conclusion: There is no correct answer for this. You really need to test it out and check what best match your requirement.

Answer 2

Here is a javascript approach to come up with an array of rgb values between two rgb values.

const lightestColor = 'rgb(204, 224, 245)';
const darkestColor = 'rgb(0, 102, 206)';
const length = 5

const colorArray = this._interpolateColors(
      lightestColor,
      darkestColor,
      length
    );

// interpolate between two colors completely, returning an array of rgb values
  private _interpolateColors(color1, color2, steps): string[] {
    const stepFactor = 1 / (steps - 1);
    const rgbArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for (let i = 0; i < steps; i++) {
      const color = this._interpolateColor(color1, color2, stepFactor * i);
      const string = color.join(', ');
      rgbArray.push('rgb(' + string + ')');
    }

    return rgbArray;
  }

  // Returns a single rgb color interpolation between given rgb color
  // based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
  private _interpolateColor(color1, color2, factor): number[] {
    if (arguments.length < 3) {
      factor = 0.5;
    }
    const result = color1.slice();
    for (let i = 0; i < 3; i++) {
      result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
  }

console.log('colorArray. -->', colorArray);