Augustus Asparagus to Botanical Garden Gradient
CSS
background: linear-gradient(90deg, #90aa0b 0%, #44aa11 100%);
From Augustus Asparagus (#90AA0B) to Botanical Garden (#44AA11). 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 | |
|---|---|---|---|---|---|
| Augustus Asparagus | #90AA0B | 144, 170, 11 | 70°, 88%, 35% | 15, 0, 94, 33 | |
| 25% (near Gameboy Screen) | #7DAA0D | 125, 170, 13 | 77°, 86%, 36% | 26, 0, 92, 33 | |
| 50% (near Extra Life) | #6AAA0E | 106, 170, 14 | 85°, 85%, 36% | 38, 0, 92, 33 | |
| 75% (near Ruminant’s Paradise) | #57AA10 | 87, 170, 16 | 92°, 83%, 36% | 49, 0, 91, 33 | |
| Botanical Garden | #44AA11 | 68, 170, 17 | 100°, 82%, 37% | 60, 0, 90, 33 |
Halfway along, the gradient is #6AAA0E, closest to the named color Extra Life. 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.13:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #90aa0b, #44aa11) - Diagonal:
linear-gradient(135deg, #90aa0b, #44aa11) - Radial, from the center out:
radial-gradient(circle, #90aa0b, #44aa11) - Tailwind CSS:
bg-gradient-to-r from-[#90aa0b] to-[#44aa11]
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 Augustus Asparagus to Botanical Garden gradient?
It starts at #90AA0B (Augustus Asparagus) and ends at #44AA11 (Botanical Garden), with #6AAA0E in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #90aa0b, #44aa11) runs from Botanical Garden on the left to Augustus Asparagus on the right.