The Golden Ratio has always alluded me. It is a design framework nature uses to, well, 'generate' us. The Taj Mahal adheres to the Golden Ratio, so does Athena Parthenos. So does your face.
The inspiration to find out colors that adhere to the golden ratio came from an article I read about Golden Ratio typography. This left me wondering if the same principle can be applied to selecting colors for building websites. My head began making ways to generate colors using RGB, HSV or HEX formats. This is when it all started.
I am no architect. I build and maintain websites. Let's jump to our colors then.
The RGB format has three color components:
To generate a color, the three colors Red, Green and Blue are varied from 0 to 255 each. RGB is written as rgb(R,G,B) in css. So, rgb(0,0,0) would be Black, as it has 0 amount of all three colors. Similarly, rgb(255,255,255) would be White.
To generate these colors, I took the number 255 as 100% and then used the Fibonacci percentages to quantize to the "interesting" numbers.
The Fibonacci percentages are:
| 100 |
| 61.80469716 |
| 38.19820591 |
| 23.60828548 |
| 14.59102934 |
| 9.017941499 |
| 5.573511433 |
| 3.444691862 |
| 2.128981373 |
| 1.31581049 |
| 0.8132326887 |
| 0.5026160005 |
| 0.3106402969 |
| 0.1919902948 |
If you divide 100 by 1.618 (The Golden Ratio), you get 61.8
If you divide 61.80 by 1.618, you get 38.19 and so on and so forth.
Moving forward, we don't need percentages, we need integers for our RGB format. So, multiplying the above percentages with 255 and rounding them, we get:
| Fibonacci % (F) | F x 255 | Rounded |
| 100 | 255 | 255 |
| 61.80469716 | 157.6019778 | 158 |
| 38.19820591 | 97.40542506 | 98 |
| 23.60828548 | 60.20112797 | 61 |
| 14.59102934 | 37.20712483 | 38 |
| 9.017941499 | 22.99575082 | 23 |
| 5.573511433 | 14.21245415 | 14 |
| 3.444691862 | 8.783964249 | 9 |
| 2.128981373 | 5.428902502 | 6 |
| 1.31581049 | 3.35531675 | 4 |
| 0.8132326887 | 2.073743356 | 2 |
| 0.5026160005 | 1.281670801 | 1 |
| 0.3106402969 | 0.7921327572 | 1 |
| 0.1919902948 | 0.4895752517 | 0 |
Now that we have our interesting integer numbers that range between 0-255, we are going to create permutations and combinations for the numbers 255, 158, 98, 61, 38, 23, 14, 9, 6, 3, 2, 1, 0 in groups of 3.
Both permutations and combinations are necessary because the color rgb(255, 158, 98) is not same as rgb( 158, 98, 255).
Note that the last 6 numbers don't have much difference between them, so a lot of colors very close together are expected. Also, I just cannot help asking,
Need a New Website For Your Business?
Pick us! ?♂️
Now that we are done with the math, let's look at the results! I hand-picked some of my favorite palettes, here they are:
rgb( 61 , 38 , 255 )
rgb( 255 , 2 , 61 )
rgb( 61 , 38 , 158)
rgb( 61 , 38 , 98 )
rgb( 98 , 38 , 61 )
rgb( 61 , 38 , 255 )
rgb( 98 , 2 , 158 )
rgb( 98 , 2 , 255 )
rgb( 255 , 158 , 98 )
rgb( 255 , 38 , 98 )
rgb( 255 , 98 , 2 )
rgb( 255 , 98 , 158 )
rgb( 2 , 38 , 61 )
rgb( 98 , 158 , 61 )
rgb( 2 , 38 , 98 )
rgb( 2 , 38 , 4 )
So after creating a python script and generating these colors, I made a Google Spreadsheet so I could share. Here's the link to the Golden Ratio Colors Spreadsheet. It was my working sheet so it might have some extra stuff, the sheet you would want to look at is "Generated From Script".
