InputTestHub

Golden Ratio Calculator

Calculates golden ratio proportions for layouts, type sizes and image dimensions.

Colour & Design Nothing uploaded No sign-up Free, unlimited
Colour & Design tool
Enter your figures and press Calculate.
In short The golden ratio is 1.618, the number where the whole divided by the larger part equals the larger part divided by the smaller. As a layout tool it is genuinely useful: split 1000px by it and you get 618 and 382, which is a more interesting division than a half and a more balanced one than a third. It works well for a content column against a sidebar, for the relationship between a heading and its body text, and for cropping an image to proportions that feel settled rather than arbitrary. What it is not is a law of beauty. The claims usually attached to it — that the Parthenon, the Mona Lisa and the nautilus shell are built on it — are mostly retrofitted, and the measurements only work if you choose where to put the lines. A nautilus shell is a logarithmic spiral with a ratio nowhere near 1.618. Treat 1.618 as one useful proportion among several: 3:2, 4:3 and the musical ratios are equally pleasant and often more practical, because they divide into whole pixels. Use it when it helps you decide, and do not let it override a layout that already works.

How to use the Golden Ratio Calculator

  1. Enter your figures in the input fields.
  2. The result updates as you type, together with the full working.
  3. Check the breakdown table to see exactly how the number was reached.

About the Golden Ratio Calculator

The Golden Ratio Calculator calculates golden ratio proportions for layouts, type sizes and image dimensions. It runs as plain JavaScript inside the page, which means there is no upload step, no queue and no size limit imposed by a server — the only limit is your own device.

What people use it for

  • Splitting a layout into content and sidebar.
  • Building a type scale on the golden ratio.
  • Sizing an image to a pleasing proportion.

The maths behind it

This tool uses the golden ratio φ = (1 + √5) ÷ 2 ≈ 1.6180339887. Every intermediate value is shown on screen, so the result can be checked by hand.

Frequently asked questions

Does the Golden Ratio Calculator cost anything?
There is no cost and no cap. The Golden Ratio Calculator is not a demo of a paid product, so nothing is held back or watermarked.
Is the Golden Ratio Calculator safe to use with private information?
No. The Golden Ratio Calculator runs entirely in your browser using JavaScript. Nothing is transmitted, logged or stored, which you can verify yourself in the Network tab of your browser's developer tools.
What formula does the Golden Ratio Calculator use?
It uses the golden ratio φ = (1 + √5) ÷ 2 ≈ 1.6180339887. The full working is printed under the result, so you can follow every step rather than trusting a black box.
What problem does the Golden Ratio Calculator solve?
Typical uses: splitting a layout into content and sidebar. Building a type scale on the golden ratio. Sizing an image to a pleasing proportion. It is built for exactly those cases rather than being a general-purpose tool with this bolted on.
Is the number rounded?
The calculation runs in double precision and the result is shown to ten significant figures, so converting a value and converting it back returns the original. What is displayed is rounded for readability; what is copied is not.

Related colour & design tools

All 33
01

Colour Code Converter

Converts colours between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and named CSS colours.

02

Colour Picker

Picks any colour and shows its HEX, RGB, HSL, HSV, CMYK and LAB values, plus tints, shades and…

03

HEX to RGB Converter

Converts HEX colour codes to RGB and RGBA values, handling 3, 4, 6 and 8 digit hex.

04

RGB to HEX Converter

Converts RGB and RGBA values into HEX colour codes, including 8-digit hex with alpha.

05

HSL Colour Converter

Converts between HSL, HEX and RGB, so you can adjust lightness and saturation predictably.

06

CMYK Colour Converter

Converts between CMYK and RGB or HEX for print work, with a note on gamut differences.

09

Colour Contrast Checker

Calculates WCAG contrast ratio between two colours and reports AA and AAA pass or fail for…