Rainbow tomato red to robin's egg to prussian blue to dark maroon gradient palette editor

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

background: radial-gradient(circle, #df3000 0.000%, #df3000 14.286%, #ff9125 calc(14.286% + 1px), #ff9125 28.571%, #dad99a calc(28.571% + 1px), #dad99a 42.857%, #72e0e8 calc(42.857% + 1px), #72e0e8 57.143%, #14a3d6 calc(57.143% + 1px), #14a3d6 71.429%, #004373 calc(71.429% + 1px), #004373 85.714%, #3a0005 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/_gH6gGAgGLgIRgIHgIYgMVgLQgNJf-BgKwgIV?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="#df3000" 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="#ff9125" 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="#dad99a" 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="#72e0e8" 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="#14a3d6" 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="#004373" 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="#3a0005" fill-opacity="1.000" /></g>
          </svg>

["#df3000", "#ff9125", "#dad99a", "#72e0e8", "#14a3d6", "#004373", "#3a0005"]

// https://grabient.com/_gH6gGAgGLgIRgIHgIYgMVgLQgNJf-BgKwgIV?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.789, 0.720, 0.841);
    vec3 d = vec3(-0.127, 0.688, 0.533);
    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.789, 0.720, 0.841],
  [-0.127, 0.688, 0.533]
]