/* https://grabient.com/_gJuf8pgAegHygNEgGigHvgBXgFAgH2gL_gLviZv40jgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #45072f 0.000%, #45072f 2.941%, #460c38 calc(2.941% + 1px), #460c38 5.882%, #491141 calc(5.882% + 1px), #491141 8.824%, #4e1549 calc(8.824% + 1px), #4e1549 11.765%, #551a51 calc(11.765% + 1px), #551a51 14.706%, #5e1f5a calc(14.706% + 1px), #5e1f5a 17.647%, #682361 calc(17.647% + 1px), #682361 20.588%, #732869 calc(20.588% + 1px), #732869 23.529%, #802c70 calc(23.529% + 1px), #802c70 26.471%, #8e3177 calc(26.471% + 1px), #8e3177 29.412%, #9d357d calc(29.412% + 1px), #9d357d 32.353%, #ad3a83 calc(32.353% + 1px), #ad3a83 35.294%, #bc3e88 calc(35.294% + 1px), #bc3e88 38.235%, #cc438c calc(38.235% + 1px), #cc438c 41.176%, #dc4791 calc(41.176% + 1px), #dc4791 44.118%, #ec4b94 calc(44.118% + 1px), #ec4b94 47.059%, #fb4f97 calc(47.059% + 1px), #fb4f97 50.000%, #ff5499 calc(50.000% + 1px), #ff5499 52.941%, #ff589a calc(52.941% + 1px), #ff589a 55.882%, #ff5c9b calc(55.882% + 1px), #ff5c9b 58.824%, #ff609b calc(58.824% + 1px), #ff609b 61.765%, #ff649a calc(61.765% + 1px), #ff649a 64.706%, #ff6899 calc(64.706% + 1px), #ff6899 67.647%, #ff6c97 calc(67.647% + 1px), #ff6c97 70.588%, #ff7094 calc(70.588% + 1px), #ff7094 73.529%, #ff7491 calc(73.529% + 1px), #ff7491 76.471%, #ff778d calc(76.471% + 1px), #ff778d 79.412%, #ff7b88 calc(79.412% + 1px), #ff7b88 82.353%, #ff7e83 calc(82.353% + 1px), #ff7e83 85.294%, #ff827d calc(85.294% + 1px), #ff827d 88.235%, #ff8577 calc(88.235% + 1px), #ff8577 91.176%, #ff8970 calc(91.176% + 1px), #ff8970 94.118%, #ff8c69 calc(94.118% + 1px), #ff8c69 97.059%, #ff8f62 calc(97.059% + 1px) 100.000%);

["#45072f", "#460c38", "#491141", "#4e1549", "#551a51", "#5e1f5a", "#682361", "#732869", "#802c70", "#8e3177", "#9d357d", "#ad3a83", "#bc3e88", "#cc438c", "#dc4791", "#ec4b94", "#fb4f97", "#ff5499", "#ff589a", "#ff5c9b", "#ff609b", "#ff649a", "#ff6899", "#ff6c97", "#ff7094", "#ff7491", "#ff778d", "#ff7b88", "#ff7e83", "#ff827d", "#ff8577", "#ff8970", "#ff8c69", "#ff8f62"]

// https://grabient.com/_gJuf8pgAegHygNEgGigHvgBXgFAgH2gL_gLviZv40jgA?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.775, -0.062, 0.183); vec3 b = vec3(0.506, 0.849, 0.425); vec3 c = vec3(0.651, 0.114, 0.421); vec3 d = vec3(0.502, 0.767, 0.751); 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 dark plum to ugly purple to light salmon gradient palette editor

Sunset dark plum to ugly purple to light salmon