Gradient palette editor — #7f7398 to #74c7a6

/* https://grabient.com/_gIAgHvgLAf-9f7Xf9if7FgE8gKgfz0fz7fyb?style=angularSwatches&steps=13&angle=225 */

background: conic-gradient(from 225deg, #7f7398 0.000deg, #7f7398 27.692deg, #7d80a4 calc(27.692deg + 0.1deg), #7d80a4 55.385deg, #7a8cb2 calc(55.385deg + 0.1deg), #7a8cb2 83.077deg, #7898c0 calc(83.077deg + 0.1deg), #7898c0 110.769deg, #76a4cc calc(110.769deg + 0.1deg), #76a4cc 138.462deg, #74aed6 calc(138.462deg + 0.1deg), #74aed6 166.154deg, #73b7db calc(166.154deg + 0.1deg), #73b7db 193.846deg, #72bfdb calc(193.846deg + 0.1deg), #72bfdb 221.538deg, #72c4d7 calc(221.538deg + 0.1deg), #72c4d7 249.231deg, #72c8ce calc(249.231deg + 0.1deg), #72c8ce 276.923deg, #72cac2 calc(276.923deg + 0.1deg), #72cac2 304.615deg, #73cab4 calc(304.615deg + 0.1deg), #73cab4 332.308deg, #74c7a6 calc(332.308deg + 0.1deg) 360.000deg);

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
            <!-- https://grabient.com/_gIAgHvgLAf-9f7Xf9if7FgE8gKgfz0fz7fyb?style=angularSwatches&steps=13&angle=225 -->
            <defs>
              <clipPath id="squareClip">
                <rect x="0" y="0" width="800" height="400" />
              </clipPath>
              <filter id="antiGap">
                <feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
              </filter>
            </defs>
            <g clip-path="url(#squareClip)" filter="url(#antiGap)" shape-rendering="crispEdges">
          <path d="
              M 400.000,200.000
              L 83.772,516.228
              A 447.214,447.214 0 0 1 -26.964,333.050
              Z
            " fill="#7f7398" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L -26.964,333.050
              A 447.214,447.214 0 0 1 -39.888,119.384
              Z
            " fill="#7d80a4" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L -39.888,119.384
              A 447.214,447.214 0 0 1 47.961,-75.806
              Z
            " fill="#7a8cb2" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 47.961,-75.806
              A 447.214,447.214 0 0 1 216.456,-207.814
              Z
            " fill="#7898c0" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 216.456,-207.814
              A 447.214,447.214 0 0 1 427.006,-246.398
              Z
            " fill="#76a4cc" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 427.006,-246.398
              A 447.214,447.214 0 0 1 631.362,-182.717
              Z
            " fill="#74aed6" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 631.362,-182.717
              A 447.214,447.214 0 0 1 782.717,-31.362
              Z
            " fill="#73b7db" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 782.717,-31.362
              A 447.214,447.214 0 0 1 846.398,172.994
              Z
            " fill="#72bfdb" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 846.398,172.994
              A 447.214,447.214 0 0 1 807.814,383.544
              Z
            " fill="#72c4d7" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 807.814,383.544
              A 447.214,447.214 0 0 1 675.806,552.039
              Z
            " fill="#72c8ce" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 675.806,552.039
              A 447.214,447.214 0 0 1 480.616,639.888
              Z
            " fill="#72cac2" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 480.616,639.888
              A 447.214,447.214 0 0 1 266.950,626.964
              Z
            " fill="#73cab4" fill-opacity="1.000" /><path d="
              M 400.000,200.000
              L 266.950,626.964
              A 447.214,447.214 0 0 1 83.772,516.228
              Z
            " fill="#74c7a6" fill-opacity="1.000" /></g>
        </svg>

["#7f7398", "#7d80a4", "#7a8cb2", "#7898c0", "#76a4cc", "#74aed6", "#73b7db", "#72bfdb", "#72c4d7", "#72c8ce", "#72cac2", "#73cab4", "#74c7a6"]

// https://grabient.com/_gIAgHvgLAf-9f7Xf9if7FgE8gKgfz0fz7fyb?style=angularSwatches&steps=13&angle=225
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 13.0;
const float ANGLE = 225.0;

vec3 palette(float t) {
    vec3 a = vec3(0.512, 0.495, 0.704);
    vec3 b = vec3(-0.067, -0.297, -0.158);
    vec3 c = vec3(-0.315, 0.316, 0.672);
    vec3 d = vec3(-0.780, -0.773, -0.869);
    return a + b * cos(6.283185 * (c * t + d));
}

// N hard swatches sampled from the palette
vec3 stops(float t) {
    float i = min(floor(clamp(t, 0.0, 1.0) * STEPS), STEPS - 1.0);
    return palette(i / (STEPS - 1.0));
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 p = fragCoord - 0.5 * iResolution.xy;
    // conic from ANGLE, clockwise from top (CSS convention)
    float t = fract((atan(p.x, p.y) - radians(ANGLE)) / 6.283185);
    fragColor = vec4(stops(t), 1.0);
}

[
  [0.512, 0.495, 0.704],
  [-0.067, -0.297, -0.158],
  [-0.315, 0.316, 0.672],
  [-0.780, -0.773, -0.869]
]