/* https://grabient.com/_f-ef-ef-egGYgGYgGYgPngPngPnf-ugAAgBRoOvovogA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #c8d5c8 0.000%, #c8d5c8 2.941%, #d0d3bd calc(2.941% + 1px), #d0d3bd 5.882%, #d4ceaf calc(5.882% + 1px), #d4ceaf 8.824%, #d5c59e calc(8.824% + 1px), #d5c59e 11.765%, #d2b88c calc(11.765% + 1px), #d2b88c 14.706%, #cbaa79 calc(14.706% + 1px), #cbaa79 17.647%, #c19865 calc(17.647% + 1px), #c19865 20.588%, #b48651 calc(20.588% + 1px), #b48651 23.529%, #a5723f calc(23.529% + 1px), #a5723f 26.471%, #935f2e calc(26.471% + 1px), #935f2e 29.412%, #804b20 calc(29.412% + 1px), #804b20 32.353%, #6c3914 calc(32.353% + 1px), #6c3914 35.294%, #59290b calc(35.294% + 1px), #59290b 38.235%, #461c06 calc(38.235% + 1px), #461c06 41.176%, #341105 calc(41.176% + 1px), #341105 44.118%, #250908 calc(44.118% + 1px), #250908 47.059%, #18060e calc(47.059% + 1px), #18060e 50.000%, #0e0617 calc(50.000% + 1px), #0e0617 52.941%, #080924 calc(52.941% + 1px), #080924 55.882%, #051033 calc(55.882% + 1px), #051033 58.824%, #061b45 calc(58.824% + 1px), #061b45 61.765%, #0b2958 calc(61.765% + 1px), #0b2958 64.706%, #13396b calc(64.706% + 1px), #13396b 67.647%, #1f4b7f calc(67.647% + 1px), #1f4b7f 70.588%, #2d5e92 calc(70.588% + 1px), #2d5e92 73.529%, #3e72a4 calc(73.529% + 1px), #3e72a4 76.471%, #5085b3 calc(76.471% + 1px), #5085b3 79.412%, #6498c1 calc(79.412% + 1px), #6498c1 82.353%, #77a9cb calc(82.353% + 1px), #77a9cb 85.294%, #8bb8d2 calc(85.294% + 1px), #8bb8d2 88.235%, #9dc4d5 calc(88.235% + 1px), #9dc4d5 91.176%, #aecdd4 calc(91.176% + 1px), #aecdd4 94.118%, #bcd3d0 calc(94.118% + 1px), #bcd3d0 97.059%, #c7d5c8 calc(97.059% + 1px) 100.000%);

["#c8d5c8", "#d0d3bd", "#d4ceaf", "#d5c59e", "#d2b88c", "#cbaa79", "#c19865", "#b48651", "#a5723f", "#935f2e", "#804b20", "#6c3914", "#59290b", "#461c06", "#341105", "#250908", "#18060e", "#0e0617", "#080924", "#051033", "#061b45", "#0b2958", "#13396b", "#1f4b7f", "#2d5e92", "#3e72a4", "#5085b3", "#6498c1", "#77a9cb", "#8bb8d2", "#9dc4d5", "#aecdd4", "#bcd3d0", "#c7d5c8"]

// https://grabient.com/_f-ef-ef-egGYgGYgGYgPngPngPnf-ugAAgBRoOvovogA?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.082, 0.000, 0.081); 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 sepia to almost black to deep sea blue gradient palette editor

Rainbow light gray to sepia to almost black to deep sea blue