用于以降低黑暗的顺序显示相同颜色的n种不同色调的算法

Question

要求如下：

我们需要将值映射到颜色。所以每个离散值都有一个颜色。

我们允许用户指定maxColor但否 minColor，但允许他们指定表示阴影数量的区间数。因此，如果选择的maxColor是Color.GREEN和bins= 5，那么我们希望有5种绿色阴影，其中颜色选择为最暗是最暗的，其余四种将按顺序排列增加亮度。

//Give me a list of 5 shades of Green with the first argument being the darkest.
List<Color> greenShades = calculateShades(Color.GREEN,5);

//Give me a list of 7 shades of RED with the first argument being the darkest.
List<Color> greenShades = calculateShades(Color.RED,7);

我将问题标记为Java，因为我在Java中编码。但我知道它只是一个算法。所以在其他语言（如JavaScript）中实现/实现此实现也是可以接受的。

Answer 1

基本概念围绕着基于源的一小部分生成颜色的想法......

也就是说，如果你想要5个乐队，每个乐队的强度将是最后一个乐队的1/5 ......

public List<Color> getColorBands(Color color, int bands) {

    List<Color> colorBands = new ArrayList<>(bands);
    for (int index = 0; index < bands; index++) {
        colorBands.add(darken(color, (double) index / (double) bands));
    }
    return colorBands;

}

public static Color darken(Color color, double fraction) {

    int red = (int) Math.round(Math.max(0, color.getRed() - 255 * fraction));
    int green = (int) Math.round(Math.max(0, color.getGreen() - 255 * fraction));
    int blue = (int) Math.round(Math.max(0, color.getBlue() - 255 * fraction));

    int alpha = color.getAlpha();

    return new Color(red, green, blue, alpha);

}

作为一个快速而讨厌的例子......

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Insets;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JSlider;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

public class ColorBands {

    public static void main(String[] args) {
        new ColorBands();
    }

    public ColorBands() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.setLayout(new BorderLayout());
                frame.add(new TestPane());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class TestPane extends JPanel {

        private JPanel bandsPane;
        private JSlider slider;
        private Timer changeTimer;

        public TestPane() {
            bandsPane = new JPanel(new GridBagLayout());
            slider = new JSlider(1, 100);
            setLayout(new BorderLayout());
            add(new JScrollPane(bandsPane));
            add(slider, BorderLayout.SOUTH);
            slider.addChangeListener(new ChangeListener() {
                @Override
                public void stateChanged(ChangeEvent e) {
                    changeTimer.restart();
                }
            });

            changeTimer = new Timer(250, new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    int bands = slider.getValue();
                    List<Color> bandsList = getColorBands(Color.RED, bands);
                    bandsPane.removeAll();
                    GridBagConstraints gbc = new GridBagConstraints();
                    gbc.gridwidth = GridBagConstraints.REMAINDER;
                    gbc.insets = new Insets(1, 1, 1, 1);
                    for (Color color : bandsList) {
                        bandsPane.add(new ColorBand(color), gbc);
                    }
                    gbc.weighty = 1;
                    bandsPane.add(new JPanel(), gbc);
                    revalidate();
                    repaint();
                }
            });
            changeTimer.setRepeats(false);
            slider.setValue(1);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }
    }

    public List<Color> getColorBands(Color color, int bands) {

        List<Color> colorBands = new ArrayList<>(bands);
        for (int index = 0; index < bands; index++) {
            colorBands.add(darken(color, (double) index / (double) bands));
        }
        return colorBands;

    }

    public static Color darken(Color color, double fraction) {

        int red = (int) Math.round(Math.max(0, color.getRed() - 255 * fraction));
        int green = (int) Math.round(Math.max(0, color.getGreen() - 255 * fraction));
        int blue = (int) Math.round(Math.max(0, color.getBlue() - 255 * fraction));

        int alpha = color.getAlpha();

        return new Color(red, green, blue, alpha);

    }

    public class ColorBand extends JPanel {

        public ColorBand(Color color) {
            setBackground(color);
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(100, 20);
        }

    }

}

Answer 2

基本思路是你想要以颜色的增量从你给Color.WHITE（R = 255，G = 255，B = 255）的颜色中走出每个颜色分量（RGB）。这里有一些代码可以做到这一点。

public List<Color> calculateShades(Color baseColor, int numberShades)
{
  //decompose color into RGB
  int redMax  = baseColor.getRed();
  int greenMax  = baseColor.getGreen();
  int blueMax  = baseColor.getBlue();


  //Max color component in RGB
  final int MAX_COMPONENT = 255;

  //bin sizes for each color component
  int redDelta = (MAX_COMPONENT - redMax) / numberShades;
  int greenDelta = (MAX_COMPONENT - greenMax) / numberShades;
  int blueDelta = (MAX_COMPONENT - blueMax) / numberShades;

  List<Color> colors = new ArrayList<Color>();

  int redCurrent = redMax;
  int greenCurrent = greenMax;
  int blueCurrent = blueMax;

  //now step through each shade, and decrease darkness by adding color to it
  for(int i = 0; i < numberShades; i++)
  {

     //step up by the bin size, but stop at the max color component (255)
     redCurrent = (redCurrent+redDelta) < MAX_COMPONENT ? (redCurrent + redDelta ) : MAX_COMPONENT;
     greenCurrent = (greenCurrent+greenDelta) < MAX_COMPONENT ? (greenCurrent + greenDelta ) : MAX_COMPONENT;
     blueCurrent = (blueCurrent+blueDelta) < MAX_COMPONENT ? (blueCurrent + blueDelta ) : MAX_COMPONENT;

     Color nextShade = new Color(redCurrent, greenCurrent, blueCurrent);
     colors.add(nextShade);
  }

  return colors;
}

Answer 3

查看Color#darker()的Java源代码，将相同的逻辑应用于不同的FACTOR

public Color darker() {
    return new Color(Math.max((int)(getRed()  *FACTOR), 0), 
         Math.max((int)(getGreen()*FACTOR), 0),
         Math.max((int)(getBlue() *FACTOR), 0));
}

Answer 4

RGB颜色系统很容易识别颜色比例，但缺乏操纵颜色的灵活性。使用平均值或比率会给您带来不希望的结果。简单地说，使用RGB颜色系统无法达到所需的效果。

解决方案是将颜色转换为HSV或HSL（HSL perfered）并操纵值/亮度以获得结果。

查看转换算法：

HSL to RGB color conversion

在数学上，假设你有一个颜色R，G，B然后：

所需的箱数= 5

Hue = <some value h>
Saturation = <some value s>
Luminosity = (max(R,G,B) + min (R,G,B))/2

现在对于相同的h，你将得到5个L值：

L1 = 0
L2 = ((1 * 100) / 4)
L3 = ((2 * 100) / 4)
L4 = ((3 * 100) / 4)
L5 = 100

这里因为第一个和最后一个bin将是黑色和白色所以我们使用了4而不是5。

现在将HSL转换回RGB以获得所需的RGB颜色。