/* https://grabient.com/_gAAgAAgAAgPngPngPngPngPngPngAAgA9gB6n0n0vogA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #fff6db 0.000%, #fff6db 2.941%, #fdeac9 calc(2.941% + 1px), #fdeac9 5.882%, #f6dbb4 calc(5.882% + 1px), #f6dbb4 8.824%, #ebc99d calc(8.824% + 1px), #ebc99d 11.765%, #dcb485 calc(11.765% + 1px), #dcb485 14.706%, #c99d6d calc(14.706% + 1px), #c99d6d 17.647%, #b58555 calc(17.647% + 1px), #b58555 20.588%, #9e6d3f calc(20.588% + 1px), #9e6d3f 23.529%, #86562c calc(23.529% + 1px), #86562c 26.471%, #6e401b calc(26.471% + 1px), #6e401b 29.412%, #562c0e calc(29.412% + 1px), #562c0e 32.353%, #401b05 calc(32.353% + 1px), #401b05 35.294%, #2c0e01 calc(35.294% + 1px), #2c0e01 38.235%, #1c0501 calc(38.235% + 1px), #1c0501 41.176%, #0e0105 calc(41.176% + 1px), #0e0105 44.118%, #05010e calc(44.118% + 1px), #05010e 47.059%, #01051c calc(47.059% + 1px), #01051c 50.000%, #010e2c calc(50.000% + 1px), #010e2c 52.941%, #051b40 calc(52.941% + 1px), #051b40 55.882%, #0e2c56 calc(55.882% + 1px), #0e2c56 58.824%, #1b406e calc(58.824% + 1px), #1b406e 61.765%, #2c5686 calc(61.765% + 1px), #2c5686 64.706%, #3f6d9e calc(64.706% + 1px), #3f6d9e 67.647%, #5585b4 calc(67.647% + 1px), #5585b4 70.588%, #6d9dc9 calc(70.588% + 1px), #6d9dc9 73.529%, #85b4dc calc(73.529% + 1px), #85b4dc 76.471%, #9dc9eb calc(76.471% + 1px), #9dc9eb 79.412%, #b4dbf6 calc(79.412% + 1px), #b4dbf6 82.353%, #c9eafd calc(82.353% + 1px), #c9eafd 85.294%, #dbf6ff calc(85.294% + 1px), #dbf6ff 88.235%, #eafcfd calc(88.235% + 1px), #eafcfd 91.176%, #f5fff6 calc(91.176% + 1px), #f5fff6 94.118%, #fcfdeb calc(94.118% + 1px), #fcfdeb 97.059%, #fff6dc calc(97.059% + 1px) 100.000%);

["#fff6db", "#fdeac9", "#f6dbb4", "#ebc99d", "#dcb485", "#c99d6d", "#b58555", "#9e6d3f", "#86562c", "#6e401b", "#562c0e", "#401b05", "#2c0e01", "#1c0501", "#0e0105", "#05010e", "#01051c", "#010e2c", "#051b40", "#0e2c56", "#1b406e", "#2c5686", "#3f6d9e", "#5585b4", "#6d9dc9", "#85b4dc", "#9dc9eb", "#b4dbf6", "#c9eafd", "#dbf6ff", "#eafcfd", "#f5fff6", "#fcfdeb", "#fff6dc"]

// https://grabient.com/_gAAgAAgAAgPngPngPngPngPngPngAAgA9gB6n0n0vogA?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.500); vec3 b = vec3(0.499, 0.499, 0.499); vec3 c = vec3(0.999, 0.999, 0.999); vec3 d = vec3(0.000, 0.061, 0.122); 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 corn silk to camel to very dark brown to muted blue gradient palette editor

Rainbow corn silk to camel to very dark brown to muted blue