/* https://grabient.com/_gF9gEogCVgC7gDlgCpgK6gOigQWgMRgLGgJt?style=radialSwatches&steps=34&angle=180 */ background: radial-gradient(circle, #6c3d07 0.000%, #6c3d07 2.941%, #72470d calc(2.941% + 1px), #72470d 5.882%, #775115 calc(5.882% + 1px), #775115 8.824%, #7d5c1d calc(8.824% + 1px), #7d5c1d 11.765%, #826525 calc(11.765% + 1px), #826525 14.706%, #866e2e calc(14.706% + 1px), #866e2e 17.647%, #8a7636 calc(17.647% + 1px), #8a7636 20.588%, #8d7c3e calc(20.588% + 1px), #8d7c3e 23.529%, #8f8144 calc(23.529% + 1px), #8f8144 26.471%, #90844a calc(26.471% + 1px), #90844a 29.412%, #91864e calc(29.412% + 1px), #91864e 32.353%, #918550 calc(32.353% + 1px), #918550 35.294%, #8f8351 calc(35.294% + 1px), #8f8351 38.235%, #8d7f50 calc(38.235% + 1px), #8d7f50 41.176%, #8b7a4e calc(41.176% + 1px), #8b7a4e 44.118%, #877349 calc(44.118% + 1px), #877349 47.059%, #836a44 calc(47.059% + 1px), #836a44 50.000%, #7e613d calc(50.000% + 1px), #7e613d 52.941%, #795735 calc(52.941% + 1px), #795735 55.882%, #744d2d calc(55.882% + 1px), #744d2d 58.824%, #6e4325 calc(58.824% + 1px), #6e4325 61.765%, #67391c calc(61.765% + 1px), #67391c 64.706%, #612f14 calc(64.706% + 1px), #612f14 67.647%, #5b270d calc(67.647% + 1px), #5b270d 70.588%, #551f06 calc(70.588% + 1px), #551f06 73.529%, #4f1901 calc(73.529% + 1px), #4f1901 76.471%, #491500 calc(76.471% + 1px), #491500 79.412%, #441200 calc(79.412% + 1px), #441200 82.353%, #3f1100 calc(82.353% + 1px), #3f1100 85.294%, #3b1200 calc(85.294% + 1px), #3b1200 88.235%, #371500 calc(88.235% + 1px), #371500 91.176%, #351904 calc(91.176% + 1px), #351904 94.118%, #331f0a calc(94.118% + 1px), #331f0a 97.059%, #322611 calc(97.059% + 1px) 100.000%);

["#6c3d07", "#72470d", "#775115", "#7d5c1d", "#826525", "#866e2e", "#8a7636", "#8d7c3e", "#8f8144", "#90844a", "#91864e", "#918550", "#8f8351", "#8d7f50", "#8b7a4e", "#877349", "#836a44", "#7e613d", "#795735", "#744d2d", "#6e4325", "#67391c", "#612f14", "#5b270d", "#551f06", "#4f1901", "#491500", "#441200", "#3f1100", "#3b1200", "#371500", "#351904", "#331f0a", "#322611"]

// https://grabient.com/_gF9gEogCVgC7gDlgCpgK6gOigQWgMRgLGgJt?style=radialSwatches&steps=34&angle=180 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; vec3 palette(float t) { vec3 a = vec3(0.381, 0.296, 0.149); vec3 b = vec3(0.187, 0.229, 0.169); vec3 c = vec3(0.698, 0.930, 1.046); vec3 d = vec3(0.785, 0.710, 0.621); 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; // circle to the farthest corner (CSS default) float t = length(p) / length(0.5 * iResolution.xy); fragColor = vec4(stops(t), 1.0); }

Autumn mud brown to drab to dark brown gradient palette editor

Autumn mud brown to drab to dark brown