Named gradient · uiGradients

Ameena

Ameena is a green gradient from uiGradients (MIT) — #0c0c6d → #de512b → #98d0c1 → #5bb226 → #023c0d 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.

Aa — the quick brown fox
white text · worst 1.73:1 · fails
white 1.73 failsblack 1.29 failsbanding low

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.

sRGB25%
OKLab25%
OKLCH53%

Report

  • white ink: worst 1.73:1 at 50% (fails AA); black ink: worst 1.29:1 at 0% (fails AA) → use white text.
  • Neither ink passes AA at the worst point — treat as decorative or add a scrim (rgba(0,0,0,.35) typically lifts white ink past 4:1).

Export

css
.gradient {
  background-image: linear-gradient(90deg, #0c0c6d 0%, #191a6c 1.79%, #27246b 3.57%, #352c69 5.36%, #433267 7.14%, #513865 8.93%, #603c62 10.71%, #6f415f 12.5%, #7e455b 14.29%, #8e4856 16.07%, #9d4b51 17.86%, #ad4d4b 19.64%, #bd4f43 21.43%, #cd5039 23.21%, #de512b 25%, #dc5d39 26.79%, #da6846 28.57%, #d77351 30.36%, #d47d5c 32.14%, #d08667 33.93%, #cc8f71 35.71%, #c8987b 37.5%, #c3a085 39.29%, #bea88f 41.07%, #b8b199 42.86%, #b2b9a3 44.64%, #aac1ad 46.43%, #a2c8b7 48.21%, #98d0c1 50%, #94ceb8 51.79%, #8fccaf 53.57%, #8bcaa5 55.36%, #86c89c 57.14%, #82c692 58.93%, #7ec489 60.71%, #79c27f 62.5%, #75c075 64.29%, #71be6a 66.07%, #6cbb5f 67.86%, #68b954 69.64%, #64b747 71.43%, #5fb439 73.21%, #5bb226 75%, #55a924 76.79%, #4ea023 78.57%, #489721 80.36%, #428e1f 82.14%, #3b851d 83.93%, #357d1c 85.71%, #2f741a 87.5%, #296c18 89.29%, #236416 91.07%, #1c5b14 92.86%, #165313 94.64%, #0f4b11 96.43%, #08440f 98.21%, #023c0d 100%);
  background-image: linear-gradient(90deg in oklab, #0c0c6d 0%, #de512b 25%, #98d0c1 50%, #5bb226 75%, #023c0d 100%);
}
tailwind v4
bg-[linear-gradient(90deg_in_oklab,#0c0c6d_0%,#de512b_25%,#98d0c1_50%,#5bb226_75%,#023c0d_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="#0c0c6d"/><stop offset="1.79%" stop-color="#191a6c"/><stop offset="3.57%" stop-color="#27246b"/><stop offset="5.36%" stop-color="#352c69"/><stop offset="7.14%" stop-color="#433267"/><stop offset="8.93%" stop-color="#513865"/><stop offset="10.71%" stop-color="#603c62"/><stop offset="12.5%" stop-color="#6f415f"/><stop offset="14.29%" stop-color="#7e455b"/><stop offset="16.07%" stop-color="#8e4856"/><stop offset="17.86%" stop-color="#9d4b51"/><stop offset="19.64%" stop-color="#ad4d4b"/><stop offset="21.43%" stop-color="#bd4f43"/><stop offset="23.21%" stop-color="#cd5039"/><stop offset="25%" stop-color="#de512b"/><stop offset="26.79%" stop-color="#dc5d39"/><stop offset="28.57%" stop-color="#da6846"/><stop offset="30.36%" stop-color="#d77351"/><stop offset="32.14%" stop-color="#d47d5c"/><stop offset="33.93%" stop-color="#d08667"/><stop offset="35.71%" stop-color="#cc8f71"/><stop offset="37.5%" stop-color="#c8987b"/><stop offset="39.29%" stop-color="#c3a085"/><stop offset="41.07%" stop-color="#bea88f"/><stop offset="42.86%" stop-color="#b8b199"/><stop offset="44.64%" stop-color="#b2b9a3"/><stop offset="46.43%" stop-color="#aac1ad"/><stop offset="48.21%" stop-color="#a2c8b7"/><stop offset="50%" stop-color="#98d0c1"/><stop offset="51.79%" stop-color="#94ceb8"/><stop offset="53.57%" stop-color="#8fccaf"/><stop offset="55.36%" stop-color="#8bcaa5"/><stop offset="57.14%" stop-color="#86c89c"/><stop offset="58.93%" stop-color="#82c692"/><stop offset="60.71%" stop-color="#7ec489"/><stop offset="62.5%" stop-color="#79c27f"/><stop offset="64.29%" stop-color="#75c075"/><stop offset="66.07%" stop-color="#71be6a"/><stop offset="67.86%" stop-color="#6cbb5f"/><stop offset="69.64%" stop-color="#68b954"/><stop offset="71.43%" stop-color="#64b747"/><stop offset="73.21%" stop-color="#5fb439"/><stop offset="75%" stop-color="#5bb226"/><stop offset="76.79%" stop-color="#55a924"/><stop offset="78.57%" stop-color="#4ea023"/><stop offset="80.36%" stop-color="#489721"/><stop offset="82.14%" stop-color="#428e1f"/><stop offset="83.93%" stop-color="#3b851d"/><stop offset="85.71%" stop-color="#357d1c"/><stop offset="87.5%" stop-color="#2f741a"/><stop offset="89.29%" stop-color="#296c18"/><stop offset="91.07%" stop-color="#236416"/><stop offset="92.86%" stop-color="#1c5b14"/><stop offset="94.64%" stop-color="#165313"/><stop offset="96.43%" stop-color="#0f4b11"/><stop offset="98.21%" stop-color="#08440f"/><stop offset="100%" stop-color="#023c0d"/></linearGradient></defs><rect width="1440" height="600" fill="url(#bs-gradient)"/></svg>
dtcg
{
  "ameena": {
    "$type": "gradient",
    "$value": [
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.047,
            0.047,
            0.427
          ],
          "hex": "#0c0c6d"
        },
        "position": 0
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.871,
            0.318,
            0.169
          ],
          "hex": "#de512b"
        },
        "position": 0.25
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.596,
            0.816,
            0.757
          ],
          "hex": "#98d0c1"
        },
        "position": 0.5
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.357,
            0.698,
            0.149
          ],
          "hex": "#5bb226"
        },
        "position": 0.75
      },
      {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.008,
            0.235,
            0.051
          ],
          "hex": "#023c0d"
        },
        "position": 1
      }
    ],
    "$extensions": {
      "com.brandsweets": {
        "kind": "linear",
        "css": "linear-gradient(90deg in oklab, #0c0c6d 0%, #de512b 25%, #98d0c1 50%, #5bb226 75%, #023c0d 100%)",
        "interpolation": "oklab",
        "angle": 90,
        "name": "Ameena",
        "contrast": {
          "white": {
            "ratio": 1.732,
            "at": 0.5,
            "passesAA": false,
            "passesAALarge": false
          },
          "black": {
            "ratio": 1.289,
            "at": 0,
            "passesAA": false,
            "passesAALarge": false
          },
          "suggestedInk": "#ffffff"
        }
      }
    },
    "$description": "Ameena (uiGradients, MIT), rendered in OKLab."
  }
}

Tagged

More green 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 Ameena gradient (#0c0c6d, #de512b, #98d0c1, #5bb226, #023c0d), 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