/* https://grabient.com/_gAAgAAgFvfwsfxvf-FgH-gPSguigD0gAAgAAgAvun0gA?style=linearSwatches&steps=34&angle=270 */ background: linear-gradient(270deg, #00003e 0.000%, #00003e 2.941%, #03003f calc(2.941% + 1px), #03003f 5.882%, #0f0043 calc(5.882% + 1px), #0f0043 8.824%, #1b0049 calc(8.824% + 1px), #1b0049 11.765%, #270050 calc(11.765% + 1px), #270050 14.706%, #330059 calc(14.706% + 1px), #330059 17.647%, #3f0062 calc(17.647% + 1px), #3f0062 20.588%, #4b006a calc(20.588% + 1px), #4b006a 23.529%, #560072 calc(23.529% + 1px), #560072 26.471%, #620078 calc(26.471% + 1px), #620078 29.412%, #6d007c calc(29.412% + 1px), #6d007c 32.353%, #78007d calc(32.353% + 1px), #78007d 35.294%, #82007c calc(35.294% + 1px), #82007c 38.235%, #8d0079 calc(38.235% + 1px), #8d0079 41.176%, #970073 calc(41.176% + 1px), #970073 44.118%, #a0006c calc(44.118% + 1px), #a0006c 47.059%, #a90063 calc(47.059% + 1px), #a90063 50.000%, #b2035a calc(50.000% + 1px), #b2035a 52.941%, #bb1952 calc(52.941% + 1px), #bb1952 55.882%, #c32e4a calc(55.882% + 1px), #c32e4a 58.824%, #ca4344 calc(58.824% + 1px), #ca4344 61.765%, #d15840 calc(61.765% + 1px), #d15840 64.706%, #d86c3e calc(64.706% + 1px), #d86c3e 67.647%, #de7f3f calc(67.647% + 1px), #de7f3f 70.588%, #e39042 calc(70.588% + 1px), #e39042 73.529%, #e8a148 calc(73.529% + 1px), #e8a148 76.471%, #ecb04f calc(76.471% + 1px), #ecb04f 79.412%, #f0be57 calc(79.412% + 1px), #f0be57 82.353%, #f4ca60 calc(82.353% + 1px), #f4ca60 85.294%, #f6d469 calc(85.294% + 1px), #f6d469 88.235%, #f9dc71 calc(88.235% + 1px), #f9dc71 91.176%, #fae377 calc(91.176% + 1px), #fae377 94.118%, #fbe77b calc(94.118% + 1px), #fbe77b 97.059%, #fbea7d calc(97.059% + 1px) 100.000%);

["#00003e", "#03003f", "#0f0043", "#1b0049", "#270050", "#330059", "#3f0062", "#4b006a", "#560072", "#620078", "#6d007c", "#78007d", "#82007c", "#8d0079", "#970073", "#a0006c", "#a90063", "#b2035a", "#bb1952", "#c32e4a", "#ca4344", "#d15840", "#d86c3e", "#de7f3f", "#e39042", "#e8a148", "#ecb04f", "#f0be57", "#f4ca60", "#f6d469", "#f9dc71", "#fae377", "#fbe77b", "#fbea7d"]

// https://grabient.com/_gAAgAAgFvfwsfxvf-FgH-gPSguigD0gAAgAAgAvun0gA?style=linearSwatches&steps=34&angle=270 // cosine gradient palette — https://iquilezles.org/articles/palettes/ const float STEPS = 34.0; const float ANGLE = 270.0; vec3 palette(float t) { vec3 a = vec3(0.000, 0.000, 0.367); vec3 b = vec3(-0.986, -0.918, -0.124); vec3 c = vec3(0.255, 0.489, 1.489); vec3 d = vec3(0.244, 0.000, 0.000); 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 dark navy to ruby to sandy yellow gradient palette editor

Sunset dark navy to ruby to sandy yellow