CODEWITHSUNDEEP
javaandroidcolorsrgb
pleerock
pleerock

Reputation: 18846

Generate gradient using only one color

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

Upvotes: 4

Views: 2618

Answers (3)

Raffaele
Raffaele

Reputation: 20885

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

Upvotes: 4

pleerock
pleerock

Reputation: 18846

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

Upvotes: 0

htz
htz

Reputation: 1047

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.

Upvotes: 0

Related Questions