/* https://grabient.com/_gI1gI1gI1gGYgGYgGYgPngPngPngBRgAAf-u?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #ebf8eb 0.000%, #ebf8eb 2.941%, #e0f6f3 calc(2.941% + 1px), #e0f6f3 5.882%, #d2f1f7 calc(5.882% + 1px), #d2f1f7 8.824%, #c1e8f8 calc(8.824% + 1px), #c1e8f8 11.765%, #afdbf5 calc(11.765% + 1px), #afdbf5 14.706%, #9ccdee calc(14.706% + 1px), #9ccdee 17.647%, #88bbe4 calc(17.647% + 1px), #88bbe4 20.588%, #74a9d7 calc(20.588% + 1px), #74a9d7 23.529%, #6295c8 calc(23.529% + 1px), #6295c8 26.471%, #5181b6 calc(26.471% + 1px), #5181b6 29.412%, #436ea3 calc(29.412% + 1px), #436ea3 32.353%, #375c8f calc(32.353% + 1px), #375c8f 35.294%, #2e4c7c calc(35.294% + 1px), #2e4c7c 38.235%, #293e69 calc(38.235% + 1px), #293e69 41.176%, #283457 calc(41.176% + 1px), #283457 44.118%, #2b2c48 calc(44.118% + 1px), #2b2c48 47.059%, #31293b calc(47.059% + 1px), #31293b 50.000%, #3a2831 calc(50.000% + 1px), #3a2831 52.941%, #472c2b calc(52.941% + 1px), #472c2b 55.882%, #563328 calc(55.882% + 1px), #563328 58.824%, #683e29 calc(58.824% + 1px), #683e29 61.765%, #7a4c2e calc(61.765% + 1px), #7a4c2e 64.706%, #8e5c36 calc(64.706% + 1px), #8e5c36 67.647%, #a26e42 calc(67.647% + 1px), #a26e42 70.588%, #b58150 calc(70.588% + 1px), #b58150 73.529%, #c79561 calc(73.529% + 1px), #c79561 76.471%, #d6a873 calc(76.471% + 1px), #d6a873 79.412%, #e4bb87 calc(79.412% + 1px), #e4bb87 82.353%, #eecc9a calc(82.353% + 1px), #eecc9a 85.294%, #f5dbae calc(85.294% + 1px), #f5dbae 88.235%, #f8e7c0 calc(88.235% + 1px), #f8e7c0 91.176%, #f7f0d1 calc(91.176% + 1px), #f7f0d1 94.118%, #f3f6df calc(94.118% + 1px), #f3f6df 97.059%, #ebf8ea calc(97.059% + 1px) 100.000%);

["#ebf8eb", "#e0f6f3", "#d2f1f7", "#c1e8f8", "#afdbf5", "#9ccdee", "#88bbe4", "#74a9d7", "#6295c8", "#5181b6", "#436ea3", "#375c8f", "#2e4c7c", "#293e69", "#283457", "#2b2c48", "#31293b", "#3a2831", "#472c2b", "#563328", "#683e29", "#7a4c2e", "#8e5c36", "#a26e42", "#b58150", "#c79561", "#d6a873", "#e4bb87", "#eecc9a", "#f5dbae", "#f8e7c0", "#f7f0d1", "#f3f6df", "#ebf8ea"]

// https://grabient.com/_gI1gI1gI1gGYgGYgGYgPngPngPngBRgAAf-u?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.565, 0.565, 0.565); vec3 b = vec3(0.408, 0.408, 0.408); vec3 c = vec3(0.999, 0.999, 0.999); vec3 d = vec3(0.081, 0.000, -0.082); 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 honeydew to muted blue to dark blue gray to light brown gradient palette editor

Rainbow honeydew to muted blue to dark blue gray to light brown