/* https://grabient.com/_gHugHJgIXgEigFjgD_gDXgGLgDshX5g3KgWc?style=angularSwatches&steps=5&angle=45 */ background: conic-gradient(from 45deg, #4a1c4d 0.000deg, #4a1c4d 72.000deg, #5e3647 calc(72.000deg + 0.1deg), #5e3647 144.000deg, #76684b calc(144.000deg + 0.1deg), #76684b 216.000deg, #8f9e57 calc(216.000deg + 0.1deg), #8f9e57 288.000deg, #a6c56a calc(288.000deg + 0.1deg) 360.000deg);

// https://grabient.com/_gHugHJgIXgEigFjgD_gDXgGLgDshX5g3KgWc?style=angularSwatches&steps=5&angle=45 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 5.0; const float ANGLE = 45.0; vec3 palette(float t) { vec3 a = vec3(0.494, 0.457, 0.535); vec3 b = vec3(0.290, 0.355, 0.255); vec3 c = vec3(0.215, 0.395, 0.236); vec3 d = vec3(5.625, 3.530, 1.436); 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; // conic from ANGLE, clockwise from top (CSS convention) float t = fract((atan(p.x, p.y) - radians(ANGLE)) / 6.283185); fragColor = vec4(stops(t), 1.0); }

Earthy plum purple to gray brown to light moss green gradient palette editor

Earthy plum purple to gray brown to light moss green