/* https://grabient.com/_gHLfOBfOBgGHg9og9ogGVgBlgBogHugN1gOz?style=linearSwatches&steps=21&angle=315 */ background: linear-gradient(315deg, #110087 0.000%, #110087 4.762%, #120091 calc(4.762% + 1px), #120091 9.524%, #14009a calc(9.524% + 1px), #14009a 14.286%, #1700a2 calc(14.286% + 1px), #1700a2 19.048%, #1c11a9 calc(19.048% + 1px), #1c11a9 23.810%, #2322b0 calc(23.810% + 1px), #2322b0 28.571%, #2a33b5 calc(28.571% + 1px), #2a33b5 33.333%, #3343b9 calc(33.333% + 1px), #3343b9 38.095%, #3e52bb calc(38.095% + 1px), #3e52bb 42.857%, #485fbd calc(42.857% + 1px), #485fbd 47.619%, #546dbe calc(47.619% + 1px), #546dbe 52.381%, #6079be calc(52.381% + 1px), #6079be 57.143%, #6d84bc calc(57.143% + 1px), #6d84bc 61.905%, #7a8eba calc(61.905% + 1px), #7a8eba 66.667%, #8697b6 calc(66.667% + 1px), #8697b6 71.429%, #93a0b2 calc(71.429% + 1px), #93a0b2 76.190%, #9ea7ac calc(76.190% + 1px), #9ea7ac 80.952%, #aaada5 calc(80.952% + 1px), #aaada5 85.714%, #b4b29d calc(85.714% + 1px), #b4b29d 90.476%, #bdb795 calc(90.476% + 1px), #bdb795 95.238%, #c5ba8b calc(95.238% + 1px) 100.000%);

["#110087", "#120091", "#14009a", "#1700a2", "#1c11a9", "#2322b0", "#2a33b5", "#3343b9", "#3e52bb", "#485fbd", "#546dbe", "#6079be", "#6d84bc", "#7a8eba", "#8697b6", "#93a0b2", "#9ea7ac", "#aaada5", "#b4b29d", "#bdb795", "#c5ba8b"]

// https://grabient.com/_gHLfOBfOBgGHg9og9ogGVgBlgBogHugN1gOz?style=linearSwatches&steps=21&angle=315 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 21.0; const float ANGLE = 315.0; vec3 palette(float t) { vec3 a = vec3(0.459, -3.199, -3.199); vec3 b = vec3(0.391, 3.944, 3.944); vec3 c = vec3(0.405, 0.101, 0.104); vec3 d = vec3(0.494, 0.885, 0.947); 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); }

Ocean complementary dark blue and sandstone gradient palette editor

Ocean complementary dark blue and sandstone