/* https://grabient.com/_gAAgAAgAAgPngPngPngPngPngPngAAgCOgEdn0n0mMgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #ffcf64 0.000%, #ffcf64 2.941%, #ffc85a calc(2.941% + 1px), #ffc85a 5.882%, #fdc051 calc(5.882% + 1px), #fdc051 8.824%, #fcb749 calc(8.824% + 1px), #fcb749 11.765%, #f9ae40 calc(11.765% + 1px), #f9ae40 14.706%, #f6a538 calc(14.706% + 1px), #f6a538 17.647%, #f29c30 calc(17.647% + 1px), #f29c30 20.588%, #ee9329 calc(20.588% + 1px), #ee9329 23.529%, #e88922 calc(23.529% + 1px), #e88922 26.471%, #e3801c calc(26.471% + 1px), #e3801c 29.412%, #dc7616 calc(29.412% + 1px), #dc7616 32.353%, #d66c11 calc(32.353% + 1px), #d66c11 35.294%, #ce630d calc(35.294% + 1px), #ce630d 38.235%, #c75a09 calc(38.235% + 1px), #c75a09 41.176%, #be5106 calc(41.176% + 1px), #be5106 44.118%, #b64803 calc(44.118% + 1px), #b64803 47.059%, #ad3f01 calc(47.059% + 1px), #ad3f01 50.000%, #a43700 calc(50.000% + 1px), #a43700 52.941%, #9b3000 calc(52.941% + 1px), #9b3000 55.882%, #912801 calc(55.882% + 1px), #912801 58.824%, #882202 calc(58.824% + 1px), #882202 61.765%, #7e1b04 calc(61.765% + 1px), #7e1b04 64.706%, #751606 calc(64.706% + 1px), #751606 67.647%, #6b1109 calc(67.647% + 1px), #6b1109 70.588%, #620c0d calc(70.588% + 1px), #620c0d 73.529%, #580912 calc(73.529% + 1px), #580912 76.471%, #4f0517 calc(76.471% + 1px), #4f0517 79.412%, #47031d calc(79.412% + 1px), #47031d 82.353%, #3e0123 calc(82.353% + 1px), #3e0123 85.294%, #36002a calc(85.294% + 1px), #36002a 88.235%, #2f0031 calc(88.235% + 1px), #2f0031 91.176%, #270139 calc(91.176% + 1px), #270139 94.118%, #210241 calc(94.118% + 1px), #210241 97.059%, #1b044a calc(97.059% + 1px) 100.000%);

["#ffcf64", "#ffc85a", "#fdc051", "#fcb749", "#f9ae40", "#f6a538", "#f29c30", "#ee9329", "#e88922", "#e3801c", "#dc7616", "#d66c11", "#ce630d", "#c75a09", "#be5106", "#b64803", "#ad3f01", "#a43700", "#9b3000", "#912801", "#882202", "#7e1b04", "#751606", "#6b1109", "#620c0d", "#580912", "#4f0517", "#47031d", "#3e0123", "#36002a", "#2f0031", "#270139", "#210241", "#1b044a"]

// https://grabient.com/_gAAgAAgAAgPngPngPngPngPngPngAAgCOgEdn0n0mMgA?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.500, 0.500, 0.500); vec3 b = vec3(0.499, 0.499, 0.499); vec3 c = vec3(0.396, 0.396, 0.396); vec3 d = vec3(0.000, 0.142, 0.285); 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); }

Sunset light mustard to rust to dark indigo gradient palette editor

Sunset light mustard to rust to dark indigo