/* https://grabient.com/_f__f__f8AgPngPngEcgPngPngyggAAgBmf_rn0n0mMgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #ffe562 0.000%, #ffe562 2.941%, #fedf62 calc(2.941% + 1px), #fedf62 5.882%, #fdd960 calc(5.882% + 1px), #fdd960 8.824%, #fbd25c calc(8.824% + 1px), #fbd25c 11.765%, #f9ca56 calc(11.765% + 1px), #f9ca56 14.706%, #f6c24f calc(14.706% + 1px), #f6c24f 17.647%, #f2ba47 calc(17.647% + 1px), #f2ba47 20.588%, #edb13e calc(20.588% + 1px), #edb13e 23.529%, #e8a835 calc(23.529% + 1px), #e8a835 26.471%, #e29f2d calc(26.471% + 1px), #e29f2d 29.412%, #dc9626 calc(29.412% + 1px), #dc9626 32.353%, #d58c20 calc(32.353% + 1px), #d58c20 35.294%, #ce831c calc(35.294% + 1px), #ce831c 38.235%, #c6791a calc(38.235% + 1px), #c6791a 41.176%, #be6f1a calc(41.176% + 1px), #be6f1a 44.118%, #b6661d calc(44.118% + 1px), #b6661d 47.059%, #ad5d21 calc(47.059% + 1px), #ad5d21 50.000%, #a45427 calc(50.000% + 1px), #a45427 52.941%, #9a4b2e calc(52.941% + 1px), #9a4b2e 55.882%, #914237 calc(55.882% + 1px), #914237 58.824%, #873a3f calc(58.824% + 1px), #873a3f 61.765%, #7e3248 calc(61.765% + 1px), #7e3248 64.706%, #742b50 calc(64.706% + 1px), #742b50 67.647%, #6b2457 calc(67.647% + 1px), #6b2457 70.588%, #611d5d calc(70.588% + 1px), #611d5d 73.529%, #581761 calc(73.529% + 1px), #581761 76.471%, #4f1262 calc(76.471% + 1px), #4f1262 79.412%, #460e62 calc(79.412% + 1px), #460e62 82.353%, #3e0a5f calc(82.353% + 1px), #3e0a5f 85.294%, #36065b calc(85.294% + 1px), #36065b 88.235%, #2e0455 calc(88.235% + 1px), #2e0455 91.176%, #27024d calc(91.176% + 1px), #27024d 94.118%, #200045 calc(94.118% + 1px), #200045 97.059%, #1a003c calc(97.059% + 1px) 100.000%);

["#ffe562", "#fedf62", "#fdd960", "#fbd25c", "#f9ca56", "#f6c24f", "#f2ba47", "#edb13e", "#e8a835", "#e29f2d", "#dc9626", "#d58c20", "#ce831c", "#c6791a", "#be6f1a", "#b6661d", "#ad5d21", "#a45427", "#9a4b2e", "#914237", "#873a3f", "#7e3248", "#742b50", "#6b2457", "#611d5d", "#581761", "#4f1262", "#460e62", "#3e0a5f", "#36065b", "#2e0455", "#27024d", "#200045", "#1a003c"]

// https://grabient.com/_f__f__f8AgPngPngEcgPngPngyggAAgBmf_rn0n0mMgA?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.499, 0.499, 0.244); vec3 b = vec3(0.499, 0.499, 0.142); vec3 c = vec3(0.396, 0.396, 1.280); vec3 d = vec3(0.000, 0.102, -0.021); 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 sand yellow to sienna to dark indigo gradient palette editor

Sunset sand yellow to sienna to dark indigo