/* https://grabient.com/_gFGgFGgFGgEygEygEygPogPogPygAAgFagKhi2vo_QgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #d0555d 0.000%, #d0555d 2.941%, #ca417a calc(2.941% + 1px), #ca417a 5.882%, #ba3598 calc(5.882% + 1px), #ba3598 8.824%, #a235b2 calc(8.824% + 1px), #a235b2 11.765%, #853fc5 calc(11.765% + 1px), #853fc5 14.706%, #6853cf calc(14.706% + 1px), #6853cf 17.647%, #4e6ecd calc(17.647% + 1px), #4e6ecd 20.588%, #3c8bc0 calc(20.588% + 1px), #3c8bc0 23.529%, #34a7aa calc(23.529% + 1px), #34a7aa 26.471%, #37be8e calc(26.471% + 1px), #37be8e 29.412%, #44cc70 calc(29.412% + 1px), #44cc70 32.353%, #5bcf55 calc(32.353% + 1px), #5bcf55 35.294%, #76c740 calc(35.294% + 1px), #76c740 38.235%, #94b635 calc(38.235% + 1px), #94b635 41.176%, #af9c35 calc(41.176% + 1px), #af9c35 44.118%, #c37f40 calc(44.118% + 1px), #c37f40 47.059%, #ce6255 calc(47.059% + 1px), #ce6255 50.000%, #ce4a70 calc(50.000% + 1px), #ce4a70 52.941%, #c33a8e calc(52.941% + 1px), #c33a8e 55.882%, #af34aa calc(55.882% + 1px), #af34aa 58.824%, #9439c0 calc(58.824% + 1px), #9439c0 61.765%, #7648cd calc(61.765% + 1px), #7648cd 64.706%, #5b60cf calc(64.706% + 1px), #5b60cf 67.647%, #447dc6 calc(67.647% + 1px), #447dc6 70.588%, #379ab2 calc(70.588% + 1px), #379ab2 73.529%, #34b498 calc(73.529% + 1px), #34b498 76.471%, #3cc67a calc(76.471% + 1px), #3cc67a 79.412%, #4ecf5e calc(79.412% + 1px), #4ecf5e 82.353%, #68cd46 calc(82.353% + 1px), #68cd46 85.294%, #85c038 calc(85.294% + 1px), #85c038 88.235%, #a2aa34 calc(88.235% + 1px), #a2aa34 91.176%, #ba8e3b calc(91.176% + 1px), #ba8e3b 94.118%, #ca704d calc(94.118% + 1px), #ca704d 97.059%, #d05566 calc(97.059% + 1px) 100.000%);

["#d0555d", "#ca417a", "#ba3598", "#a235b2", "#853fc5", "#6853cf", "#4e6ecd", "#3c8bc0", "#34a7aa", "#37be8e", "#44cc70", "#5bcf55", "#76c740", "#94b635", "#af9c35", "#c37f40", "#ce6255", "#ce4a70", "#c33a8e", "#af34aa", "#9439c0", "#7648cd", "#5b60cf", "#447dc6", "#379ab2", "#34b498", "#3cc67a", "#4ecf5e", "#68cd46", "#85c038", "#a2aa34", "#ba8e3b", "#ca704d", "#d05566"]

// https://grabient.com/_gFGgFGgFGgEygEygEygPogPogPygAAgFagKhi2vo_QgA?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.508, 0.508, 0.508); vec3 b = vec3(0.306, 0.306, 0.306); vec3 c = vec3(2.000, 2.000, 2.020); vec3 d = vec3(0.000, 0.346, 0.673); 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); }

Rainbow indian red to light sea green to warm blue to apple gradient palette editor

Rainbow indian red to light sea green to warm blue to apple