NodlumeWarm · Linear
Peach gradient
Peach is a two-stop ramp from a pale apricot to a coral, and its whole character is restraint: both ends sit close on the wheel and close in lightness, so the gradient is almost a single color that happens to breathe. That is exactly what a large surface wants. A background that changes a little across the viewport reads as depth; one that changes a lot reads as decoration.
It suits product marketing for anything that wants to feel handmade or edible — food, cosmetics, stationery — and it carries dark text at every point. Avoid it behind coral-colored buttons, where the accent disappears into its own background; a deep teal or navy button on Peach is the classic complement.
Card on the gradient
Reading-size text, for contrast.
Gradient border
A solid over the padding box, the gradient under the border box.
Colors
- #fed7aa0%
- #fb7185100%
CSS
.peach {
background-image: linear-gradient(135deg in oklab, #fed7aa 0%, #fb7185 100%);
}Tailwind
bg-[image:linear-gradient(135deg_in_oklab,_#fed7aa_0%,_#fb7185_100%)]
Token
--gradient-peach: linear-gradient(135deg in oklab, #fed7aa 0%, #fb7185 100%);
Peach, answered
- What are the CSS colors in the Peach gradient?
- Peach uses 2 colors: #fed7aa, #fb7185. It is a linear gradient, so the angle sets which way it runs. The full value is linear-gradient(135deg in oklab, #fed7aa 0%, #fb7185 100%) — copy the CSS rule, the Tailwind class or the custom property above, or open it in the playground to change any stop.
- How do I use the Peach gradient in Tailwind CSS?
- Copy the Tailwind tab: it is an arbitrary-value class of the form bg-[image:…], with the spaces in the gradient written as underscores, which Tailwind v3 and v4 both accept for a one-off value. For a value you reuse across the site, register the Token tab's custom property in your theme instead and reference it from a utility.
- Why is the Peach gradient interpolated in oklab?
- Two colors interpolated in sRGB pass through a grayer, darker middle than either end; in oklab the midpoint is perceptually between them, so the ramp stays clean. Every gradient function accepts an in <space> keyword, and oklab is the right default for a color-to-color ramp.