Golden Ratio Guide
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.
Pro Tips
- For web layouts, use the golden ratio on content-to-sidebar widths: main column × φ : sidebar, e.g. 960px content with a 593px sidebar.
- Combine the golden ratio with the typography scale 1.618 for a fully harmonic design system — heading sizes, line heights, and spacing all derive from the same constant.
Frequently Asked Questions
Q: What is the golden ratio number?
What is the golden ratio number? The golden ratio is approximately 1.6180339887, often written as φ (phi). It is the solution to (a+b)/a = a/b, where the whole relates to the larger part as the larger part relates to the smaller.
Q: Is the golden ratio really everywhere in nature?
Is the golden ratio really everywhere in nature? Partly myth, partly math. Spiral shells, pinecones, and sunflower seed heads follow Fibonacci patterns that converge to φ, but many popular "golden ratio in nature" claims are overstated.
Q: How do I use the golden ratio in typography?
How do I use the golden ratio in typography? Multiply your body font size by 1.618 for headings. Example: 16px body → 26px h2 → 42px h1. For a full scale, use the Typography Scale tool with the 1.618 ratio.
Q: What is a golden rectangle?
What is a golden rectangle? A rectangle whose sides are in the 1:1.618 ratio. Removing a square from it leaves a smaller golden rectangle — this self-similarity is why designers use it for grids and compositions.
Q: Do professional designers actually use the golden ratio?
Do professional designers actually use the golden ratio? Yes — logo designers and editorial layout artists use it as a starting grid. It is a tool for harmony, not a law; great designs sometimes deliberately break it.
CSS Named Colors & Color Psychology
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.
Coral #FF7F50Warm and friendly — popular for CTAs in lifestyle brands
Tomato #FF6347Energetic red-orange, great for urgent accents
Goldenrod #DAA520Earthy gold associated with quality and heritage
Teal #008080Balanced blue-green — calm, trustworthy, professional
Indigo #4B0082Deep violet tied to wisdom and premium brands
Crimson #DC143CBold red for passion, alerts, and strong emphasis
SlateBlue #6A5ACDSoft purple-blue common in SaaS dashboards
ForestGreen #228B22Nature and growth — the color of eco and finance brands
HotPink #FF69B4Playful and bold, the signature of youth-oriented design
Navy #000080Authority and stability — the suit-and-tie of colors
Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.