Named gradient · WebGradients

Sweet Period

Sweet Period is a purple gradient from WebGradients (MIT) — #3f51b1 → #5a55ae → #7b5fac → #8f6aae → #a86aa4 → #cc6b8e → #f18271 → #f3a469 → #f7c978 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.

#3f51b1 #5a55ae #7b5fac #8f6aae #a86aa4 #cc6b8e #f18271 #f3a469 #f7c978

Open in the maker

Aa — the quick brown fox

black text · worst 3.02:1 · AA large

white 1.55 failsblack 3.02 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.

sRGB81%

OKLab81%

OKLCH82%

Report

white ink: worst 1.55:1 at 100% (fails AA); black ink: worst 3.02:1 at 0% (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: ~9px bands at 1440px — add grain 19 (≈2% soft-light noise) or shorten the ramp.

Export

css

.gradient {
  background-image: linear-gradient(0deg, #3f51b1 0%, #4151b1 0.93%, #4352b1 1.86%, #4552b0 2.79%, #4752b0 3.71%, #4953b0 4.64%, #4b53b0 5.57%, #4d53b0 6.5%, #4f53af 7.43%, #5154af 8.36%, #5354af 9.29%, #5554af 10.21%, #5655ae 11.14%, #5855ae 12.07%, #5a55ae 13%, #5c56ae 13.86%, #5f57ae 14.71%, #6157ae 15.57%, #6458ae 16.43%, #6659ad 17.29%, #685aad 18.14%, #6b5aad 19%, #6d5bad 19.86%, #6f5cad 20.71%, #725cad 21.57%, #745dac 22.43%, #765eac 23.29%, #795eac 24.14%, #7b5fac 25%, #7c60ac 25.93%, #7e61ac 26.86%, #7f61ac 27.79%, #8162ad 28.71%, #8263ad 29.64%, #8464ad 30.57%, #8565ad 31.5%, #8665ad 32.43%, #8866ad 33.36%, #8967ad 34.29%, #8b68ae 35.21%, #8c68ae 36.14%, #8e69ae 37.07%, #8f6aae 38%, #916aad 38.86%, #936aad 39.71%, #946aac 40.57%, #966aab 41.43%, #986aaa 42.29%, #9a6aaa 43.14%, #9c6aa9 44%, #9d6aa8 44.86%, #9f6aa8 45.71%, #a16aa7 46.57%, #a36aa6 47.43%, #a46aa5 48.29%, #a66aa5 49.14%, #a86aa4 50%, #ab6aa3 50.86%, #ad6aa1 51.71%, #b06ba0 52.57%, #b26b9e 53.43%, #b56b9c 54.29%, #b76b9b 55.14%, #ba6b99 56%, #bd6b98 56.86%, #bf6b96 57.71%, #c26b95 58.57%, #c46b93 59.43%, #c76b91 60.29%, #c96b90 61.14%, #cc6b8e 62%, #cf6d8c 62.93%, #d16e8b 63.86%, #d47089 64.79%, #d67287 65.71%, #d97485 66.64%, #dc7583 67.57%, #de7781 68.5%, #e1787f 69.43%, #e47a7d 70.36%, #e67c7b 71.29%, #e97d78 72.21%, #ec7f76 73.14%, #ee8074 74.07%, #f18271 75%, #f18571 75.86%, #f18770 76.71%, #f28a70 77.57%, #f28c6f 78.43%, #f28e6f 79.29%, #f2916e 80.14%, #f2936d 81%, #f2966d 81.86%, #f3986c 82.71%, #f39b6c 83.57%, #f39d6b 84.43%, #f39f6a 85.29%, #f3a26a 86.14%, #f3a469 87%, #f3a76a 87.93%, #f4a96b 88.86%, #f4ac6c 89.79%, #f4af6d 90.71%, #f5b16e 91.64%, #f5b46f 92.57%, #f5b770 93.5%, #f6b972 94.43%, #f6bc73 95.36%, #f6bf74 96.29%, #f6c175 97.21%, #f7c476 98.14%, #f7c677 99.07%, #f7c978 100%);
  background-image: linear-gradient(0deg in oklab, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
}

tailwind v4

bg-[linear-gradient(0deg_in_oklab,#3f51b1_0%,#5a55ae_13%,#7b5fac_25%,#8f6aae_38%,#a86aa4_50%,#cc6b8e_62%,#f18271_75%,#f3a469_87%,#f7c978_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="720" y1="600" x2="720" y2="0"><stop offset="0%" stop-color="#3f51b1"/><stop offset="0.93%" stop-color="#4151b1"/><stop offset="1.86%" stop-color="#4352b1"/><stop offset="2.79%" stop-color="#4552b0"/><stop offset="3.71%" stop-color="#4752b0"/><stop offset="4.64%" stop-color="#4953b0"/><stop offset="5.57%" stop-color="#4b53b0"/><stop offset="6.5%" stop-color="#4d53b0"/><stop offset="7.43%" stop-color="#4f53af"/><stop offset="8.36%" stop-color="#5154af"/><stop offset="9.29%" stop-color="#5354af"/><stop offset="10.21%" stop-color="#5554af"/><stop offset="11.14%" stop-color="#5655ae"/><stop offset="12.07%" stop-color="#5855ae"/><stop offset="13%" stop-color="#5a55ae"/><stop offset="13.86%" stop-color="#5c56ae"/><stop offset="14.71%" stop-color="#5f57ae"/><stop offset="15.57%" stop-color="#6157ae"/><stop offset="16.43%" stop-color="#6458ae"/><stop offset="17.29%" stop-color="#6659ad"/><stop offset="18.14%" stop-color="#685aad"/><stop offset="19%" stop-color="#6b5aad"/><stop offset="19.86%" stop-color="#6d5bad"/><stop offset="20.71%" stop-color="#6f5cad"/><stop offset="21.57%" stop-color="#725cad"/><stop offset="22.43%" stop-color="#745dac"/><stop offset="23.29%" stop-color="#765eac"/><stop offset="24.14%" stop-color="#795eac"/><stop offset="25%" stop-color="#7b5fac"/><stop offset="25.93%" stop-color="#7c60ac"/><stop offset="26.86%" stop-color="#7e61ac"/><stop offset="27.79%" stop-color="#7f61ac"/><stop offset="28.71%" stop-color="#8162ad"/><stop offset="29.64%" stop-color="#8263ad"/><stop offset="30.57%" stop-color="#8464ad"/><stop offset="31.5%" stop-color="#8565ad"/><stop offset="32.43%" stop-color="#8665ad"/><stop offset="33.36%" stop-color="#8866ad"/><stop offset="34.29%" stop-color="#8967ad"/><stop offset="35.21%" stop-color="#8b68ae"/><stop offset="36.14%" stop-color="#8c68ae"/><stop offset="37.07%" stop-color="#8e69ae"/><stop offset="38%" stop-color="#8f6aae"/><stop offset="38.86%" stop-color="#916aad"/><stop offset="39.71%" stop-color="#936aad"/><stop offset="40.57%" stop-color="#946aac"/><stop offset="41.43%" stop-color="#966aab"/><stop offset="42.29%" stop-color="#986aaa"/><stop offset="43.14%" stop-color="#9a6aaa"/><stop offset="44%" stop-color="#9c6aa9"/><stop offset="44.86%" stop-color="#9d6aa8"/><stop offset="45.71%" stop-color="#9f6aa8"/><stop offset="46.57%" stop-color="#a16aa7"/><stop offset="47.43%" stop-color="#a36aa6"/><stop offset="48.29%" stop-color="#a46aa5"/><stop offset="49.14%" stop-color="#a66aa5"/><stop offset="50%" stop-color="#a86aa4"/><stop offset="50.86%" stop-color="#ab6aa3"/><stop offset="51.71%" stop-color="#ad6aa1"/><stop offset="52.57%" stop-color="#b06ba0"/><stop offset="53.43%" stop-color="#b26b9e"/><stop offset="54.29%" stop-color="#b56b9c"/><stop offset="55.14%" stop-color="#b76b9b"/><stop offset="56%" stop-color="#ba6b99"/><stop offset="56.86%" stop-color="#bd6b98"/><stop offset="57.71%" stop-color="#bf6b96"/><stop offset="58.57%" stop-color="#c26b95"/><stop offset="59.43%" stop-color="#c46b93"/><stop offset="60.29%" stop-color="#c76b91"/><stop offset="61.14%" stop-color="#c96b90"/><stop offset="62%" stop-color="#cc6b8e"/><stop offset="62.93%" stop-color="#cf6d8c"/><stop offset="63.86%" stop-color="#d16e8b"/><stop offset="64.79%" stop-color="#d47089"/><stop offset="65.71%" stop-color="#d67287"/><stop offset="66.64%" stop-color="#d97485"/><stop offset="67.57%" stop-color="#dc7583"/><stop offset="68.5%" stop-color="#de7781"/><stop offset="69.43%" stop-color="#e1787f"/><stop offset="70.36%" stop-color="#e47a7d"/><stop offset="71.29%" stop-color="#e67c7b"/><stop offset="72.21%" stop-color="#e97d78"/><stop offset="73.14%" stop-color="#ec7f76"/><stop offset="74.07%" stop-color="#ee8074"/><stop offset="75%" stop-color="#f18271"/><stop offset="75.86%" stop-color="#f18571"/><stop offset="76.71%" stop-color="#f18770"/><stop offset="77.57%" stop-color="#f28a70"/><stop offset="78.43%" stop-color="#f28c6f"/><stop offset="79.29%" stop-color="#f28e6f"/><stop offset="80.14%" stop-color="#f2916e"/><stop offset="81%" stop-color="#f2936d"/><stop offset="81.86%" stop-color="#f2966d"/><stop offset="82.71%" stop-color="#f3986c"/><stop offset="83.57%" stop-color="#f39b6c"/><stop offset="84.43%" stop-color="#f39d6b"/><stop offset="85.29%" stop-color="#f39f6a"/><stop offset="86.14%" stop-color="#f3a26a"/><stop offset="87%" stop-color="#f3a469"/><stop offset="87.93%" stop-color="#f3a76a"/><stop offset="88.86%" stop-color="#f4a96b"/><stop offset="89.79%" stop-color="#f4ac6c"/><stop offset="90.71%" stop-color="#f4af6d"/><stop offset="91.64%" stop-color="#f5b16e"/><stop offset="92.57%" stop-color="#f5b46f"/><stop offset="93.5%" stop-color="#f5b770"/><stop offset="94.43%" stop-color="#f6b972"/><stop offset="95.36%" stop-color="#f6bc73"/><stop offset="96.29%" stop-color="#f6bf74"/><stop offset="97.21%" stop-color="#f6c175"/><stop offset="98.14%" stop-color="#f7c476"/><stop offset="99.07%" stop-color="#f7c677"/><stop offset="100%" stop-color="#f7c978"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>

dtcg

{
  "sweet-period": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.247,
            0.318,
            0.694
          ],
          "hex": "#3f51b1"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.353,
            0.333,
            0.682
          ],
          "hex": "#5a55ae"
        },
        "position": 0.13
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.482,
            0.373,
            0.675
          ],
          "hex": "#7b5fac"
        },
        "position": 0.25
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.561,
            0.416,
            0.682
          ],
          "hex": "#8f6aae"
        },
        "position": 0.38
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.659,
            0.416,
            0.643
          ],
          "hex": "#a86aa4"
        },
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.8,
            0.42,
            0.557
          ],
          "hex": "#cc6b8e"
        },
        "position": 0.62
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.945,
            0.51,
            0.443
          ],
          "hex": "#f18271"
        },
        "position": 0.75
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.953,
            0.643,
            0.412
          ],
          "hex": "#f3a469"
        },
        "position": 0.87
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.969,
            0.788,
            0.471
          ],
          "hex": "#f7c978"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(0deg in oklab, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%)",
        "interpolation": "oklab",
        "angle": 0,
        "name": "Sweet Period",
        "contrast": {
          "white": {
            "ratio": 1.546,
            "at": 1,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 3.023,
            "at": 0,
            "passesAA": false,
            "passesAALarge": true
          },
          "suggestedInk": "#000000"
        }
      }
    },
    "$description": "Sweet Period (WebGradients, MIT), rendered in OKLab."
  }
}

Tagged

Purple gradients Blue gradients Red gradients Yellow gradients

More purple gradients

Night Fade

0°

#a18cd1 #fbc2eb

white 1.50 failsblack 7.19 AA

Open in maker →

Lilac Sky

120°

#e0c3fc #8ec5fc

white 1.57 failsblack 11.54 AA

Open in maker →

Ripe Malinka

120°

#f093fb #f5576c

white 2.04 failsblack 6.46 AA

Open in maker →

Near Moon

0°

#5ee7df #b490ca

white 1.50 failsblack 7.78 AA

Open in maker →

Plum Plate

135°

#667eea #764ba2

white 3.66 AA largeblack 3.30 AA large

Open in maker →

Sharpeye Eagle

0°

#9890e3 #b1f4cf

white 1.26 failsblack 7.43 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 Sweet Period gradient (#3f51b1, #5a55ae, #7b5fac, #8f6aae, #a86aa4, #cc6b8e, #f18271, #f3a469, #f7c978), 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