/* https://grabient.com/_gIigKJgI1gCXgEGgDtgNYgFhgSdgFngHjgJy?style=linearSwatches&steps=21&angle=0 */ background: linear-gradient(0deg, #736366 0.000%, #736366 4.762%, #6c6378 calc(4.762% + 1px), #6c6378 9.524%, #67638e calc(9.524% + 1px), #67638e 14.286%, #6564a4 calc(14.286% + 1px), #6564a4 19.048%, #6566b7 calc(19.048% + 1px), #6566b7 23.810%, #6969c5 calc(23.810% + 1px), #6969c5 28.571%, #6e6dcc calc(28.571% + 1px), #6e6dcc 33.333%, #7671cb calc(33.333% + 1px), #7671cb 38.095%, #8076c1 calc(38.095% + 1px), #8076c1 42.857%, #8a7cb1 calc(42.857% + 1px), #8a7cb1 47.619%, #94829d calc(47.619% + 1px), #94829d 52.381%, #9e8886 calc(52.381% + 1px), #9e8886 57.143%, #a68f71 calc(57.143% + 1px), #a68f71 61.905%, #ac9661 calc(61.905% + 1px), #ac9661 66.667%, #b09d56 calc(66.667% + 1px), #b09d56 71.429%, #b2a554 calc(71.429% + 1px), #b2a554 76.190%, #b0ac5a calc(76.190% + 1px), #b0ac5a 80.952%, #acb367 calc(80.952% + 1px), #acb367 85.714%, #a6ba79 calc(85.714% + 1px), #a6ba79 90.476%, #9dc18f calc(90.476% + 1px), #9dc18f 95.238%, #94c8a5 calc(95.238% + 1px) 100.000%);

["#736366", "#6c6378", "#67638e", "#6564a4", "#6566b7", "#6969c5", "#6e6dcc", "#7671cb", "#8076c1", "#8a7cb1", "#94829d", "#9e8886", "#a68f71", "#ac9661", "#b09d56", "#b2a554", "#b0ac5a", "#acb367", "#a6ba79", "#9dc18f", "#94c8a5"]

// https://grabient.com/_gIigKJgI1gCXgEGgDtgNYgFhgSdgFngHjgJy?style=linearSwatches&steps=21&angle=0 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 21.0; const float ANGLE = 0.0; vec3 palette(float t) { vec3 a = vec3(0.546, 0.649, 0.565); vec3 b = vec3(0.151, 0.262, 0.237); vec3 c = vec3(0.856, 0.353, 1.181); vec3 d = vec3(0.359, 0.483, 0.626); 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); }

Dim gray to dark periwinkle to pale teal gradient palette editor

Dim gray to dark periwinkle to pale teal