Named gradient · uiGradients

After the Rain

After the Rain is a pink gradient from uiGradients (MIT) — #ff75c3 → #ffa647 → #ffe83f → #9fff5b → #70e2ff → #cd93ff 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.

#ff75c3 #ffa647 #ffe83f #9fff5b #70e2ff #cd93ff

Open in the maker Original sRGB in the maker

Aa — the quick brown fox

black text · worst 8.59:1 · AA

white 1.24 failsblack 8.59 AAbanding medium

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.

sRGB57%

OKLab52%

OKLCH57%

Report

white ink: worst 1.24:1 at 55% (fails AA); black ink: worst 8.59:1 at 0% (AA) → use black text.
Banding medium: ~4px bands at 1440px — add grain 5 (≈1% soft-light noise) or shorten the ramp.

Export

css

.gradient {
  background-image: linear-gradient(90deg, #ff75c3 0%, #ff7abc 1.43%, #ff7eb5 2.86%, #ff82ae 4.29%, #ff86a7 5.71%, #ff8aa0 7.14%, #ff8d98 8.57%, #ff9190 10%, #ff9488 11.43%, #ff977f 12.86%, #ff9a76 14.29%, #ff9d6c 15.71%, #ffa061 17.14%, #ffa355 18.57%, #ffa647 20%, #ffab47 21.43%, #ffb047 22.86%, #ffb446 24.29%, #ffb946 25.71%, #ffbe45 27.14%, #ffc345 28.57%, #ffc744 30%, #ffcc44 31.43%, #ffd143 32.86%, #ffd542 34.29%, #ffda42 35.71%, #ffdf41 37.14%, #ffe340 38.57%, #ffe83f 40%, #f9ea41 41.43%, #f4ec44 42.86%, #eeed46 44.29%, #e8ef48 45.71%, #e1f14a 47.14%, #dbf34c 48.57%, #d4f44e 50%, #cef650 51.43%, #c7f852 52.86%, #bff954 54.29%, #b8fb56 55.71%, #b0fc58 57.14%, #a8fe59 58.57%, #9fff5b 60%, #9bfd6e 61.43%, #98fc7e 62.86%, #94fa8c 64.29%, #90f899 65.71%, #8df6a5 67.14%, #89f5b0 68.57%, #86f3bb 70%, #82f0c6 71.43%, #7feed0 72.86%, #7cecda 74.29%, #79eae3 75.71%, #76e7ed 77.14%, #73e5f6 78.57%, #70e2ff 80%, #7cddff 81.43%, #86d8ff 82.86%, #8fd2ff 84.29%, #97cdff 85.71%, #9ec8ff 87.14%, #a5c2ff 88.57%, #abbdff 90%, #b1b7ff 91.43%, #b7b1ff 92.86%, #bcacff 94.29%, #c0a6ff 95.71%, #c5a0ff 97.14%, #c999ff 98.57%, #cd93ff 100%);
  background-image: linear-gradient(90deg in oklab, #ff75c3 0%, #ffa647 20%, #ffe83f 40%, #9fff5b 60%, #70e2ff 80%, #cd93ff 100%);
}

tailwind v4

bg-[linear-gradient(90deg_in_oklab,#ff75c3_0%,#ffa647_20%,#ffe83f_40%,#9fff5b_60%,#70e2ff_80%,#cd93ff_100%)]

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="#ff75c3"/><stop offset="1.43%" stop-color="#ff7abc"/><stop offset="2.86%" stop-color="#ff7eb5"/><stop offset="4.29%" stop-color="#ff82ae"/><stop offset="5.71%" stop-color="#ff86a7"/><stop offset="7.14%" stop-color="#ff8aa0"/><stop offset="8.57%" stop-color="#ff8d98"/><stop offset="10%" stop-color="#ff9190"/><stop offset="11.43%" stop-color="#ff9488"/><stop offset="12.86%" stop-color="#ff977f"/><stop offset="14.29%" stop-color="#ff9a76"/><stop offset="15.71%" stop-color="#ff9d6c"/><stop offset="17.14%" stop-color="#ffa061"/><stop offset="18.57%" stop-color="#ffa355"/><stop offset="20%" stop-color="#ffa647"/><stop offset="21.43%" stop-color="#ffab47"/><stop offset="22.86%" stop-color="#ffb047"/><stop offset="24.29%" stop-color="#ffb446"/><stop offset="25.71%" stop-color="#ffb946"/><stop offset="27.14%" stop-color="#ffbe45"/><stop offset="28.57%" stop-color="#ffc345"/><stop offset="30%" stop-color="#ffc744"/><stop offset="31.43%" stop-color="#ffcc44"/><stop offset="32.86%" stop-color="#ffd143"/><stop offset="34.29%" stop-color="#ffd542"/><stop offset="35.71%" stop-color="#ffda42"/><stop offset="37.14%" stop-color="#ffdf41"/><stop offset="38.57%" stop-color="#ffe340"/><stop offset="40%" stop-color="#ffe83f"/><stop offset="41.43%" stop-color="#f9ea41"/><stop offset="42.86%" stop-color="#f4ec44"/><stop offset="44.29%" stop-color="#eeed46"/><stop offset="45.71%" stop-color="#e8ef48"/><stop offset="47.14%" stop-color="#e1f14a"/><stop offset="48.57%" stop-color="#dbf34c"/><stop offset="50%" stop-color="#d4f44e"/><stop offset="51.43%" stop-color="#cef650"/><stop offset="52.86%" stop-color="#c7f852"/><stop offset="54.29%" stop-color="#bff954"/><stop offset="55.71%" stop-color="#b8fb56"/><stop offset="57.14%" stop-color="#b0fc58"/><stop offset="58.57%" stop-color="#a8fe59"/><stop offset="60%" stop-color="#9fff5b"/><stop offset="61.43%" stop-color="#9bfd6e"/><stop offset="62.86%" stop-color="#98fc7e"/><stop offset="64.29%" stop-color="#94fa8c"/><stop offset="65.71%" stop-color="#90f899"/><stop offset="67.14%" stop-color="#8df6a5"/><stop offset="68.57%" stop-color="#89f5b0"/><stop offset="70%" stop-color="#86f3bb"/><stop offset="71.43%" stop-color="#82f0c6"/><stop offset="72.86%" stop-color="#7feed0"/><stop offset="74.29%" stop-color="#7cecda"/><stop offset="75.71%" stop-color="#79eae3"/><stop offset="77.14%" stop-color="#76e7ed"/><stop offset="78.57%" stop-color="#73e5f6"/><stop offset="80%" stop-color="#70e2ff"/><stop offset="81.43%" stop-color="#7cddff"/><stop offset="82.86%" stop-color="#86d8ff"/><stop offset="84.29%" stop-color="#8fd2ff"/><stop offset="85.71%" stop-color="#97cdff"/><stop offset="87.14%" stop-color="#9ec8ff"/><stop offset="88.57%" stop-color="#a5c2ff"/><stop offset="90%" stop-color="#abbdff"/><stop offset="91.43%" stop-color="#b1b7ff"/><stop offset="92.86%" stop-color="#b7b1ff"/><stop offset="94.29%" stop-color="#bcacff"/><stop offset="95.71%" stop-color="#c0a6ff"/><stop offset="97.14%" stop-color="#c5a0ff"/><stop offset="98.57%" stop-color="#c999ff"/><stop offset="100%" stop-color="#cd93ff"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg

{
  "after-the-rain": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.459,
            0.765
          ],
          "hex": "#ff75c3"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.651,
            0.278
          ],
          "hex": "#ffa647"
        },
        "position": 0.2
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.91,
            0.247
          ],
          "hex": "#ffe83f"
        },
        "position": 0.4
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.624,
            1,
            0.357
          ],
          "hex": "#9fff5b"
        },
        "position": 0.6
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.439,
            0.886,
            1
          ],
          "hex": "#70e2ff"
        },
        "position": 0.8
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.804,
            0.576,
            1
          ],
          "hex": "#cd93ff"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(90deg in oklab, #ff75c3 0%, #ffa647 20%, #ffe83f 40%, #9fff5b 60%, #70e2ff 80%, #cd93ff 100%)",
        "interpolation": "oklab",
        "angle": 90,
        "name": "After the Rain",
        "contrast": {
          "white": {
            "ratio": 1.238,
            "at": 0.5485,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 8.585,
            "at": 0,
            "passesAA": true,
            "passesAALarge": true
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "After the Rain (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 After the Rain gradient (#ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff, #cd93ff), 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