/* https://grabient.com/_gtggFxgFNgomgBggB9gBhgU1gTBgH1gHzgGO?style=linearSwatches&steps=21&angle=135 */ background: linear-gradient(135deg, #50463b 0.000%, #50463b 4.762%, #514836 calc(4.762% + 1px), #514836 9.524%, #524e35 calc(9.524% + 1px), #524e35 14.286%, #535639 calc(14.286% + 1px), #535639 19.048%, #566041 calc(19.048% + 1px), #566041 23.810%, #586a4b calc(23.810% + 1px), #586a4b 28.571%, #5c7258 calc(28.571% + 1px), #5c7258 33.333%, #607663 calc(33.333% + 1px), #607663 38.095%, #65766d calc(38.095% + 1px), #65766d 42.857%, #6a7273 calc(42.857% + 1px), #6a7273 47.619%, #706a75 calc(47.619% + 1px), #706a75 52.381%, #766172 calc(52.381% + 1px), #766172 57.143%, #7d576b calc(57.143% + 1px), #7d576b 61.905%, #854e61 calc(61.905% + 1px), #854e61 66.667%, #8d4855 calc(66.667% + 1px), #8d4855 71.429%, #964649 calc(71.429% + 1px), #964649 76.190%, #9f483f calc(76.190% + 1px), #9f483f 80.952%, #a94e38 calc(80.952% + 1px), #a94e38 85.714%, #b35635 calc(85.714% + 1px), #b35635 90.476%, #be6037 calc(90.476% + 1px), #be6037 95.238%, #ca6a3d calc(95.238% + 1px) 100.000%);

["#50463b", "#514836", "#524e35", "#535639", "#566041", "#586a4b", "#5c7258", "#607663", "#65766d", "#6a7273", "#706a75", "#766172", "#7d576b", "#854e61", "#8d4855", "#964649", "#9f483f", "#a94e38", "#b35635", "#be6037", "#ca6a3d"]

// https://grabient.com/_gtggFxgFNgomgBggB9gBhgU1gTBgH1gHzgGO?style=linearSwatches&steps=21&angle=135 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 21.0; const float ANGLE = 135.0; vec3 palette(float t) { vec3 a = vec3(2.912, 0.369, 0.333); vec3 b = vec3(2.598, 0.096, 0.125); vec3 c = vec3(0.097, 1.333, 1.217); vec3 d = vec3(0.501, 0.499, 0.398); 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); }

Earthy charcoal gray to dim gray to terra cotta gradient palette editor

Earthy charcoal gray to dim gray to terra cotta