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 }