Faint Gold to Walk in the Park Gradient
CSS
background: linear-gradient(90deg, #b59410 0%, #88bb11 100%);
From Faint Gold (#B59410) to Walk in the Park (#88BB11). The two hues are 30° apart on the color wheel, close enough that the blend stays clean without a muddy middle.
Colors along the gradient
| Name | HEX | RGB | HSL | CMYK | |
|---|---|---|---|---|---|
| Faint Gold | #B59410 | 181, 148, 16 | 48°, 84%, 39% | 0, 18, 91, 29 | |
| 25% (near Lucky) | #AA9E10 | 170, 158, 16 | 55°, 83%, 36% | 0, 7, 91, 33 | |
| 50% (near Countryside) | #9FA811 | 159, 168, 17 | 64°, 82%, 36% | 5, 0, 90, 34 | |
| 75% (near Gameboy Screen) | #93B111 | 147, 177, 17 | 71°, 82%, 38% | 17, 0, 90, 31 | |
| Walk in the Park | #88BB11 | 136, 187, 17 | 78°, 83%, 40% | 27, 0, 91, 27 |
Halfway along, the gradient is #9FA811, closest to the named color Countryside. The stops are mixed in RGB, the way browsers draw a linear gradient by default.
Text on this gradient
Black text reads best on both ends, so one text color works across the whole gradient. The two end colors have a contrast ratio of 1.27:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #b59410, #88bb11) - Diagonal:
linear-gradient(135deg, #b59410, #88bb11) - Radial, from the center out:
radial-gradient(circle, #b59410, #88bb11) - Tailwind CSS:
bg-gradient-to-r from-[#b59410] to-[#88bb11]
Gradients like this work well for page headers, buttons, cards and slide backgrounds. Keep body text on a solid color for the best readability.
Questions
What are the HEX codes of the Faint Gold to Walk in the Park gradient?
It starts at #B59410 (Faint Gold) and ends at #88BB11 (Walk in the Park), with #9FA811 in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #b59410, #88bb11) runs from Walk in the Park on the left to Faint Gold on the right.