/* https://grabient.com/_gGCgGEgGDgENgD6gEcgIegHNgJugAEgnYg6phevo8OZs?style=linearSwatches&steps=34&angle=45 */ background: linear-gradient(45deg, #43aa50 0.000%, #43aa50 2.941%, #4ba345 calc(2.941% + 1px), #4ba345 5.882%, #559b3c calc(5.882% + 1px), #559b3c 8.824%, #619236 calc(8.824% + 1px), #619236 11.765%, #6d8833 calc(11.765% + 1px), #6d8833 14.706%, #7a7e33 calc(14.706% + 1px), #7a7e33 17.647%, #867436 calc(17.647% + 1px), #867436 20.588%, #936a3d calc(20.588% + 1px), #936a3d 23.529%, #9e6146 calc(23.529% + 1px), #9e6146 26.471%, #a85852 calc(26.471% + 1px), #a85852 29.412%, #b15060 calc(29.412% + 1px), #b15060 32.353%, #b8496f calc(32.353% + 1px), #b8496f 35.294%, #bc437e calc(35.294% + 1px), #bc437e 38.235%, #bf3f8d calc(38.235% + 1px), #bf3f8d 41.176%, #bf3c9c calc(41.176% + 1px), #bf3c9c 44.118%, #bc3ba9 calc(44.118% + 1px), #bc3ba9 47.059%, #b83cb3 calc(47.059% + 1px), #b83cb3 50.000%, #b13ebc calc(50.000% + 1px), #b13ebc 52.941%, #a841c1 calc(52.941% + 1px), #a841c1 55.882%, #9e46c3 calc(55.882% + 1px), #9e46c3 58.824%, #924dc2 calc(58.824% + 1px), #924dc2 61.765%, #8654bd calc(61.765% + 1px), #8654bd 64.706%, #795db6 calc(64.706% + 1px), #795db6 67.647%, #6d66ac calc(67.647% + 1px), #6d66ac 70.588%, #60709f calc(70.588% + 1px), #60709f 73.529%, #557a91 calc(73.529% + 1px), #557a91 76.471%, #4b8482 calc(76.471% + 1px), #4b8482 79.412%, #438e72 calc(79.412% + 1px), #438e72 82.353%, #3c9763 calc(82.353% + 1px), #3c9763 85.294%, #38a055 calc(85.294% + 1px), #38a055 88.235%, #36a749 calc(88.235% + 1px), #36a749 91.176%, #36ae3f calc(91.176% + 1px), #36ae3f 94.118%, #39b338 calc(94.118% + 1px), #39b338 97.059%, #3eb733 calc(97.059% + 1px) 100.000%);

["#43aa50", "#4ba345", "#559b3c", "#619236", "#6d8833", "#7a7e33", "#867436", "#936a3d", "#9e6146", "#a85852", "#b15060", "#b8496f", "#bc437e", "#bf3f8d", "#bf3c9c", "#bc3ba9", "#b83cb3", "#b13ebc", "#a841c1", "#9e46c3", "#924dc2", "#8654bd", "#795db6", "#6d66ac", "#60709f", "#557a91", "#4b8482", "#438e72", "#3c9763", "#38a055", "#36a749", "#36ae3f", "#39b338", "#3eb733"]

// https://grabient.com/_gGCgGEgGDgENgD6gEcgIegHNgJugAEgnYg6phevo8OZs?style=linearSwatches&steps=34&angle=45 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; const float ANGLE = 45.0; vec3 palette(float t) { vec3 a = vec3(0.480, 0.482, 0.481); vec3 b = vec3(0.269, 0.250, 0.284); vec3 c = vec3(0.979, 0.833, 1.123); vec3 d = vec3(-0.400, 2.116, 3.349); 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 mid green to earth to barney to leafy green gradient palette editor

Rainbow mid green to earth to barney to leafy green