Golden Ratio Calculator
Split any length into golden sections, find the other parts from one value, size golden rectangles and two-column layouts, and watch Fibonacci ratios approach 1.618.
The interactive tool loads here when JavaScript runs.
About this toolWhat is the Golden Ratio Calculator?
Two lengths are in the golden ratio when the whole is to the larger part as the larger part is to the smaller. That ratio, written φ (phi), is about 1.618. Designers use it to pick proportions that feel balanced without being symmetrical: a page width split into content and sidebar, a logo's inner and outer circles, or the height of a card relative to its width. This calculator takes any one of the three lengths and gives you the other two.
Enter a total of 960 px and it splits into 593.3 and 366.7 px. Enter the larger part instead and it finds the smaller part and the total; enter the smaller and it scales up. A layout panel works out the two columns of a golden grid with a gutter and gives you CSS grid code, a sketch shows the classic golden rectangle subdivided into squares, and a Fibonacci table shows each ratio of consecutive numbers closing in on φ.
- Golden sections from the total, the larger part or the smaller part, in px, rem, mm, cm, in or pt
- Golden rectangle size and a proportion bar
- Two-column layout widths with gutter, and copyable CSS grid code
- Subdivided golden rectangle sketch
- Fibonacci table to F(20) with ratios and their difference from φ
How to use the Golden Ratio Calculator
- Choose whether you know the total, the larger part or the smaller part, and pick a unit.
- Type the value. The other two lengths, the golden rectangle and a proportion bar update immediately.
- For a page layout, enter the container width and gutter to get main column and sidebar widths and CSS grid code.
- Use the Fibonacci table to pick whole numbers that sit close to the golden ratio.
Worked examples
Split a 960 px width
Input
Total 960 px
Output
Larger 593.31 px, smaller 366.69 px; golden rectangle 960 x 593.3 px
The two parts are in ratio 1.618, and so are the total and the larger part.
Two-column page layout
Input
Container 1200 px, gutter 24 px
Output
Main 726.8 px (60.6%), sidebar 449.2 px (37.4%)
The CSS uses grid-template-columns: 1.618fr 1fr with the gutter as gap, so the split holds at any container width.
Scaling from body text
Input
Smaller part 16 px
Output
Larger 25.89 px, total 41.89 px
This is the step pattern of a golden-ratio type scale: 16, 25.9, 41.9 px. The type scale calculator builds the full set.
From the larger part
Input
Larger part 100 mm
Output
Smaller 61.80 mm, total 161.80 mm
Handy when one dimension of a print or product is fixed and you want the other in golden proportion.
Background and insight
If a / b = (a + b) / a = φ, then φ² = φ + 1, and solving the quadratic gives φ = (1 + √5) / 2 = 1.6180339887. It follows that the larger part is the total divided by φ (61.8% of it) and the smaller part is the total divided by φ² (38.2%). Euclid described this as dividing a line in "extreme and mean ratio"; the name golden ratio came much later.
The Fibonacci sequence 1, 1, 2, 3, 5, 8, 13, 21 builds each term from the two before it, and the ratio of neighbours tends to φ: 21 / 13 = 1.6154, and by the twentieth term, 6765 / 4181, the difference is under one ten-millionth. That is why Fibonacci numbers are a handy way to pick whole-number sizes in near-golden proportion, such as 8, 13, 21 and 34 px spacing.
The ratio has gathered more legend than evidence. Measurements of the Parthenon and the Mona Lisa depend on which points you choose, and the nautilus shell grows in a logarithmic spiral that is not a golden one. In design it is one useful proportion among several, alongside the √2 of ISO paper and simple ratios such as 3:2 and 4:3. Use it where it looks right, not because it is guaranteed to.
Common use cases
Page and grid layouts
Set content and sidebar widths, or the height of a hero area against the page, in golden proportion.
Logo and icon construction
Size circles, strokes and spacing in a mark so they relate by φ.
Typography and spacing
Derive heading sizes or spacing steps from a base value multiplied by 1.618.
Product, print and photo crops
Choose card, poster or frame proportions, or the placement of a subject, using golden sections.
Tips and limitations
- A golden-ratio type scale grows fast: six steps from 16 px reach over 280 px. For interfaces a smaller ratio is often easier to work with.
- Round to whole pixels where crisp edges matter; the golden feel survives small rounding.
- Fibonacci numbers give near-golden whole numbers, but early terms (2, 3, 5) are far from 1.618.
- The rule of thirds (33/67) and the golden section (38/62) are close; neither is a law of composition.
- Check the proportion on the actual screen sizes you support. A sidebar that looks right at 1200 px may be too narrow on a tablet.
Frequently asked questions
What is the golden ratio formula?
φ = (1 + √5) / 2 ≈ 1.6180339887. Two lengths a and b (a larger) are in golden ratio when a / b = (a + b) / a. It satisfies φ² = φ + 1.
How do you divide a length by the golden ratio?
The larger part is the total divided by 1.618, and the smaller part is the remainder. For 100 units: 100 / 1.618 = 61.8 and 100 − 61.8 = 38.2.
How do I use the golden ratio in web layout?
Split the content width so the main column is 61.8% and the sidebar 38.2% (minus any gutter). In CSS grid, grid-template-columns: 1.618fr 1fr does this at any width.
How are Fibonacci numbers related to the golden ratio?
Each Fibonacci number is the sum of the two before it, and the ratio of consecutive terms approaches φ. 13 / 8 = 1.625, 21 / 13 = 1.615, and by 6765 / 4181 the ratio matches φ to seven decimal places.
What are the dimensions of a golden rectangle?
Its long side is φ times its short side. A 1,000 px wide golden rectangle is 618 px tall. Cutting a square from it leaves a smaller golden rectangle, which is how the spiral drawing is made.
Is the golden ratio really in the Parthenon and the Mona Lisa?
The evidence is weak. Measurements depend on which points you choose, and there is no record that the builders or Leonardo set out to use φ. Treat these as popular claims rather than facts.
Is there an in-depth guide to the Golden Ratio Calculator?
Yes. “The Golden Ratio in Design: The Maths, the Myths and Real Uses” covers the background, how it works, common pitfalls and worked examples. Read the full guide.
Related Tools You May Like
Free, in-browser tools that pair well with this one.