グラデーション - web2.0っぽいの練習 2008/07/07

かっこいいグラデーションを作る簡単な(ある意味、無難な)方法は、HSBのブライトネスを変化させればいいようです。

• jmblog.jp - Web2.0っぽいグラデーションのコツ

さらにグラデーションを極めたい場合は、HSBの全てを操作できるといい。

全ての色、そして全体感に対してマッチするグラデーションは、明度、彩度、色相の３つのグラデーションが状況に応じて複雑に組み合わさったものだ。これを体得すれば、リッチなアイコンにも応用することができるだろう。さらには、複数の光源を使ったり、光源の法則をわざと外してみたりすることも有効だ。リアル・グラデーションの作法 | Nitram+Nunca

ちなみに、HSBは色相(Hue)、彩度(Saturation・Chroma)、明度(Brightness・Lightness・Value)だそうです。

• HSV色空間 - Wikipedia

コードです。Javaです。
RGBからHSBに変換して、Bだけスライダーで操作するようにしています。

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Rectangle2D;

import javax.swing.JButton;
import javax.swing.JColorChooser;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class TestGradient extends JPanel {

public static void main(String[] args) {
final JFrame frame = new JFrame();

final TestGradient panel = new TestGradient();
JPanel controlPanel = new JPanel();
final JSlider slider = new JSlider(0, 255);

JPanel panel2 = new JPanel();

final JButton button = new JButton("choice color");

panel2.add(button);
button.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent e) {

panel.colStart = JColorChooser.showDialog(frame, "color",
panel.colStart);
panel.setcolEnd(panel.col_b);

}
});

slider.addChangeListener(new ChangeListener() {

public void stateChanged(ChangeEvent e) {

panel.setcolEnd(slider.getValue() / 256f);
}

});

controlPanel.add(slider);

frame.getContentPane().setLayout(new BorderLayout());
frame.getContentPane().add(panel, BorderLayout.CENTER);

frame.getContentPane().add(panel2, BorderLayout.NORTH);
frame.getContentPane().add(controlPanel, BorderLayout.SOUTH);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setBounds(10, 10, 300, 200);
frame.setTitle("");
frame.setVisible(true);
}

Color colStart = Color.DARK_GRAY;
Color colEnd = colStart;

float col_b = 0f;

void setcolEnd(float b) {
float[] fs = Color.RGBtoHSB(colStart.getRed(), colStart.getGreen(),
colStart.getBlue(), null);

fs[2] = 1f * b;
col_b = b;
colEnd = new Color(Color.HSBtoRGB(fs[0], fs[1], fs[2]));

System.out.println("top:" + colStart);
System.out.println("bottom:" + colEnd);
repaint();
}

public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);

float center = this.getWidth() / 2f;

GradientPaint gradient = new GradientPaint(center, 0, colStart, center,
this.getHeight(), colEnd, false);
g2.setPaint(gradient);

g2
.fill(new Rectangle2D.Double(0, 20, this.getWidth(), this
.getHeight()));
}

}