Generate gradient using only one color

Question

I have one color, for example 0xFF0000. I want to create simple gradient using only this color as start-point information. The second point will be lighter color the first color.

For example if I have value - 0xFF0000 and I want to get 0xCC0000 from it. Then I can draw simple gradient.

so second color should be, for example 10 or 20% lighter then first

Hard code values are not acceptable. User will select the color from the color wheel and application should automatically generate the second color to draw simple gradient.

Is there any algorithm or way to to implement this? Probably algorithm will count what higher: R or G or B and then parallel decrease other components, or something... I'm not sure how this works.

P.S.: I'm using android SDK

for better help sooner post an [SSCCE](http://sscce.org/), short, runnable, compilable, just about Gradient — mKorbel, Dec 11 '12 at 11:10
Basically, what you want is a gradient between your starting colour and ... white ?? — mb14, Dec 11 '12 at 11:12
no, just 2 colors: red/blue/green/orange/violet/other and light-red/light-blue/light-green/light-orange/light-violet/light-other — pleerock, Dec 11 '12 at 11:13
This [answer](http://stackoverflow.com/questions/16835070/create-gradient-for-color-selection-with-html5-canvas-all-possible-rgb-colors/16845170#16845170) I wrote for another question explains how the RGB and HSV color spaces relate to each other. It might be helpful. — John Schmidt, Dec 17 '14 at 21:58

Raffaele · Accepted Answer · 2012-12-11T15:14:30.047

4

I think the best is converting from the RGB to the HSV space:

public int enlight(int color, float amount) {
  float[] hsv = new float[3];
  Color.colorToHSV(color, hsv);
  hsv[2] = Math.min(1.0f, amount * hsv[2]);
  return Color.HSVToColor(hsv);
}

then you can enlight a color simply by incrementing the v (value) component, and then converting back to RGB if needed with the very same Android API Color

edited Dec 11 '12 at 15:14

answered Dec 11 '12 at 11:34

Raffaele

20,627
6
47
86

Seems to be good... Do we need to increase all three values of v parallel? – pleerock Dec 11 '12 at 11:40
No, a single color, let's say *green* can be represented in RGB and HSV form. A *20% lighter green* has the same H and S component of *green*, but V is 20% bigger (V is in the range 0.0 - 1.0). See the linked wikipedia article: on the bottom of the page there's a nice table – Raffaele Dec 11 '12 at 11:44
I've changed saturation (hsv[1]) and it gave me exactly what I wanted. Gradients not so dynamic but beauty at the same time, exactly what I wanted. – pleerock Dec 11 '12 at 12:00
This is exactly the same functionality as in my answer, but with two additional conversions from Color to HSV and vice versa. I do not see the benefit of it in contrast to my answer. – htz Dec 11 '12 at 13:59
@htz you didn't use the Android APIs, and anyway [the results are different](http://pastebin.com/bSZu2ndc) – Raffaele Dec 11 '12 at 15:25

pleerock · Answer 2 · 2012-12-11T11:50:00.467

Seems to be something like this:

int red     = Color.red(color);
int green   = Color.green(color);
int blue    = Color.blue(color);

int secondColor = 0;
int lighting    = 51; // from 0 to 255. The larger the number is the brighter second color

if (red > green && red > blue)
    secondColor = Color.rgb(red, green - lighting, blue - lighting);
else if (green > red && green > blue)
    secondColor = Color.rgb(red - lighting, green, blue - lighting);
else if (blue > red && blue > green)
    secondColor = Color.rgb(red - lighting, green - lighting, blue);

I should test it for all colors...

Update:

it works, but you need to put some other conditions to check if green and blue equals or red and blue and so.. Please fallow @Raffaele answer

score 0 · Answer 3 · answered Dec 11 '12 at 11:30

I made a simple example to show you a possible way, which makes use of the getRGBColorComponents() method of the Color class.

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

public class Test extends JFrame {

public Test(Color c1, Color c2) {
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setSize(200, 200);
    setVisible(true);
    JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER));
    panel.add(new JLabel(createColorIcon(c1)));
    panel.add(new JLabel(createColorIcon(c2)));
    add(panel);
}

public ImageIcon createColorIcon(Color c) {
    int w = 44, h = 20;
    BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
    Graphics2D g = bi.createGraphics();
    if (c != null) {
        g.setColor(c);
        g.fillRect(0, 0, w, h);
    } else {
        g.setColor(Color.GRAY);
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g.drawLine(1, 1, w - 2, h - 2);
        g.drawLine(1, h - 2, w - 2, 1);
    }
    g.setColor(Color.GRAY);
    g.drawRect(0, 0, w - 1, h - 1);
    g.dispose();
    return new ImageIcon(bi);
}

public static void main(String[] args) {

    Color c1 = Color.decode("0xFF0000");
    float[] f = c1.getRGBColorComponents(null);
    System.out.println(f.length);
    for (int i = 0; i < f.length; i++) {
        System.out.println(f[i]);
    }
    f[0] = f[0] * 0.8f;
    Color c2 = new Color(f[0],f[1],f[2]);
    new Test(c1,c2);

}

}

You just call the getRGBColorComponents()method and you get an array with the color values for red, green and blue as float values in the range from 0.0 to 1.0, where a int value of 255 (or 0xFF) corresponds to a 1.0 float value. You just have to multply it with a factor chosen by you, as I made it at the end of the example.

Generate gradient using only one color

3 Answers3