brandsweets

Named gradient · WebGradients

Teen Party

Teen Party is a purple gradient from WebGradients (MIT) — #ff057c → #8d0b93 → #321575 at 135°. Shown here interpolated in OKLab, next to the original sRGB, with the worst-case contrast for white and black text and every export.

#ff057c#8d0b93#321575
Open in the makerOriginal sRGB in the maker
Aa — the quick brown fox
white text · worst 3.77:1 · AA large
white 3.77 AA largeblack 1.50 failsbanding 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.

sRGB73%
OKLab73%
OKLCH73%

Report

  • white ink: worst 3.77:1 at 0% (AA-large only); black ink: worst 1.50:1 at 100% (fails AA) → use white 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 medium: ~8px bands at 1440px — add grain 15 (≈2% soft-light noise) or shorten the ramp.

Export

css
.gradient {
  background-image: linear-gradient(135deg, #ff057c 0%, #f60c7e 3.57%, #ee1181 7.14%, #e51483 10.71%, #dd1785 14.29%, #d51887 17.86%, #cc1989 21.43%, #c4198a 25%, #bc198c 28.57%, #b4188d 32.14%, #ac178e 35.71%, #a41590 39.29%, #9c1391 42.86%, #950f92 46.43%, #8d0b93 50%, #860f91 53.57%, #80128f 57.14%, #79148d 60.71%, #72168a 64.29%, #6c1788 67.86%, #651886 71.43%, #5f1884 75%, #581982 78.57%, #521980 82.14%, #4c187e 85.71%, #45187b 89.29%, #3f1779 92.86%, #381677 96.43%, #321575 100%);
  background-image: linear-gradient(135deg in oklab, #ff057c 0%, #8d0b93 50%, #321575 100%);
}
tailwind v4
bg-linear-to-br/oklab from-[#ff057c] via-[#8d0b93] to-[#321575]
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="210" y1="-210" x2="1230" y2="810"><stop offset="0%" stop-color="#ff057c"/><stop offset="3.57%" stop-color="#f60c7e"/><stop offset="7.14%" stop-color="#ee1181"/><stop offset="10.71%" stop-color="#e51483"/><stop offset="14.29%" stop-color="#dd1785"/><stop offset="17.86%" stop-color="#d51887"/><stop offset="21.43%" stop-color="#cc1989"/><stop offset="25%" stop-color="#c4198a"/><stop offset="28.57%" stop-color="#bc198c"/><stop offset="32.14%" stop-color="#b4188d"/><stop offset="35.71%" stop-color="#ac178e"/><stop offset="39.29%" stop-color="#a41590"/><stop offset="42.86%" stop-color="#9c1391"/><stop offset="46.43%" stop-color="#950f92"/><stop offset="50%" stop-color="#8d0b93"/><stop offset="53.57%" stop-color="#860f91"/><stop offset="57.14%" stop-color="#80128f"/><stop offset="60.71%" stop-color="#79148d"/><stop offset="64.29%" stop-color="#72168a"/><stop offset="67.86%" stop-color="#6c1788"/><stop offset="71.43%" stop-color="#651886"/><stop offset="75%" stop-color="#5f1884"/><stop offset="78.57%" stop-color="#581982"/><stop offset="82.14%" stop-color="#521980"/><stop offset="85.71%" stop-color="#4c187e"/><stop offset="89.29%" stop-color="#45187b"/><stop offset="92.86%" stop-color="#3f1779"/><stop offset="96.43%" stop-color="#381677"/><stop offset="100%" stop-color="#321575"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
  "teen-party": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.02,
            0.486
          ],
          "hex": "#ff057c"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.553,
            0.043,
            0.576
          ],
          "hex": "#8d0b93"
        },
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.196,
            0.082,
            0.459
          ],
          "hex": "#321575"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(135deg in oklab, #ff057c 0%, #8d0b93 50%, #321575 100%)",
        "interpolation": "oklab",
        "angle": 135,
        "name": "Teen Party",
        "contrast": {
          "white": {
            "ratio": 3.774,
            "at": 0,
            "passesAA": false,
            "passesAALarge": true
          },
          "black": {
            "ratio": 1.5,
            "at": 1,
            "passesAA": false,
            "passesAALarge": false
          },
          "suggestedInk": "#ffffff"
        }
      }
    },
    "$description": "Teen Party (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

Purple gradientsPink gradientsVivid

More purple gradients

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 Teen Party gradient (#ff057c, #8d0b93, #321575), 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