Loading…
Loading…
Split any length in the golden ratio (φ ≈ 1.618), scale by powers of φ, and see the golden rectangle.
Also covers: Phi calculator · Golden rectangle calculator
Any unit: px, cm, rem…
φ = (1 + √5) / 2 = 1.6180339887… Two lengths are in the golden ratio when the whole is to the longer part as the longer is to the shorter.
Split
593.313 + 366.687
Whole 960 · longer part 61.8% · shorter 38.2%
× φ (larger)
1,553.31
÷ φ (smaller)
593.313
Golden rectangle
960 × 593.313
Scale by powers of φ
| Step | Value |
|---|---|
| φ^−3 | 226.625 |
| φ^−2 | 366.687 |
| φ^−1 | 593.313 |
| base | 960 |
| φ^1 | 1,553.31 |
| φ^2 | 2,513.31 |
| φ^3 | 4,066.63 |
Useful for spacing or type scales with a golden-ratio rhythm (the type scale generator has φ as a ratio too).
Golden rectangle
And say whether it's the whole, the longer part or the shorter part.
Get both parts, the golden rectangle, and powers of φ for spacing or type.
φ = (1 + √5) / 2 ≈ 1.618. A line is split in the golden ratio when the whole is to the longer part as the longer part is to the shorter.
960 ÷ φ ≈ 593.3 for the main column and 366.7 for the sidebar.
It's a useful proportion, but plenty of great design doesn't use it — treat it as a starting point, not a rule.
Colour
Pick any colour with a saturation/brightness square, from anywhere on your screen (EyeDropper), or from a photo — and get it in HEX, RGB, HSL, OKLCH and more.
Colour
Convert any colour between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab and OKLCH, with the nearest CSS colour name.
Palettes
Build a palette from one colour — a 50–950 shade scale or complementary, analogous, triadic and other harmonies, worked out in OKLCH — and export CSS, Tailwind, SCSS or JSON.
Colour
Pull the main colours out of a photo or logo, with how much of the image each covers, and export them as CSS variables or JSON.
Accessibility
Check text and background colours against WCAG 2.2 AA and AAA, see the exact contrast ratio, and get the closest colour that passes.
CSS
Design linear, radial and conic CSS gradients with any number of colour stops and vivid OKLCH blending, and copy the CSS.