# Generating color palettes – based on the Fibonacci sequence

We are continuously facing with complicated mathematical concepts every day, even without knowing about their existence.

Just take a look at the range of IP addresses. In ideal case an IP address tends to be closer to another IP address even when adding some new addresses between, the concept of the Hilbert curve:

The previous theory is highly applicable from machine point of view, but there are also plenty of theories applicable from human point of view. Maybe the most famous is the Golden Ratio or Divine Proportion:

In mathematics and the arts, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one.

=====|===
a    b


meaning, a+b is to a as a is to b. From the machine’s point of view, nothing particularly happens, it’s just a “constant” which values is 1.6180339887… (yes, with quotes, the value of this proportion is an irrational number therefore I’m not sure about using the term “constant” when talking about irrational numbers, if you think otherwise, leave a comment below). However this “constant” is really important when talking about beauty and perfection generally. It appears in everything which is aesthetic to us, humans:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … as you may have already realized, the next number in this sequence should be 55+89=144. The numbers of the Fibonacci sequence, or the Fibonacci numbers. What could be so interesting in this sequence other than describing the growth of an idealized rabbit population?
If you don’t know yet, let me show you. Divide the current and the previous number of the Fibonacci sequence above, starting from the second element, repeating infinite times:

$\frac{1}{1} =1\newline\newline \frac{2}{1}=2\newline\newline \frac{3}{2}=1.5\newline\newline \frac{5}{3}=1.66..\newline\newline \frac{8}{5}=1.6\newline\newline \frac{13}{8}=1.625\newline\newline \frac{21}{13}=1.615\newline\newline \frac{34}{21}=1.61904...$

As you may have already discovered the results of these iterations are approaching to the value of the Golden Ratio (see above, it was: 1.6180339887…).

The question is appropriate: Is there any way to apply this abstract representation of the golden ration?

Let’s take a look at the hexadecimal representation of a color “from the web”, a0ff11. Each color consist of three components, the red: a0, the green: ff and the blue component: 11. The idea is very simple: increment every component by the elements of the Fibonacci sequence.

The implementation happened in JSP, because everyone needs to know JSP!!1 currently I’m advancing in JSP. 🙂
Nothing fancy just a simple opening page to gather the required parameters, like the base color, number of color in the palette and the component which have to be modified:

<html>
<title>Color Palette Generator</title>
<body>
<form action="generator.jsp" method="get">
<table>
<tr>
<td>Base color:</td><td><input name="baseColor" type="text" /></td>
</tr>
<tr>
<td>Palette size:</td><td><input name="sequence" type="number" /></td>
</tr>
<tr valign=top>
<td>Component to modify:</td><td>
<input type="checkbox" name="red" value="r" />Red
<br/>
<input type="checkbox" name="green" value="g" />Green
<br/>
<input type="checkbox" name="blue" value="b" />Blue
<br/>
<input type="submit" value="Generate" />
</td>
</tr>
</table>
</form>
</body>
</html>


modifying only by blue component

click to enlarge

Now some green magic:

click to enlarge

…and some red:

click to enlarge

And finally some of the colors I picked up randomly, all three modified components are rendered at once:

#2d9b27

#412c84

#24577b

d5f800

The code itself is quite simple.

<%@ page language="java" import="java.awt.Color,java.util.*"%>
<%!/* Some members of the mighty Fibonacci sequence
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987
*/
// and some of them what I found useful:

int fib[] = { 13, 21, 34, 55, 89, 144 };

//int fib[] = new int[] { 2, 3, 5, 8, 13, 21, 34 };
//int fib[] = new int[] { 5, 8, 13, 21, 34, 55, 89 };

public ArrayList generatePalette(Color baseColor, int n, String modifier) {
ArrayList<Color> colorVector = new ArrayList<Color>();
Color tmp = baseColor;
for (int i = 0; i < n; i++) {
tmp = generateColor(tmp, fib[i % 6], modifier);
}
return colorVector;
}

public Color generateColor(Color color, int delta, String modifier) {
int r = -1;
int g = -1;
int b = -1;

if (modifier.equals("r")) {
g = color.getGreen();
b = color.getBlue();
} else if (modifier.equals("g")) {
r = color.getRed();
b = color.getBlue();
} else if (modifier.equals("b")) {
r = color.getRed();
g = color.getGreen();
}

return new Color(r, g, b);
}

public String colorToStr(Color color) {
String r = Integer.toHexString(color.getRed());
String g = Integer.toHexString(color.getGreen());
String b = Integer.toHexString(color.getBlue());
r = r.length() < 2 ? "0" + r : r;
g = g.length() < 2 ? "0" + g : g;
b = b.length() < 2 ? "0" + b : b;
return r + g + b;
}

// if > 255 restart from 0
public int add(int old, int d) {
if (old + d > 255)
return old + d - 255;
else
return old + d;
}%>
<%
String baseColor = (String) request.getParameter("baseColor");
int colorToInt = Integer.parseInt(baseColor, 16);
Color newColor = new Color(colorToInt);
String sequence = (String) request.getParameter("sequence");
int times = Integer.parseInt(sequence);
String[] modifiers = new String[3];
modifiers[0] = (String) request.getParameter("red");
modifiers[1] = (String) request.getParameter("green");
modifiers[2] = (String) request.getParameter("blue");
%>
<html>
<title>Color Sequence Generator</title>
<body>
<%
for (int j = 0; j < modifiers.length; j++) {
if (modifiers[j] == null)
continue;
%>
<table class="main">
<tr>
<%
ArrayList palette = generatePalette(newColor, times,
modifiers[j]);
for (int i = 0; i < palette.size(); i++) {
String current = colorToStr((Color) palette.get(i));
%>
<td class="colorDiv" bgcolor="#<%=current%>"><font
class="colorName">#<%=current%></font></td>
<%
}
%>
</tr>
</table>
<%
}
%>
</body>
</html>