Colour to colour
Blush Pink to Sky Blue gradient
Blush Pink (#e8b4b8) into Sky Blue (#87ceeb) — 148° 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 148° > 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, #e8b4b8 0%, #87ceeb 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, #e8b4b8 0%, #87ceeb 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, #e8b4b8 0%, #e8b4b9 8.28%, #e7b3be 16.03%, #e6b3c5 23.35%, #e3b3ce 30.32%, #ddb4d8 37.03%, #d4b6e2 43.56%, #c9b9eb 50%, #bcbdf2 56.44%, #aec1f5 62.97%, #a1c6f5 69.68%, #96c9f2 76.65%, #8eccef 83.97%, #89cdec 91.72%, #87ceeb 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: #bec2d2; background-image: radial-gradient(circle farthest-corner at 42.39% 72.69%, rgba(135, 206, 235, 0.843) 0%, rgba(135, 206, 235, 0) 48.87%), radial-gradient(circle farthest-corner at 79.83% 51.92%, rgba(232, 180, 184, 0.853) 0%, rgba(232, 180, 184, 0) 49.27%); background-image: radial-gradient(circle farthest-corner at 42.39% 72.69%, oklch(from #87ceeb l c h / 0.8433) 0%, rgb(from #87ceeb r g b / 0) 48.87%), radial-gradient(circle farthest-corner at 79.83% 51.92%, oklch(from #e8b4b8 l c h / 0.8528) 0%, rgb(from #e8b4b8 r g b / 0) 49.27%);
Report
- white ink: worst 1.74:1 at 99% (fails AA); black ink: worst 11.55:1 at 24% (AA) → use black text.
- Banding high: ~15px bands at 1440px — add grain 31 (≈2% soft-light noise) or shorten the ramp.
Export
.gradient {
background-image: linear-gradient(135deg, #e8b4b8 0%, #e7b3bf 7.14%, #e5b3c7 14.29%, #e2b3cf 21.43%, #ddb4d7 28.57%, #d8b5df 35.71%, #d1b7e5 42.86%, #c9b9eb 50%, #c1bcf0 57.14%, #b7bff3 64.29%, #aec2f5 71.43%, #a3c5f5 78.57%, #99c8f3 85.71%, #90cbf0 92.86%, #87ceeb 100%);
background-image: linear-gradient(135deg in oklch shorter hue, #e8b4b8 0%, #87ceeb 100%);
}bg-linear-to-br/oklch from-[#e8b4b8] to-[#87ceeb]
<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="#e8b4b8"/><stop offset="7.14%" stop-color="#e7b3bf"/><stop offset="14.29%" stop-color="#e5b3c7"/><stop offset="21.43%" stop-color="#e2b3cf"/><stop offset="28.57%" stop-color="#ddb4d7"/><stop offset="35.71%" stop-color="#d8b5df"/><stop offset="42.86%" stop-color="#d1b7e5"/><stop offset="50%" stop-color="#c9b9eb"/><stop offset="57.14%" stop-color="#c1bcf0"/><stop offset="64.29%" stop-color="#b7bff3"/><stop offset="71.43%" stop-color="#aec2f5"/><stop offset="78.57%" stop-color="#a3c5f5"/><stop offset="85.71%" stop-color="#99c8f3"/><stop offset="92.86%" stop-color="#90cbf0"/><stop offset="100%" stop-color="#87ceeb"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
{
"blush-pink-to-skyblue": {
"$type": "gradient",
"$value": [
{
"color": {
"colorSpace": "srgb",
"components": [
0.91,
0.706,
0.722
],
"hex": "#e8b4b8"
},
"position": 0
},
{
"color": {
"colorSpace": "srgb",
"components": [
0.529,
0.808,
0.922
],
"hex": "#87ceeb"
},
"position": 1
}
],
"$extensions": {
"com.brandsweets": {
"kind": "linear",
"css": "linear-gradient(135deg in oklch shorter hue, #e8b4b8 0%, #87ceeb 100%)",
"interpolation": "oklch",
"hue": "shorter",
"angle": 135,
"name": "blush-pink-to-skyblue",
"contrast": {
"white": {
"ratio": 1.737,
"at": 0.9939,
"passesAA": false,
"passesAALarge": false
},
"black": {
"ratio": 11.548,
"at": 0.2381,
"passesAA": true,
"passesAALarge": true
},
"suggestedInk": "#000000"
}
}
},
"$description": "Blush Pink to Sky Blue, interpolated in oklch."
}
}More from Blush 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 blush pink to sky blue 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