Rainbow deep blue to dried blood to scarlet to aqua blue gradient palette editor

/* https://grabient.com/_gH6gGAgGLgIRgIHgIYgMUgLPgNIf5RgGAgDl?style=radialSwatches&steps=7&angle=90 */

background: radial-gradient(circle, #070077 0.000%, #070077 14.286%, #580008 calc(14.286% + 1px), #580008 28.571%, #c30400 calc(28.571% + 1px), #c30400 42.857%, #ff5d14 calc(42.857% + 1px), #ff5d14 57.143%, #f1b886 calc(57.143% + 1px), #f1b886 71.429%, #96e6e0 calc(71.429% + 1px), #96e6e0 85.714%, #2dcce1 calc(85.714% + 1px) 100.000%);

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400" preserveAspectRatio="none">
            <!-- https://grabient.com/_gH6gGAgGLgIRgIHgIYgMUgLPgNIf5RgGAgDl?style=radialSwatches&steps=7&angle=90 -->
            <defs>
              <clipPath id="ringBounds">
                <rect x="0" y="0" width="800" height="400" />
              </clipPath>
            </defs>
            <g clip-path="url(#ringBounds)"><path d="M 336.112,200.000 A 63.888,63.888 0 1 1 463.888,200.000 A 63.888,63.888 0 1 1 336.112,200.000 Z" fill="#070077" fill-opacity="1.000" /><path d="M 272.225,200.000 A 127.775,127.775 0 1 1 527.775,200.000 A 127.775,127.775 0 1 1 272.225,200.000 Z M 336.112,200.000 A 63.888,63.888 0 1 0 463.888,200.000 A 63.888,63.888 0 1 0 336.112,200.000 Z" fill="#580008" fill-opacity="1.000" /><path d="M 208.337,200.000 A 191.663,191.663 0 1 1 591.663,200.000 A 191.663,191.663 0 1 1 208.337,200.000 Z M 272.225,200.000 A 127.775,127.775 0 1 0 527.775,200.000 A 127.775,127.775 0 1 0 272.225,200.000 Z" fill="#c30400" fill-opacity="1.000" /><path d="M 144.449,200.000 A 255.551,255.551 0 1 1 655.551,200.000 A 255.551,255.551 0 1 1 144.449,200.000 Z M 208.337,200.000 A 191.663,191.663 0 1 0 591.663,200.000 A 191.663,191.663 0 1 0 208.337,200.000 Z" fill="#ff5d14" fill-opacity="1.000" /><path d="M 80.562,200.000 A 319.438,319.438 0 1 1 719.438,200.000 A 319.438,319.438 0 1 1 80.562,200.000 Z M 144.449,200.000 A 255.551,255.551 0 1 0 655.551,200.000 A 255.551,255.551 0 1 0 144.449,200.000 Z" fill="#f1b886" fill-opacity="1.000" /><path d="M 16.674,200.000 A 383.326,383.326 0 1 1 783.326,200.000 A 383.326,383.326 0 1 1 16.674,200.000 Z M 80.562,200.000 A 319.438,319.438 0 1 0 719.438,200.000 A 319.438,319.438 0 1 0 80.562,200.000 Z" fill="#96e6e0" fill-opacity="1.000" /><path d="M -47.214,200.000 A 447.214,447.214 0 1 1 847.214,200.000 A 447.214,447.214 0 1 1 -47.214,200.000 Z M 16.674,200.000 A 383.326,383.326 0 1 0 783.326,200.000 A 383.326,383.326 0 1 0 16.674,200.000 Z" fill="#2dcce1" fill-opacity="1.000" /></g>
          </svg>

["#070077", "#580008", "#c30400", "#ff5d14", "#f1b886", "#96e6e0", "#2dcce1"]

// https://grabient.com/_gH6gGAgGLgIRgIHgIYgMUgLPgNIf5RgGAgDl?style=radialSwatches&steps=7&angle=90
// cosine gradient palette — https://iquilezles.org/articles/palettes/
const float STEPS = 7.0;

vec3 palette(float t) {
    vec3 a = vec3(0.506, 0.384, 0.395);
    vec3 b = vec3(0.529, 0.519, 0.536);
    vec3 c = vec3(0.788, 0.719, 0.840);
    vec3 d = vec3(-0.431, 0.384, 0.229);
    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;
    // circle to the farthest corner (CSS default)
    float t = length(p) / length(0.5 * iResolution.xy);
    fragColor = vec4(stops(t), 1.0);
}

[
  [0.506, 0.384, 0.395],
  [0.529, 0.519, 0.536],
  [0.788, 0.719, 0.840],
  [-0.431, 0.384, 0.229]
]