Calculate golden ratio dimensions (1:1.618) for layouts, typography, and logos. Get both larger and smaller golden values instantly, with visual preview.
The golden ratio (φ ≈ 1.618033) is a proportion found in nature — from nautilus shells to sunflower spirals — and used in art and design for millennia. Shapes built on 1:1.618 proportions feel naturally balanced, which is why the ratio appears in the Parthenon, the Mona Lisa, and modern logo grids.
Enter any value to find its golden pair: divide by φ for the smaller companion, multiply by φ for the larger one. Use the results for layout widths, typography scales (pair with our Typography Scale tool using ratio 1.618), image crops, and logo proportions. The preview draws the classic golden rectangle with its spiral subdivisions.
The golden ratio is the irrational number φ (phi), approximately 1.6180339887. Two quantities are in the golden ratio when their sum divided by the larger equals the larger divided by the smaller: (a+b)/a = a/b. The proportion appears throughout art and nature — from the Parthenon and Leonardo da Vinci's drawings to nautilus shells and sunflower seed spirals — and designers use it as a ready-made formula for balanced, natural-feeling compositions.
Designers apply 1.618 to divide space into a dominant part and a supporting part. A common pattern is the content-and-sidebar split: a 960px main column pairs with a 593px sidebar (960 ÷ 1.618 ≈ 593). The same division works for hero section heights, image-to-text ratios in cards, and logo geometry. Because the proportion repeats itself at every scale — the larger section relates to the whole the same way the smaller relates to the larger — layouts built on it feel calm and intentional.
A golden rectangle has sides in the ratio 1:1.618. If you cut off the largest possible square from it, the remaining rectangle is golden again — the property repeats forever. Drawing quarter-circles through the sequence of squares produces the golden spiral, a curve that grows by φ with every quarter turn. Designers use the spiral as a sight-line guide: placing the focal point of a poster, cover or hero image where the spiral tightens draws the eye along a natural path.
The Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21, 34...) converges to the golden ratio: dividing any term by the previous one gives numbers that approach 1.618 more and more closely (21/13 ≈ 1.615, 34/21 ≈ 1.619). This is why the two are treated as twins in design: Fibonacci-based grids, spacing steps and even font sizes are practical approximations of golden-ratio proportions, and the sequence gives you convenient whole numbers to work with.
Start with one concrete measurement — a container width, a heading size or a column count — and multiply or divide by 1.618 to get the companion values. For spacing systems, stack the sequence: 8, 13, 21, 34, 55px gives five harmonic steps. Use this calculator to find the golden pair for any input, then apply the numbers to widths, heights, margins and type sizes so every element in the composition shares the same underlying proportion.
The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.
Warm and friendly — popular for CTAs in lifestyle brands
Energetic red-orange, great for urgent accents
Earthy gold associated with quality and heritage
Balanced blue-green — calm, trustworthy, professional
Deep violet tied to wisdom and premium brands
Bold red for passion, alerts, and strong emphasis
Soft purple-blue common in SaaS dashboards
Nature and growth — the color of eco and finance brands
Playful and bold, the signature of youth-oriented design
Authority and stability — the suit-and-tie of colors