/* https://grabient.com/_gJuf8pgAegHygNEgGigHvgBXgFAgH2gL_gLvj3vo2ifp?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #600038 0.000%, #600038 2.941%, #5f0541 calc(2.941% + 1px), #5f0541 5.882%, #600a4b calc(5.882% + 1px), #600a4b 8.824%, #630f54 calc(8.824% + 1px), #630f54 11.765%, #69145d calc(11.765% + 1px), #69145d 14.706%, #711a66 calc(14.706% + 1px), #711a66 17.647%, #7b1f6f calc(17.647% + 1px), #7b1f6f 20.588%, #872478 calc(20.588% + 1px), #872478 23.529%, #942980 calc(23.529% + 1px), #942980 26.471%, #a32e87 calc(26.471% + 1px), #a32e87 29.412%, #b3338f calc(29.412% + 1px), #b3338f 32.353%, #c33895 calc(32.353% + 1px), #c33895 35.294%, #d43d9b calc(35.294% + 1px), #d43d9b 38.235%, #e642a1 calc(38.235% + 1px), #e642a1 41.176%, #f746a5 calc(41.176% + 1px), #f746a5 44.118%, #ff4ba9 calc(44.118% + 1px), #ff4ba9 47.059%, #ff50ac calc(47.059% + 1px), #ff50ac 50.000%, #ff55af calc(50.000% + 1px), #ff55af 52.941%, #ff5ab0 calc(52.941% + 1px), #ff5ab0 55.882%, #ff5eb1 calc(55.882% + 1px), #ff5eb1 58.824%, #ff63b1 calc(58.824% + 1px), #ff63b1 61.765%, #ff68b0 calc(61.765% + 1px), #ff68b0 64.706%, #ff6caf calc(64.706% + 1px), #ff6caf 67.647%, #ff71ac calc(67.647% + 1px), #ff71ac 70.588%, #ff75a9 calc(70.588% + 1px), #ff75a9 73.529%, #ff79a5 calc(73.529% + 1px), #ff79a5 76.471%, #ff7ea0 calc(76.471% + 1px), #ff7ea0 79.412%, #ff829b calc(79.412% + 1px), #ff829b 82.353%, #ff8695 calc(82.353% + 1px), #ff8695 85.294%, #ff8a8e calc(85.294% + 1px), #ff8a8e 88.235%, #ff8e87 calc(88.235% + 1px), #ff8e87 91.176%, #ff927f calc(91.176% + 1px), #ff927f 94.118%, #ff9677 calc(94.118% + 1px), #ff9677 97.059%, #ff9a6e calc(97.059% + 1px) 100.000%);

["#600038", "#5f0541", "#600a4b", "#630f54", "#69145d", "#711a66", "#7b1f6f", "#872478", "#942980", "#a32e87", "#b3338f", "#c33895", "#d43d9b", "#e642a1", "#f746a5", "#ff4ba9", "#ff50ac", "#ff55af", "#ff5ab0", "#ff5eb1", "#ff63b1", "#ff68b0", "#ff6caf", "#ff71ac", "#ff75a9", "#ff79a5", "#ff7ea0", "#ff829b", "#ff8695", "#ff8a8e", "#ff8e87", "#ff927f", "#ff9677", "#ff9a6e"]

// https://grabient.com/_gJuf8pgAegHygNEgGigHvgBXgFAgH2gL_gLvj3vo2ifp?style=linearSwatches&steps=34&angle=90 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; const float ANGLE = 90.0; vec3 palette(float t) { vec3 a = vec3(0.869, 0.032, 0.277); vec3 b = vec3(0.498, 0.836, 0.418); vec3 c = vec3(0.714, 0.125, 0.461); vec3 d = vec3(0.479, 0.744, 0.728); 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); }

Sunset burgundy to medium violet red to light salmon gradient palette editor

Sunset burgundy to medium violet red to light salmon