Colour to colour
Hot Pink to Light Sea Green gradient
Hot Pink (#ff69b4) into Light Sea Green (#20b2aa) — 163° apart on the OKLCH hue wheel. Below: the same two stops interpolated in OKLab and in OKLCH, side by side, because the difference is real and most generators never let you see it; then an eased version and a mesh, each with the worst-case contrast for white and black text. The engine's own pick for this pair is oklch: ΔH 163° > 140° — interpolating in oklch (shorter hue) keeps the midpoint saturated.
OKLab and OKLCH, side by side
OKLab
Open in maker →A straight line through the a/b plane: the two hues meet halfway and desaturate a little at the midpoint. The safe default — it is what CSS and Tailwind default to.
linear-gradient(135deg in oklab, #ff69b4 0%, #20b2aa 100%)
OKLCH (shorter hue)
Open in maker →Chroma and hue interpolate separately, so the midpoint keeps its saturation and the hue travels the short way round the wheel — richer, and it can pass through hues neither colour has.
linear-gradient(135deg in oklch shorter hue, #ff69b4 0%, #20b2aa 100%)
And the sRGB line most tools draw, for comparison — the number is the chroma that survives at the dullest point.
Eased and mesh
Eased (soft)
Open in maker →A cubic-bezier(.4, 0, .6, 1) mix ratio baked into 15 stops: the transition lingers on each colour and moves faster through the middle, which is what makes a gradient read as designed rather than default.
linear-gradient(135deg in oklch shorter hue, #ff69b4 0%, #fc6ab9 8.28%, #f56dc6 16.03%, #e873d8 23.35%, #d57beb 30.32%, #bc84fa 37.03%, #9f8fff 43.56%, #7d9aff 50%, #58a3f9 56.44%, #2eabe9 62.97%, #00afd7 69.68%, #00b2c5 76.65%, #00b2b7 83.97%, #18b2ad 91.72%, #20b2aa 100%)
Mesh
Open in maker →Both colours as stacked radials over a base, laid out by a seeded Poisson-disc sampler — the same seed gives the same mesh forever. Exports as CSS, SVG and PNG.
background-color: #b397af; background-image: radial-gradient(circle farthest-corner at 12.59% 4.41%, rgba(255, 105, 180, 0.708) 0%, rgba(255, 105, 180, 0) 55.71%), radial-gradient(circle farthest-corner at 83.67% 22.3%, rgba(32, 178, 170, 0.723) 0%, rgba(32, 178, 170, 0) 45.62%); background-image: radial-gradient(circle farthest-corner at 12.59% 4.41%, oklch(from #ff69b4 l c h / 0.7075) 0%, rgb(from #ff69b4 r g b / 0) 55.71%), radial-gradient(circle farthest-corner at 83.67% 22.3%, oklch(from #20b2aa l c h / 0.7229) 0%, rgb(from #20b2aa r g b / 0) 45.62%);
Report
- white ink: worst 2.56:1 at 84% (fails AA); black ink: worst 7.81:1 at 39% (AA) → use black text.
- Banding medium: ~6px bands at 1440px — add grain 12 (≈1% soft-light noise) or shorten the ramp.
Export
.gradient {
background-image: linear-gradient(135deg, #ff69b4 0%, #f26fcb 7.14%, #e275de 14.29%, #d17cee 21.43%, #be84f9 28.57%, #aa8bff 35.71%, #9493ff 42.86%, #7d9aff 50%, #65a0fd 57.14%, #4aa6f4 64.29%, #2cabe8 71.43%, #00afda 78.57%, #00b1cb 85.71%, #00b2ba 92.86%, #20b2aa 100%);
background-image: linear-gradient(135deg in oklch shorter hue, #ff69b4 0%, #20b2aa 100%);
}bg-linear-to-br/oklch from-[#ff69b4] to-[#20b2aa]
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="600" viewBox="0 0 1440 600"><defs><linearGradient id="bs-gradient" gradientUnits="userSpaceOnUse" x1="210" y1="-210" x2="1230" y2="810"><stop offset="0%" stop-color="#ff69b4"/><stop offset="7.14%" stop-color="#f26fcb"/><stop offset="14.29%" stop-color="#e275de"/><stop offset="21.43%" stop-color="#d17cee"/><stop offset="28.57%" stop-color="#be84f9"/><stop offset="35.71%" stop-color="#aa8bff"/><stop offset="42.86%" stop-color="#9493ff"/><stop offset="50%" stop-color="#7d9aff"/><stop offset="57.14%" stop-color="#65a0fd"/><stop offset="64.29%" stop-color="#4aa6f4"/><stop offset="71.43%" stop-color="#2cabe8"/><stop offset="78.57%" stop-color="#00afda"/><stop offset="85.71%" stop-color="#00b1cb"/><stop offset="92.86%" stop-color="#00b2ba"/><stop offset="100%" stop-color="#20b2aa"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
{
"hotpink-to-lightseagreen": {
"$type": "gradient",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
1,
0.412,
0.706
],
"hex": "#ff69b4"
},
"position": 0
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.125,
0.698,
0.667
],
"hex": "#20b2aa"
},
"position": 1
}
],
"$extensions": {
"com.brandsweets": {
"kind": "linear",
"css": "linear-gradient(135deg in oklch shorter hue, #ff69b4 0%, #20b2aa 100%)",
"interpolation": "oklch",
"hue": "shorter",
"angle": 135,
"name": "hotpink-to-lightseagreen",
"contrast": {
"white": {
"ratio": 2.564,
"at": 0.8407,
"passesAA": false,
"passesAALarge": false
},
"black": {
"ratio": 7.808,
"at": 0.3895,
"passesAA": true,
"passesAALarge": true
},
"suggestedInk": "#000000"
}
}
},
"$description": "Hot Pink to Light Sea Green, interpolated in oklch."
}
}More from Hot Pink
Point any MCP client at the shared gradients endpoint and your agent gets the same engine as this page — make_gradient returns CSS with the interpolation space, Tailwind v4, SVG, a PNG URL, a DTCG token and the contrast report in one call; brand_gradients derives the whole contact sheet from a brand or a palette. Read-only, no key. Every gradient is a /gradients/new/… link: open it, refine, paste it back.
https://mcp.brandsweets.com/gradients/mcpclaude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp
›make a hot pink to light sea green hero gradient in oklch that passes AA for white text, with grain if it bands
Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.
Machine-readable: gradients.md