fbpx

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.

The Taj Mahal Superimposed with a Fibonacci Grid

I am no architect. I build and maintain websites. Let’s jump to our colors then.

Generating Golden Ratio Adhering Colors Using RGB Format

The RGB format has three color components:

  1. R is for Red
  2. G is for Green
  3. B is for Blue

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 255Rounded
100255255
61.80469716157.6019778158
38.1982059197.4054250698
23.6082854860.2011279761
14.5910293437.2071248338
9.01794149922.9957508223
5.57351143314.2124541514
3.4446918628.7839642499
2.1289813735.4289025026
1.315810493.355316754
0.81323268872.0737433562
0.50261600051.2816708011
0.31064029690.79213275721
0.19199029480.48957525170

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:

Golden Ratio Color Palette 1 : Modern

rgb( 61 , 38 , 255 )





rgb( 255 , 2 , 61 )

rgb( 61 , 38 , 158)

rgb( 61 , 38 , 98 )





Golden Ratio Color Palette 2: Retro

rgb( 98 , 38 , 61 )





rgb( 61 , 38 , 255 )

rgb( 98 , 2 , 158 )

rgb( 98 , 2 , 255 )





Golden Ratio Color Palette 3 : Peppy

rgb( 255 , 158 , 98 )





rgb( 255 , 38 , 98 )

rgb( 255 , 98 , 2 )

rgb( 255 , 98 , 158 )





Golden Ratio Color Palette 4: Dark

rgb( 2 , 38 , 61 )





rgb( 98 , 158 , 61 )

rgb( 2 , 38 , 98 )

rgb( 2 , 38 , 4 )





The Complete Set of Colors

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”.

Need someone to manage your WordPress Website? Pick us! ?‍♂️

Leave a Reply