/* https://grabient.com/_gAAgAAf-ufwsfxBf3EgNmgl5hCjgD0gbufz4gAvopVgA?style=linearSwatches&steps=34&angle=90 */ background: linear-gradient(90deg, #000000 0.000%, #000000 2.941%, #0f0019 calc(2.941% + 1px), #0f0019 5.882%, #280054 calc(5.882% + 1px), #280054 8.824%, #400077 calc(8.824% + 1px), #400077 11.765%, #58007a calc(11.765% + 1px), #58007a 14.706%, #6e005c calc(14.706% + 1px), #6e005c 17.647%, #840024 calc(17.647% + 1px), #840024 20.588%, #980000 calc(20.588% + 1px), #980000 23.529%, #ab0000 calc(23.529% + 1px), #ab0000 26.471%, #bc0000 calc(26.471% + 1px), #bc0000 29.412%, #cb0000 calc(29.412% + 1px), #cb0000 32.353%, #d90a00 calc(32.353% + 1px), #d90a00 35.294%, #e44c00 calc(35.294% + 1px), #e44c00 38.235%, #ed8900 calc(38.235% + 1px), #ed8900 41.176%, #f4bb1b calc(41.176% + 1px), #f4bb1b 44.118%, #f8df55 calc(44.118% + 1px), #f8df55 47.059%, #faf278 calc(47.059% + 1px), #faf278 50.000%, #f9f37a calc(50.000% + 1px), #f9f37a 52.941%, #f6e15b calc(52.941% + 1px), #f6e15b 55.882%, #f1bf23 calc(55.882% + 1px), #f1bf23 58.824%, #e98e00 calc(58.824% + 1px), #e98e00 61.765%, #df5200 calc(61.765% + 1px), #df5200 64.706%, #d31100 calc(64.706% + 1px), #d31100 67.647%, #c40000 calc(67.647% + 1px), #c40000 70.588%, #b40000 calc(70.588% + 1px), #b40000 73.529%, #a20000 calc(73.529% + 1px), #a20000 76.471%, #8f0000 calc(76.471% + 1px), #8f0000 79.412%, #7a001c calc(79.412% + 1px), #7a001c 82.353%, #640056 calc(82.353% + 1px), #640056 85.294%, #4d0078 calc(85.294% + 1px), #4d0078 88.235%, #350079 calc(88.235% + 1px), #350079 91.176%, #1c005a calc(91.176% + 1px), #1c005a 94.118%, #040021 calc(94.118% + 1px), #040021 97.059%, #000000 calc(97.059% + 1px) 100.000%);

["#000000", "#0f0019", "#280054", "#400077", "#58007a", "#6e005c", "#840024", "#980000", "#ab0000", "#bc0000", "#cb0000", "#d90a00", "#e44c00", "#ed8900", "#f4bb1b", "#f8df55", "#faf278", "#f9f37a", "#f6e15b", "#f1bf23", "#e98e00", "#df5200", "#d31100", "#c40000", "#b40000", "#a20000", "#8f0000", "#7a001c", "#640056", "#4d0078", "#350079", "#1c005a", "#040021", "#000000"]

// https://grabient.com/_gAAgAAf-ufwsfxBf3EgNmgl5hCjgD0gbufz4gAvopVgA?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.000, 0.000, -0.082); vec3 b = vec3(-0.980, -0.959, -0.572); vec3 c = vec3(0.519, 1.448, 2.543); vec3 d = vec3(0.244, 1.774, -0.776); 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); }

Rainbow black to straw to fire brick to indigo gradient palette editor

Rainbow black to straw to fire brick to indigo