Curry Sauce to Zoodles Gradient
CSS
background: linear-gradient(90deg, #be9e6f 0%, #b8bf71 100%);
From Curry Sauce (#BE9E6F) to Zoodles (#B8BF71). 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 | |
|---|---|---|---|---|---|
| Curry Sauce | #BE9E6F | 190, 158, 111 | 36°, 38%, 59% | 0, 17, 42, 25 | |
| 25% (near Curry Sauce) | #BDA670 | 189, 166, 112 | 42°, 37%, 59% | 0, 12, 41, 26 | |
| 50% (near Motherland) | #BBAF70 | 187, 175, 112 | 50°, 36%, 59% | 0, 6, 40, 27 | |
| 75% (near Savannah Grass) | #BAB771 | 186, 183, 113 | 58°, 35%, 59% | 0, 2, 39, 27 | |
| Zoodles | #B8BF71 | 184, 191, 113 | 65°, 38%, 60% | 4, 0, 41, 25 |
Halfway along, the gradient is #BBAF70, closest to the named color Motherland. 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.29:1, so the change is gentle.
Other ways to use it
- Top to bottom:
linear-gradient(180deg, #be9e6f, #b8bf71) - Diagonal:
linear-gradient(135deg, #be9e6f, #b8bf71) - Radial, from the center out:
radial-gradient(circle, #be9e6f, #b8bf71) - Tailwind CSS:
bg-gradient-to-r from-[#be9e6f] to-[#b8bf71]
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 Curry Sauce to Zoodles gradient?
It starts at #BE9E6F (Curry Sauce) and ends at #B8BF71 (Zoodles), with #BBAF70 in the middle.
How do I reverse the gradient?
Swap the two colors or change the angle from 90deg to 270deg: linear-gradient(270deg, #be9e6f, #b8bf71) runs from Zoodles on the left to Curry Sauce on the right.