/* https://grabient.com/_gG5gIDgJQgGmgF7gJtgGygGFgBngI6gH_gKV?style=linearSwatches&steps=21&angle=0 */ background: linear-gradient(0deg, #0f2343 0.000%, #0f2343 4.762%, #162447 calc(4.762% + 1px), #162447 9.524%, #1f274c calc(9.524% + 1px), #1f274c 14.286%, #292c50 calc(14.286% + 1px), #292c50 19.048%, #353155 calc(19.048% + 1px), #353155 23.810%, #42385a calc(23.810% + 1px), #42385a 28.571%, #4f405e calc(28.571% + 1px), #4f405e 33.333%, #5e4963 calc(33.333% + 1px), #5e4963 38.095%, #6c5368 calc(38.095% + 1px), #6c5368 42.857%, #7b5e6d calc(42.857% + 1px), #7b5e6d 47.619%, #896972 calc(47.619% + 1px), #896972 52.381%, #977477 calc(52.381% + 1px), #977477 57.143%, #a5807c calc(57.143% + 1px), #a5807c 61.905%, #b18c81 calc(61.905% + 1px), #b18c81 66.667%, #bc9786 calc(66.667% + 1px), #bc9786 71.429%, #c6a38b calc(71.429% + 1px), #c6a38b 76.190%, #ceae90 calc(76.190% + 1px), #ceae90 80.952%, #d4b896 calc(80.952% + 1px), #d4b896 85.714%, #d9c19b calc(85.714% + 1px), #d9c19b 90.476%, #dbcaa0 calc(90.476% + 1px), #dbcaa0 95.238%, #dcd2a5 calc(95.238% + 1px) 100.000%);

["#0f2343", "#162447", "#1f274c", "#292c50", "#353155", "#42385a", "#4f405e", "#5e4963", "#6c5368", "#7b5e6d", "#896972", "#977477", "#a5807c", "#b18c81", "#bc9786", "#c6a38b", "#ceae90", "#d4b896", "#d9c19b", "#dbcaa0", "#dcd2a5"]

// https://grabient.com/_gG5gIDgJQgGmgF7gJtgGygGFgBngI6gH_gKV?style=linearSwatches&steps=21&angle=0 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 21.0; const float ANGLE = 0.0; vec3 palette(float t) { vec3 a = vec3(0.441, 0.515, 0.592); vec3 b = vec3(0.422, 0.379, 0.621); vec3 c = vec3(0.434, 0.389, 0.103); vec3 d = vec3(0.570, 0.511, 0.661); 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); }

Muted marine to wheat gradient palette editor

Muted marine to wheat