Color Mapping For Specific Range

Question

I have a small problem, I'm trying to draw different color points, the color must depend on a certain value associated with the point within a maximum range and a minimum range. And I would like the color scaling to be made between red - yellow - green.

Now, I've associated with red, the maximum value, while the green color is associated with the minimum value. For all other intermediate points, I would like to go from green to yellow to red, the problem I do not know how to set everything to get yellow, because now I can only pass through green and red gradations.

code:

red = (int) (value * (255));
green = 255 - red;
blue = 0 ;

Color color = new Color((int) red, (int) green, (int) blue);
String hex = Integer.toHexString(color.getRGB() & 0xffffff);

The range goes from 1 (MAX) to 0 (MIN), so the value is inside this range [0,1].

How can I fix everything to get also yellow gradients?

matoni matoni · Accepted Answer · 2017-06-02T10:57:17

Use HSB model instead of RGB. In HSB you just need to specify angle of desired color. Color#getHSBColor(float h, float s, float b);. Here you can try to mix HSB (HSV) color.

HSB Model

Here is an example how to create n distinct colors in specified color-interval:

public static Color[] intervalColors(float angleFrom, float angleTo, int n) {
    float angleRange = angleTo - angleFrom;
    float stepAngle = angleRange / n;

    Color[] colors = new Color[n];
    for (int i = 0; i < n; i++) {
        float angle = angleFrom + i*stepAngle;
        colors[i] = Color.getHSBColor(angle, 1.0, 1.0);        
    }
    return colors;
}
...
    Color[] colors = intervalColors(0, 120, 10); // red to green
    Arrays.sort(colors, Comparator.reversed()); // green to red

To map color to value from range <0,1>:

/**
 * Remaps x from old-interval to new-interval.
 * DoubleInterval just wraps double values a, b.
 */
public static double remap(double x, DoubleInterval oldDomain, DoubleInterval newDomain) {
    double oldRange = oldDomain.size(); // oldDomain.b - oldDomain.a
    double oldRangeValue = x - oldDomain.a; // lowerBound a is just an offset
    double percentile = oldRangeValue / oldRange;

    double newRange = newDomain.size(); // newDomain.b - newDomain.a
    double newRangeValue = percentile * newRange;
    double newVal = newRangeValue + newDomain.a;
    return newVal;
}

/**
 * Returns color from specified color-interval that matches normValue <0,1>.
 * If normValue = 0, angleFrom = 0 (red), angleTo = 120 (green) then color = red. 
 */
public static Color intervalColor(float normValue, float angleFrom, float angleTo) {
    double angleValue = remap(normValue, new DoubleInterval(0, 1), new DoubleInterval(angleFrom, angleTo));
    return Color.getHSBColor(angleValue, 1.0, 1.0);        
}

/**
 * Returns inversion of specified value in given domain.
 * Example: if x = 0.3 and domain of x is <0,1> then inversion = 0.7
 */
public static double invert(double x, DoubleInterval domain) {
    return (domain.b - x) + domain.a;
}

/**
 * Returns color from specified color-interval that matches inverted normValue <0,1>.
 * If normValue = 0 and angleFrom = 0 (red) and angleTo = 120 (green) then color = green. 
 */
public static Color invertedIntervalColor(float normValue, float angleFrom, float angleTo) {
    double invNormValue = invert(normValue, new DoubleInterval(0, 1));
    return intervalColor(invNormValue, angleFrom, angleTo);      
}

Color Mapping For Specific Range

2 Answers