Golden Ratio Calculator

Increasing:

1
1.618033988749895
2.618033988749895
4.23606797749979
6.854101966249685
11.090169943749475
17.94427190999916
29.034441853748636
46.9787137637478
76.01315561749644
122.99186938124424
199.00502499874068
321.99689437998495
521.0019193787257
842.9988137587106
1364.0007331374363
Starting Value:

(change this value)

Iterations Shown:


Round to Integer

Decreasing:

1
0.6180339887498948
0.3819660112501051
0.23606797749978967
0.14589803375031543
0.09016994374947422
0.0557280900008412
0.03444185374863302
0.02128623625220818
0.013155617496424835
0.008130618755783347
0.005024998740641488
0.0031056200151418573
0.0019193787254996309
0.0011862412896422264
0.0007331374358574044


The Secret To Beautiful Design

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.



Expressed algebraically:

    The golden ratio is often denoted by the Greek letter phi, usually lower case (φ).

This equation has as its unique positive solution the algebraic irrational number:



At least since the Renaissance, many artists and architects have proportioned their works to approximate the goldenratio—especially in the form of the golden rectangle, in which the ratio of the longer side to the shorter is the golden ratio—believing this proportion to be aesthetically pleasing.



I use the golden ratio whenever I design webpages to make them more visually appealling. For example, this column of text and images is 600 pixels wide. If I wanted to place a table here that was two cells wide, I could use the Golden Ratio Instant Calculator at the top of this page to figure out what widths and heights the table cells should be. First, I change the "Starting Value" at the top of this page to 600, and check the "Round to Integer" option since we are working with pixels. Then on the right you'll see the numbers: 600, 371, 229, 142, etc. By definition of the golden ratio, the numbers 229 and 371 will add up to 600, so these can be the widths of the two cells, and we can make the hieght of the whole table 142 pixels. This will create a visually pleasing table that looks like this...

width: 229px
height: 142px
width: 371px
height: 142px

If I don't have a starting value to work with, often I'll just use numbers from the Fibonacci sequence. The mathematics of the golden ratio and of the Fibonacci sequence are intimately interconnected. The Fibonacci sequence is:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ...

By definition, the first two Fibonacci numbers are 0 and 1, and each subsequent number is the sum of the previous two. As the sequence approaches infinity, the ratio between the last two numbers approaches the golden ratio:



Since the smallest value you can get in webpage design is 1 pixel, it makes sense to use numbers from the Fibonacci sequence, since they are the closest you can get to completely golden ratio design. If you set the "Starting Value" at the top of this page to 1 and check the "Round to Integer" option, you'll see the Fibonacci sequence playing out down the Increasing column. You can change the number of iterations shown to see it out further.

Here is one of my company logos I designed using the Fibonacci sequence...
Try it yourself and discover the beauty.


Centered Element Calculator

Often times in design you'll want to center an object and have the margins on the side be a golden ratio to the centered object's width. Here are two calculators to find out what the centered object's width should be in relation to the container's width.

x =

a =
b =

c =
d =

x
a
b
a
c
d
c

{ 13 comments… read them below or add one }

Bruno October 6, 2012 at 7:32 pm

Hey, does anyone know an app where to input this data? I’m thinking of a visualizer tool.

Reply

Brenda June 1, 2013 at 7:46 am

Fabulous!!! Thanks so much for these 2 calculators!

Reply

pipo September 5, 2013 at 11:54 am

Quack Quack!

Reply

pipo September 5, 2013 at 11:55 am

Once i Pooped in the shower

Reply

pipo September 5, 2013 at 11:57 am

Kebab!!!

Reply

11:54 pm September 5, 2013 at 11:58 am

I love kebab

Reply

11:54 pm September 5, 2013 at 11:58 am

allah

Reply

pipo September 5, 2013 at 11:59 am

Niiice$

Reply

nigel May 5, 2014 at 12:48 am

I was thinking of getting implants but i’m not sure.. what do you think?

Reply

Grateful May 29, 2014 at 9:27 am

This is a fantastic tool – use it almost daily! Thanks a million.

C

Reply

Kent June 10, 2014 at 12:58 pm

Hi im looking for a calculator, who can make the golden ratio on this website.

can you help me

mvh Kent

Reply

Kent June 10, 2014 at 12:58 pm
domain October 12, 2014 at 12:46 am

If you wish for to get much from this paragraph then you have to apply these strategies to your won website.

Reply

Leave a Comment