/* https://grabient.com/_f-ef-ef-egGYgGYgGYgPngPngPngBRgAAf-uoOvovogA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #c8d5c8 0.000%, #c8d5c8 2.941%, #bdd3d0 calc(2.941% + 1px), #bdd3d0 5.882%, #afced4 calc(5.882% + 1px), #afced4 8.824%, #9ec5d5 calc(8.824% + 1px), #9ec5d5 11.765%, #8cb8d2 calc(11.765% + 1px), #8cb8d2 14.706%, #79aacb calc(14.706% + 1px), #79aacb 17.647%, #6598c1 calc(17.647% + 1px), #6598c1 20.588%, #5186b4 calc(20.588% + 1px), #5186b4 23.529%, #3f72a5 calc(23.529% + 1px), #3f72a5 26.471%, #2e5f93 calc(26.471% + 1px), #2e5f93 29.412%, #204b80 calc(29.412% + 1px), #204b80 32.353%, #14396c calc(32.353% + 1px), #14396c 35.294%, #0b2959 calc(35.294% + 1px), #0b2959 38.235%, #061c46 calc(38.235% + 1px), #061c46 41.176%, #051134 calc(41.176% + 1px), #051134 44.118%, #080925 calc(44.118% + 1px), #080925 47.059%, #0e0618 calc(47.059% + 1px), #0e0618 50.000%, #17060e calc(50.000% + 1px), #17060e 52.941%, #240908 calc(52.941% + 1px), #240908 55.882%, #331005 calc(55.882% + 1px), #331005 58.824%, #451b06 calc(58.824% + 1px), #451b06 61.765%, #58290b calc(61.765% + 1px), #58290b 64.706%, #6b3913 calc(64.706% + 1px), #6b3913 67.647%, #7f4b1f calc(67.647% + 1px), #7f4b1f 70.588%, #925e2d calc(70.588% + 1px), #925e2d 73.529%, #a4723e calc(73.529% + 1px), #a4723e 76.471%, #b38550 calc(76.471% + 1px), #b38550 79.412%, #c19864 calc(79.412% + 1px), #c19864 82.353%, #cba977 calc(82.353% + 1px), #cba977 85.294%, #d2b88b calc(85.294% + 1px), #d2b88b 88.235%, #d5c49d calc(88.235% + 1px), #d5c49d 91.176%, #d4cdae calc(91.176% + 1px), #d4cdae 94.118%, #d0d3bc calc(94.118% + 1px), #d0d3bc 97.059%, #c8d5c7 calc(97.059% + 1px) 100.000%);

["#c8d5c8", "#bdd3d0", "#afced4", "#9ec5d5", "#8cb8d2", "#79aacb", "#6598c1", "#5186b4", "#3f72a5", "#2e5f93", "#204b80", "#14396c", "#0b2959", "#061c46", "#051134", "#080925", "#0e0618", "#17060e", "#240908", "#331005", "#451b06", "#58290b", "#6b3913", "#7f4b1f", "#925e2d", "#a4723e", "#b38550", "#c19864", "#cba977", "#d2b88b", "#d5c49d", "#d4cdae", "#d0d3bc", "#c8d5c7"]

// https://grabient.com/_f-ef-ef-egGYgGYgGYgPngPngPngBRgAAf-uoOvovogA?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.428, 0.428, 0.428); 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 light gray to cobalt to almost black to sepia gradient palette editor

Rainbow light gray to cobalt to almost black to sepia