Named gradient · uiGradients

Memariani

Memariani is a pink gradient from uiGradients (MIT) — #aa4b6b → #6b6b83 → #3b8d99 at 90°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#aa4b6b #6b6b83 #3b8d99

Open in the maker Original sRGB in the maker

Aa — the quick brown fox

black text · worst 3.91:1 · AA large

white 3.85 AA largeblack 3.91 AA largebanding 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.

sRGB34%

OKLab34%

OKLCH36%

Report

white ink: worst 3.85:1 at 100% (AA-large only); black ink: worst 3.91:1 at 1% (AA-large only) → use black text.
Body text fails AA everywhere on this gradient; large text (≥24px / 19px bold) is fine. Add a scrim or lower the chroma for body copy.
Banding high: ~15px bands at 1440px — add grain 31 (≈2% soft-light noise) or shorten the ramp.

Export

css

.gradient {
  background-image: linear-gradient(90deg, #aa4b6b 0%, #a64e6d 3.57%, #a2516f 7.14%, #9e5470 10.71%, #9a5772 14.29%, #965974 17.86%, #925b75 21.43%, #8d5e77 25%, #896079 28.57%, #84627b 32.14%, #80647c 35.71%, #7b667e 39.29%, #766880 42.86%, #706981 46.43%, #6b6b83 50%, #696e85 53.57%, #677086 57.14%, #647288 60.71%, #627589 64.29%, #5f778b 67.86%, #5c7a8c 71.43%, #597c8e 75%, #567f8f 78.57%, #528191 82.14%, #4f8393 85.71%, #4a8694 89.29%, #468896 92.86%, #418b97 96.43%, #3b8d99 100%);
  background-image: linear-gradient(90deg in oklab, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%);
}

tailwind v4

bg-linear-to-r/oklab from-[#aa4b6b] via-[#6b6b83] to-[#3b8d99]

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="0" y1="300" x2="1440" y2="300"><stop offset="0%" stop-color="#aa4b6b"/><stop offset="3.57%" stop-color="#a64e6d"/><stop offset="7.14%" stop-color="#a2516f"/><stop offset="10.71%" stop-color="#9e5470"/><stop offset="14.29%" stop-color="#9a5772"/><stop offset="17.86%" stop-color="#965974"/><stop offset="21.43%" stop-color="#925b75"/><stop offset="25%" stop-color="#8d5e77"/><stop offset="28.57%" stop-color="#896079"/><stop offset="32.14%" stop-color="#84627b"/><stop offset="35.71%" stop-color="#80647c"/><stop offset="39.29%" stop-color="#7b667e"/><stop offset="42.86%" stop-color="#766880"/><stop offset="46.43%" stop-color="#706981"/><stop offset="50%" stop-color="#6b6b83"/><stop offset="53.57%" stop-color="#696e85"/><stop offset="57.14%" stop-color="#677086"/><stop offset="60.71%" stop-color="#647288"/><stop offset="64.29%" stop-color="#627589"/><stop offset="67.86%" stop-color="#5f778b"/><stop offset="71.43%" stop-color="#5c7a8c"/><stop offset="75%" stop-color="#597c8e"/><stop offset="78.57%" stop-color="#567f8f"/><stop offset="82.14%" stop-color="#528191"/><stop offset="85.71%" stop-color="#4f8393"/><stop offset="89.29%" stop-color="#4a8694"/><stop offset="92.86%" stop-color="#468896"/><stop offset="96.43%" stop-color="#418b97"/><stop offset="100%" stop-color="#3b8d99"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg

{
  "memariani": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.667,
            0.294,
            0.42
          ],
          "hex": "#aa4b6b"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.42,
            0.42,
            0.514
          ],
          "hex": "#6b6b83"
        },
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.231,
            0.553,
            0.6
          ],
          "hex": "#3b8d99"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(90deg in oklab, #aa4b6b 0%, #6b6b83 50%, #3b8d99 100%)",
        "interpolation": "oklab",
        "angle": 90,
        "name": "Memariani",
        "contrast": {
          "white": {
            "ratio": 3.845,
            "at": 0.9971,
            "passesAA": false,
            "passesAALarge": true
          },
          "black": {
            "ratio": 3.906,
            "at": 0.0055,
            "passesAA": false,
            "passesAALarge": true
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "Memariani (uiGradients, MIT), rendered in OKLab."
  }
}

Tagged

white 1.06 failsblack 9.08 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 Memariani gradient (#aa4b6b, #6b6b83, #3b8d99), 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 uiGradients (MIT) — licences