/* https://grabient.com/_gAAgAAf-4gPngPngB6gPngPngu2f_CgA9gAAn0n0vogA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #f5f67d 0.000%, #f5f67d 2.941%, #fcea7a calc(2.941% + 1px), #fcea7a 5.882%, #ffdb74 calc(5.882% + 1px), #ffdb74 8.824%, #fdc96b calc(8.824% + 1px), #fdc96b 11.765%, #f6b463 calc(11.765% + 1px), #f6b463 14.706%, #eb9d5e calc(14.706% + 1px), #eb9d5e 17.647%, #dd855e calc(17.647% + 1px), #dd855e 20.588%, #ca6d63 calc(20.588% + 1px), #ca6d63 23.529%, #b6566b calc(23.529% + 1px), #b6566b 26.471%, #9f4074 calc(26.471% + 1px), #9f4074 29.412%, #872c7a calc(29.412% + 1px), #872c7a 32.353%, #6f1b7d calc(32.353% + 1px), #6f1b7d 35.294%, #570e7a calc(35.294% + 1px), #570e7a 38.235%, #410574 calc(38.235% + 1px), #410574 41.176%, #2d016b calc(41.176% + 1px), #2d016b 44.118%, #1c0163 calc(44.118% + 1px), #1c0163 47.059%, #0f055e calc(47.059% + 1px), #0f055e 50.000%, #060e5e calc(50.000% + 1px), #060e5e 52.941%, #011b63 calc(52.941% + 1px), #011b63 55.882%, #012c6b calc(55.882% + 1px), #012c6b 58.824%, #054073 calc(58.824% + 1px), #054073 61.765%, #0e567a calc(61.765% + 1px), #0e567a 64.706%, #1a6d7d calc(64.706% + 1px), #1a6d7d 67.647%, #2b857a calc(67.647% + 1px), #2b857a 70.588%, #3e9d74 calc(70.588% + 1px), #3e9d74 73.529%, #54b46b calc(73.529% + 1px), #54b46b 76.471%, #6cc963 calc(76.471% + 1px), #6cc963 79.412%, #84db5e calc(79.412% + 1px), #84db5e 82.353%, #9cea5e calc(82.353% + 1px), #9cea5e 85.294%, #b3f663 calc(85.294% + 1px), #b3f663 88.235%, #c8fc6b calc(88.235% + 1px), #c8fc6b 91.176%, #daff73 calc(91.176% + 1px), #daff73 94.118%, #eafd7a calc(94.118% + 1px), #eafd7a 97.059%, #f5f67d calc(97.059% + 1px) 100.000%);

["#f5f67d", "#fcea7a", "#ffdb74", "#fdc96b", "#f6b463", "#eb9d5e", "#dd855e", "#ca6d63", "#b6566b", "#9f4074", "#872c7a", "#6f1b7d", "#570e7a", "#410574", "#2d016b", "#1c0163", "#0f055e", "#060e5e", "#011b63", "#012c6b", "#054073", "#0e567a", "#1a6d7d", "#2b857a", "#3e9d74", "#54b46b", "#6cc963", "#84db5e", "#9cea5e", "#b3f663", "#c8fc6b", "#daff73", "#eafd7a", "#f5f67d"]

// https://grabient.com/_gAAgAAf-4gPngPngB6gPngPngu2f_CgA9gAAn0n0vogA?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.500, 0.500, 0.428); vec3 b = vec3(0.499, 0.499, 0.061); vec3 c = vec3(0.999, 0.999, 2.998); vec3 d = vec3(-0.062, 0.061, 0.000); 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 straw to dark rose to darkblue to boring green gradient palette editor

Rainbow straw to dark rose to darkblue to boring green