Powdered Camellia gradient
A 3-color linear CSS gradient from #FCD6CE to #A4D1C0, interpolated in OKLCH so the middle stays vivid.
Stops
| HEX | RGB | OKLCH | Position |
|---|---|---|---|
| #FCD6CE | rgb(252, 214, 206) | oklch(90.6% 0.044 31.9) | 0% |
| #DCBEDA | rgb(220, 190, 218) | oklch(83.6% 0.051 328.1) | 50% |
| #A4D1C0 | rgb(164, 209, 192) | oklch(82.4% 0.053 169.9) | 100% |
CSS
The first declaration is a plain sRGB gradient for every browser. The second interpolates in OKLCH, which keeps the middle as vivid as the ends.
background: linear-gradient(90deg, #FCD6CE, #DCBEDA, #A4D1C0); background: linear-gradient(90deg in oklch, #FCD6CE, #DCBEDA, #A4D1C0);
Tailwind CSS v4
bg-linear-90/oklch from-[#FCD6CE] via-[#DCBEDA] to-[#A4D1C0]
Make it your own
Change the stops, angle and type in the Gradient Maker, or turn the stops into a palette.
Related gradients
- Pale Olive Grovelinear-gradient(0deg, #E1EFC7, #AFD8C5, #9DC6CB)
- Powdered Wisterialinear-gradient(200deg, #FFC3CD, #F1E5FF, #95DBD7)
- Gentle Harbourlinear-gradient(0deg, #A9E3E0, #CAE6FF, #DEBAC5)
- Sheer Arcticlinear-gradient(225deg, #D6F6FF, #BFD5C5, #D4B1CB)
- Milky Sapphirelinear-gradient(270deg, #E3BCEE, #BED2FF, #93D8C9)
- Pale Violet Hourlinear-gradient(200deg, #FFE8EF, #C6BFEB)
- Powdered Raspberrylinear-gradient(315deg, #FFEDDD, #EFB0CA, #D3EFFF)
- Silken Apricotlinear-gradient(225deg, #E4DBA4, #FFD1D4, #D4EDFF)