What the golden ratio is
The golden ratio is the proportion you get when a line is cut in two so that the whole is to the longer part exactly as the longer part is to the shorter one. Call the shorter part 1 and the longer part x, and the condition (1 + x) : x = x : 1 rearranges into the quadratic xΒ² = x + 1. Its positive root is the number written with the Greek letter Ο (phi): (1 + β5) / 2 = 1.6180339887... Because β5 is irrational, the decimals never end and never repeat, so 1.618 is only a rounded stand-in. This calculator keeps the full double-precision value internally and rounds only what it shows you, to three decimal places.
The constant has a few neat properties that are worth knowing because they let you check your own arithmetic. Squaring it adds exactly 1 (ΟΒ² = Ο + 1 β 2.618), and taking its reciprocal subtracts exactly 1 (1/Ο = Ο β 1 β 0.618). In practice that means that if you cut a length at the golden ratio, the longer piece is about 61.8% of the whole and the shorter piece about 38.2%. And if you cut the longer piece again at the same ratio, you get a smaller version of the same split, which is why golden rectangles can be nested inside one another indefinitely.
The three calculation modes
- From short side: long side = short side Γ Ο. A short side of 10 gives a long side of 16.18.
- From long side: short side = long side Γ· Ο. A long side of 100 gives a short side of 61.803.
- Split total length: long part = total Γ· Ο, short part = total β long part. A total of 100 splits into 61.803 and 38.197.
The three values are tied together, so knowing any one of them fixes the other two. After each calculation the result panel shows the short side, the long side and their sum, along with the exact line of arithmetic that produced the answer. You can feed any of those numbers back into another mode to confirm the round trip: take a short side, get the long side, then enter that long side in the second mode and you should land on the short side you started with.
Golden split table by total length
When you need to divide a page width, a canvas or a board into a main area and a secondary area, this table gives the two parts for common totals. It is calculated from Ο when the page is built, not typed in by hand.
| Total length | Long part (61.8%) | Short part (38.2%) |
|---|---|---|
| 100 | 61.803 | 38.197 |
| 360 | 222.492 | 137.508 |
| 1,080 | 667.477 | 412.523 |
| 1,200 | 741.641 | 458.359 |
| 1,920 | 1,186.625 | 733.375 |
Golden rectangle sizes by short side
If one dimension is already fixed, this table shows the other dimension of a golden rectangle.
| Short side | Long side (Γ 1.618) |
|---|---|
| 4 | 6.472 |
| 10 | 16.18 |
| 30 | 48.541 |
| 100 | 161.803 |
| 600 | 970.82 |
| 1,080 | 1,747.477 |
The numbers work in any unit. A 1080 px tall banner that should be a golden rectangle needs a width of about 1,747.5 px; if the width is fixed at 1080 px instead, the height is about667.5 px. For printed work the same arithmetic applies in millimetres or inches.
How the Fibonacci sequence approaches Ο
In the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21, ...) every term is the sum of the two before it. The ratio of a term to the one before it bounces above and below Ο and settles toward it as the numbers grow. The table is generated by code at build time; the error column is the absolute difference from Ο.
| Earlier term | Later term | Later Γ· earlier | Error vs Ο |
|---|---|---|---|
| 2 | 3 | 1.500000 | 0.118034 |
| 5 | 8 | 1.600000 | 0.018034 |
| 13 | 21 | 1.615385 | 0.002649 |
| 34 | 55 | 1.617647 | 0.000387 |
| 89 | 144 | 1.617978 | 0.000056 |
| 233 | 377 | 1.618026 | 0.000008 |
| 610 | 987 | 1.618033 | 0.000001 |
Even small pairs are close: 13 Γ· 8 = 1.625 is already within about one percent of Ο. That is why designers who need whole pixels often use 5:8, 8:13 or 13:21 as a practical golden ratio. You get proportions that look the same to the eye and dimensions that never need fractional rounding.
Where the ratio gets used
- Page and interface layout: a 61.8 / 38.2 split between content and sidebar, or between a hero image and its caption column, is a common starting point that designers then adjust by eye.
- Type scales: multiplying a base font size by Ο produces a heading size, and multiplying again gives a larger one. Most teams round the results and soften the steps with a smaller multiplier for body-sized text.
- Photo and artwork composition: the "phi grid" places its dividing lines at 38.2% and 61.8% of the frame. It is similar to the rule of thirds (33.3% and 66.7%) but pulls the lines slightly toward the centre.
- Frames, cards and logos: a rectangle of roughly 5:8 is a quick approximation when you want something that feels balanced without being square.
- Nature: spirals in sunflower heads and pine cones are often counted in consecutive Fibonacci numbers. That is a real observation about some plants, but it does not mean every natural form follows Ο.
Worked examples
Example 1: a 1200 px page container. Splitting 1200 px at the golden ratio gives a main column of about 741.6 px and a side column of about 458.4 px. If you also need a gutter between the columns, subtract it from the total first and then split what remains, otherwise the columns will not add up to the container.
Example 2: a picture frame. A frame whose short side is 30 cm needs a long side of 30 Γ 1.618 = about 48.54 cm. Matting, rebates and moulding widths all change the visible opening, so decide whether you are applying the ratio to the outer edge or to the opening before you cut.
Example 3: a heading scale. A 16 px body size multiplied by Ο is about 25.9 px, and one more step gives about 41.9 px. In production those are usually rounded to values such as 26 px and 42 px so they sit cleanly on the pixel grid and match the rest of the design system.
Example 4: why rounding early hurts. Multiplying 1920 by 1.6 gives 3072, while the exact golden value is 3,106.6. That is a gap of roughly 35 units on a single dimension. Round at the end, not at the start.
Common mistakes and limits
- The idea that the golden ratio is "the most beautiful proportion" has not held up consistently in experiments on human preference. Treat it as one useful reference proportion, not a rule that guarantees good design.
- Claims that the Parthenon, the Mona Lisa or other famous works were deliberately built on Ο depend heavily on where you choose to measure, and documentary evidence of intent is usually missing. Be sceptical of any diagram that fits a spiral over a masterpiece.
- The ratio describes two lengths only. It says nothing directly about areas or angles; if you want a golden relationship between areas you must work with the square of the length ratio.
- Accessibility comes first. If a mathematically neat font size is too small to read, or a golden column is too narrow for its content, change the number rather than the usability.
- Rounded constants such as 1.6 or 1.62 are fine for rough sketches but drift on large dimensions, as the example above shows.
- Displayed results are rounded to three decimals. If you round the short and long sides separately and add them, the sum may differ from the true total by about 0.001.
Using the result
Round the numbers to the unit your medium actually uses: whole pixels on screen, the nearest millimetre in print, the nearest eighth of an inch in woodworking. In a design tool, draw the long and short parts as two adjacent rectangles and overlay them on your layout as guides, then judge by eye; the ratio is a starting grid, not a verdict. Copy the result with the button under the output and paste it into your spec or ticket so the reasoning stays attached to the dimensions. If you also need the aspect ratio of a screen or image in whole numbers, use one of the related tools below.
Frequently Asked Questions
How is the Fibonacci sequence related to the golden ratio?
The ratio of consecutive Fibonacci numbers approaches Ο as the sequence grows. For example 8 Γ· 5 = 1.6, 13 Γ· 8 = 1.625 and 21 Γ· 13 β 1.615, and the table above shows the error shrinking at every step.
Is the golden ratio exactly 1.618?
No. It is an irrational number, (1 + β5) / 2, whose decimal expansion goes on forever. 1.618 is a convenient approximation that is accurate to three decimals.
Where do 61.8% and 38.2% come from?
If the whole is 1, the long part is 1/Ο β 0.618 and the short part is 1 β 1/Ο = 1/ΟΒ² β 0.382. They add up to exactly 1, and dividing the long part by the short part gives Ο again.
Can I use it for a phone screen or a video frame?
You can, but most devices use 9:16, 9:19.5 or 16:9 rather than 1:1.618, so there is no need to force a screen to match. Use the ratio for the layout inside the screen, such as how wide a card is compared with its image, not for the screen itself.
How many decimals does the calculator use?
It calculates with the full precision of JavaScript's double-precision numbers and rounds only the displayed values to three decimal places. Nothing you type is sent anywhere; all of the arithmetic happens in your browser.
Related tools
- Aspect Ratio Calculator: reduce a width and height to whole-number ratios and resize images.
- Percentage Calculator: turn 61.8% and 38.2% into lengths for any total.
- Unit Converter: move a result between millimetres, centimetres, inches and more.