Desaturated colours Threlte (three.js)

Trying to generate a skybox, like in this video, using Threlte but the colours keep appearing desaturated.

Image in vscode:

Image once a texture: imgur link

+page.svelte:

<script>
    import * as Threlte from '@threlte/core';
    import * as Three from 'three';
    import * as Utils from 'three/src/math/MathUtils';

    import tex from '$lib/assets/pana2.jpg';

    // Load the panoramic image and create a texture
    const loader = new Three.TextureLoader();
    const texture = loader.load('/skybox/pana.jpg');

    // Create a spherical geometry and map the texture to it
    const skybox = new Three.SphereGeometry(500, 60, 40);

    // Flip the geometry inside out
    skybox.scale(-1, 1, 1);
</script>

<div class="scene">
    <Threlte.Canvas>
        <!-- Camera -->
        <Threlte.PerspectiveCamera position= fov={75} near={0.1} far={1000}>
            <!-- Controls -->
            <Threlte.OrbitControls autoRotate autoRotateSpeed={0.25} />
        </Threlte.PerspectiveCamera>

        <!-- Lights the scene equally -->
        <Threlte.AmbientLight color={0xffffff} intensity={0.1} />

        <!-- Skybox -->
        <Threlte.Mesh geometry={skybox} material={new Three.MeshBasicMaterial({ map: texture })} />
    </Threlte.Canvas>
</div>

<style>

    .scene {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        background: radial-gradient(hsl(220 14% 20%), hsl(220 20% 10%));
        background-attachment: fixed;
    }
</style>

• Tried changing ambient lighting values.
• Tried different light sources.
• Changed image location.
• Used different loading method (useTexture method).

None worked.

Edit: Desaturation issue caused by image encoding, view answer below for solution.