By Paul Wicks


2008-08-26 07:57:06 8 Comments

Given 2 rgb colors and a rectangular area, I'd like to generate a basic linear gradient between the colors. I've done a quick search and the only thing I've been able to find is this blog entry, but the example code seems to be missing, or at least it was as of this posting. Anything helps, algorithms, code examples, whatever. This will be written in Java, but the display layer is already taken care of, I just need to figure out how to figure out what to display.

5 comments

@Holger Brandl 2017-11-16 08:09:50

Following up on the execllent answer of David Crow, here's a Kotlin example implementation

fun gradientColor(x: Double, minX: Double, maxX: Double, 
                  from: Color = Color.RED, to: Color = Color.GREEN): Color {
    val range = maxX - minX
    val p = (x - minX) / range

   return Color(
        from.red * p + to.red * (1 - p),
        from.green * p + to.green * (1 - p),
        from.blue * p + to.blue * (1 - p),
        1.0
    )
}

@dbkk 2008-08-26 08:32:19

You can use the built in GradientPaint class.

void Paint(Graphics2D g, Regtangle r, Color c1, Color c2)
{
  GradientPaint gp = new GradientPaint(0,0,c1,r.getWidth(),r.getHeight(),c2); 
  g.setPaint(gp);
  g.fill(rect);
}

@Konrad Rudolph 2008-08-26 08:00:29

you want an interpolation between the first and the second colour. Interpolating colours is easy by calculating the same interpolation for each of its components (R, G, B). There are many ways to interpolate. The easiest is to use linear interpolation: just take percentage p of the first colour and percentage 1 - p of the second:

R = firstCol.R * p + secondCol.R * (1 - p)

There's another question related to this.

There are other methods of interpolation that sometimes work better. For example, using a bell-shaped (sigmoidal) interpolation function makes the transition smoother.

/EDIT: Oops, you mean using a predefined function. OK, even easier. The blog post you linked now has an example code in Python.

In Java, you could use the GradientPaint.

@Avrom 2009-05-10 19:38:25

In Java 1.6 and up, there is also LinearGradientPaint which allows for more control over how it is painted. See java.sun.com/javase/6/docs/api/java/awt/…

@Thibaut Barrère 2008-10-21 10:36:53

I've been using RMagick for that. If you need to go further the simple gradient, ImageMagick and one of its wrappers (like RMagick or JMagick for Java) could be useful.

@David Crow 2008-08-26 08:20:01

Using the basic AWT classes, you could do something like this:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JPanel;

public class LinearGradient extends JPanel {

    public void paint(Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        Color color1 = Color.RED;
        Color color2 = Color.BLUE;
        int steps = 30;
        int rectWidth = 10;
        int rectHeight = 10;

        for (int i = 0; i < steps; i++) {
            float ratio = (float) i / (float) steps;
            int red = (int) (color2.getRed() * ratio + color1.getRed() * (1 - ratio));
            int green = (int) (color2.getGreen() * ratio + color1.getGreen() * (1 - ratio));
            int blue = (int) (color2.getBlue() * ratio + color1.getBlue() * (1 - ratio));
            Color stepColor = new Color(red, green, blue);
            Rectangle2D rect2D = new Rectangle2D.Float(rectWidth * i, 0, rectWidth, rectHeight);
            g2.setPaint(stepColor);
            g2.fill(rect2D);
        }
    }
}

Related Questions

Sponsored Content

41 Answered Questions

[SOLVED] How to generate a random alpha-numeric string?

65 Answered Questions

[SOLVED] How do I generate random integers within a specific range in Java?

  • 2008-12-12 18:20:57
  • user42155
  • 3921095 View
  • 3378 Score
  • 65 Answer
  • Tags:   java random integer

30 Answered Questions

[SOLVED] How to create a generic array in Java?

16 Answered Questions

2 Answered Questions

[SOLVED] Drawing a gradient color in an arc with a rounded edge

33 Answered Questions

[SOLVED] How can I generate an MD5 hash?

1 Answered Questions

[SOLVED] Add manual gradient legend in ggplot2

12 Answered Questions

[SOLVED] CSS3 gradient background set on body doesn't stretch but instead repeats?

  • 2010-05-19 20:40:23
  • JD Isaacks
  • 299198 View
  • 411 Score
  • 12 Answer
  • Tags:   css css3 gradient

1 Answered Questions

[SOLVED] Lua - xterm 256 colors gradient scripting

2 Answered Questions

Sponsored Content