Named gradient · WebGradients

Lady Lips

Lady Lips is a pink gradient from WebGradients (MIT) — #ff9a9e → #fecfef → #fecfef at 0°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#ff9a9e #fecfef #fecfef

Open in the maker Original sRGB in the maker

Aa — the quick brown fox

black text · worst 10.37:1 · AA

white 1.36 failsblack 10.37 AAbanding high

Same stops, three spaces

The source renders this in sRGB. The number is how much chroma survives at the dullest point along the line — the difference between the first bar and the others is the grey that OKLab removes.

sRGB71%

OKLab71%

OKLCH71%

Report

white ink: worst 1.36:1 at 98% (fails AA); black ink: worst 10.37:1 at 0% (AA) → use black text.
Banding high: ~18px bands at 1440px — add grain 36 (≈2% soft-light noise) or shorten the ramp.

Export

css

.gradient {
  background-image: linear-gradient(0deg, #ff9a9e 0%, #ff9ea4 7.07%, #ffa2aa 14.14%, #ffa6af 21.21%, #ffaab5 28.29%, #ffadbb 35.36%, #ffb1c1 42.43%, #ffb5c6 49.5%, #ffb9cc 56.57%, #ffbdd2 63.64%, #ffc0d8 70.71%, #ffc4de 77.79%, #ffc8e3 84.86%, #fecbe9 91.93%, #fecfef 99%, #fecfef 99.07%, #fecfef 99.14%, #fecfef 99.21%, #fecfef 99.29%, #fecfef 99.36%, #fecfef 99.43%, #fecfef 99.5%, #fecfef 99.57%, #fecfef 99.64%, #fecfef 99.71%, #fecfef 99.79%, #fecfef 99.86%, #fecfef 99.93%, #fecfef 100%);
  background-image: linear-gradient(0deg in oklab, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

tailwind v4

bg-linear-to-t/oklab from-[#ff9a9e] via-[#fecfef] via-99% to-[#fecfef]

svg

<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="720" y1="600" x2="720" y2="0"><stop offset="0%" stop-color="#ff9a9e"/><stop offset="7.07%" stop-color="#ff9ea4"/><stop offset="14.14%" stop-color="#ffa2aa"/><stop offset="21.21%" stop-color="#ffa6af"/><stop offset="28.29%" stop-color="#ffaab5"/><stop offset="35.36%" stop-color="#ffadbb"/><stop offset="42.43%" stop-color="#ffb1c1"/><stop offset="49.5%" stop-color="#ffb5c6"/><stop offset="56.57%" stop-color="#ffb9cc"/><stop offset="63.64%" stop-color="#ffbdd2"/><stop offset="70.71%" stop-color="#ffc0d8"/><stop offset="77.79%" stop-color="#ffc4de"/><stop offset="84.86%" stop-color="#ffc8e3"/><stop offset="91.93%" stop-color="#fecbe9"/><stop offset="99%" stop-color="#fecfef"/><stop offset="99.07%" stop-color="#fecfef"/><stop offset="99.14%" stop-color="#fecfef"/><stop offset="99.21%" stop-color="#fecfef"/><stop offset="99.29%" stop-color="#fecfef"/><stop offset="99.36%" stop-color="#fecfef"/><stop offset="99.43%" stop-color="#fecfef"/><stop offset="99.5%" stop-color="#fecfef"/><stop offset="99.57%" stop-color="#fecfef"/><stop offset="99.64%" stop-color="#fecfef"/><stop offset="99.71%" stop-color="#fecfef"/><stop offset="99.79%" stop-color="#fecfef"/><stop offset="99.86%" stop-color="#fecfef"/><stop offset="99.93%" stop-color="#fecfef"/><stop offset="100%" stop-color="#fecfef"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg

{
  "lady-lips": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.604,
            0.62
          ],
          "hex": "#ff9a9e"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.996,
            0.812,
            0.937
          ],
          "hex": "#fecfef"
        },
        "position": 0.99
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.996,
            0.812,
            0.937
          ],
          "hex": "#fecfef"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(0deg in oklab, #ff9a9e 0%, #fecfef 99%, #fecfef 100%)",
        "interpolation": "oklab",
        "angle": 0,
        "name": "Lady Lips",
        "contrast": {
          "white": {
            "ratio": 1.365,
            "at": 0.9841,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 10.368,
            "at": 0,
            "passesAA": true,
            "passesAALarge": true
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "Lady Lips (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

white 1.60 failsblack 11.29 AA

Open in maker →

mcpConnect your agent to the gradient engine

live endpoint

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.

endpointhttps://mcp.brandsweets.com/gradients/mcp

claude mcp add --transport http brandsweets-gradients https://mcp.brandsweets.com/gradients/mcp

try this prompt

›take the Lady Lips gradient (#ff9a9e, #fecfef, #fecfef), re-interpolate it in oklch, and tell me the worst-case contrast for white text

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

Machine-readable: gradients.md · From WebGradients (MIT) — licences