/* https://grabient.com/_gAEgADf-ygPMgPMgDdgPNgPNgemf22gGDf9On6nNxQf6?style=linearSwatches&steps=21&angle=90 */ background: linear-gradient(90deg, #222e78 0.000%, #222e78 4.762%, #131984 calc(4.762% + 1px), #131984 9.524%, #101087 calc(9.524% + 1px), #101087 14.286%, #1a147e calc(14.286% + 1px), #1a147e 19.048%, #30246d calc(19.048% + 1px), #30246d 23.810%, #4f3e5d calc(23.810% + 1px), #4f3e5d 28.571%, #746154 calc(28.571% + 1px), #746154 33.333%, #9a8756 calc(33.333% + 1px), #9a8756 38.095%, #beac62 calc(38.095% + 1px), #beac62 42.857%, #dbcd73 calc(42.857% + 1px), #dbcd73 47.619%, #eee582 calc(47.619% + 1px), #eee582 52.381%, #f4f287 calc(52.381% + 1px), #f4f287 57.143%, #eef381 calc(57.143% + 1px), #eef381 61.905%, #dce672 calc(61.905% + 1px), #dce672 66.667%, #bfce61 calc(66.667% + 1px), #bfce61 71.429%, #9cae55 calc(71.429% + 1px), #9cae55 76.190%, #768954 calc(76.190% + 1px), #768954 80.952%, #51635e calc(80.952% + 1px), #51635e 85.714%, #31406f calc(85.714% + 1px), #31406f 90.476%, #1b257f calc(90.476% + 1px), #1b257f 95.238%, #111487 calc(95.238% + 1px) 100.000%);

["#222e78", "#131984", "#101087", "#1a147e", "#30246d", "#4f3e5d", "#746154", "#9a8756", "#beac62", "#dbcd73", "#eee582", "#f4f287", "#eef381", "#dce672", "#bfce61", "#9cae55", "#768954", "#51635e", "#31406f", "#1b257f", "#111487"]

// https://grabient.com/_gAEgADf-ygPMgPMgDdgPNgPNgemf22gGDf9On6nNxQf6?style=linearSwatches&steps=21&angle=90 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 21.0; const float ANGLE = 90.0; vec3 palette(float t) { vec3 a = vec3(0.510, 0.509, 0.428); vec3 b = vec3(0.448, 0.448, 0.102); vec3 c = vec3(1.074, 1.074, 2.162); vec3 d = vec3(-0.592, 0.381, -0.184); 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; // CSS angle: 0 = up, clockwise; span = CSS gradient-line length vec2 dir = vec2(sin(radians(ANGLE)), cos(radians(ANGLE))); float len = abs(iResolution.x * dir.x) + abs(iResolution.y * dir.y); float t = dot(p, dir) / len + 0.5; fragColor = vec4(stops(t), 1.0); }

Complementary marine blue and dark blue gradient palette editor

Complementary marine blue and dark blue