diff --git a/examples/al-aas225.html b/examples/al-aas225.html
index e80257b8..ef7cbbaf 100644
--- a/examples/al-aas225.html
+++ b/examples/al-aas225.html
@@ -17,7 +17,7 @@
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', { fov:0.15, target: 'Arp 240', showReticle: false, fullScreen: true });
-        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "rainbow", stretch: "Linear"}));
+        aladin.setBaseImageLayer(aladin.newImageSurvey('P/SDSS9/g', {colormap: "sinebow", stretch: "Linear"}));
 
         var simbad = A.catalog({name: 'Simbad', sourceSize: 16, color: '#4050F0'});
         aladin.addCatalog(simbad);
diff --git a/examples/al-additive-blend.html b/examples/al-additive-blend.html
index b6393b11..711cd6b0 100644
--- a/examples/al-additive-blend.html
+++ b/examples/al-additive-blend.html
@@ -12,11 +12,12 @@ A.init.then(() => {
     let aladin = A.aladin('#aladin-lite-div', {projection: "TAN", survey: "P/HSC/DR2/deep/g", target: '02 21 36.529 -05 31 20.16', fov: 0.1});
     
     let HSCGreenSurvey = aladin.getBaseImageLayer();
-    HSCGreenSurvey.changeImageFormat("fits");
-    HSCGreenSurvey.setColor([0, 1.0, 0, 1.0], { stretch: "asinh" });
+    HSCGreenSurvey.setImageFormat("fits");
+    HSCGreenSurvey.setColormap("green", { stretch: "asinh" });
+    HSCGreenSurvey.setCuts(-0.2186, 5.30322);
 
-    const HSCRedSurvey = aladin.createImageSurvey('HSC-r', "HSC red", "CDS/P/HSC/DR2/deep/r", null, null, {imgFormat: 'fits', color: [1.0, 0.0, 0.0, 1.0], additive: true, stretch: "asinh"});
-    const HSCBlueSurvey = aladin.createImageSurvey('HSC-b', "HSC blue", "CDS/P/HSC/DR2/deep/z", null, null, {imgFormat: 'fits', color: [0.0, 0.0, 1.0, 1.0], additive: true, stretch: "asinh"});
+    const HSCRedSurvey = aladin.createImageSurvey('HSC-r', "HSC red", "CDS/P/HSC/DR2/deep/r", null, null, {imgFormat: 'fits', colormap: "red", minCut: 0.34228, maxCut: 2.75785, additive: true, stretch: "asinh"});
+    const HSCBlueSurvey = aladin.createImageSurvey('HSC-b', "HSC blue", "CDS/P/HSC/DR2/deep/z", null, null, {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
 
     aladin.setOverlayImageLayer('HSC-r', 'hsc red layer');
     aladin.setOverlayImageLayer('HSC-b', 'hsc blue layer');
diff --git a/examples/al-animation-CS-CDS-2022.html b/examples/al-animation-CS-CDS-2022.html
index 60a458af..d3c3a339 100644
--- a/examples/al-animation-CS-CDS-2022.html
+++ b/examples/al-animation-CS-CDS-2022.html
@@ -24,11 +24,10 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', fov: 400, fullScreen: true, showCooGrid: false, showReticle: false})
         aladin.gotoRaDec(79.9525321, -69.2742586)
-        const gaiaFlux = aladin.createImageSurvey('P/DM/flux-G/I/355/gaiadr3', "GaiaDR3GFlux", null, null, null)
+        const gaiaFlux = aladin.createImageSurvey('P/DM/flux-G/I/355/gaiadr3', "GaiaDR3GFlux", null, null, null, {imgFormat: 'fits', stretch: 'log'})
         aladin.setBaseImageLayer(gaiaFlux)
-        gaiaFlux.setOptions({'imgFormat': 'fits', 'stretch': 'log'})
-        gaiaFlux.setCuts([3e5, 1e8])
-            
+        gaiaFlux.setCuts(3e5, 1e8)
+
         aladin.setProjection('MOL')
 
 
@@ -306,7 +305,7 @@
 
                 let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132
                 let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759
-                meerkat.setCuts([cut0, cut1])
+                meerkat.setCuts(cut0, cut1)
             }
 
         } 
diff --git a/examples/al-chinavo.html b/examples/al-chinavo.html
index 94f5d780..e4173af9 100644
--- a/examples/al-chinavo.html
+++ b/examples/al-chinavo.html
@@ -17,7 +17,7 @@
       // Start up Aladin Lite
       aladin = A.aladin('#aladin-lite-div', {target: 'M81', fov: 360, showCooGrid: true});
       aladin.setImageSurvey(
-        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'fits', colormap: "redtemperature"})
+        aladin.newImageSurvey('https://hips.china-vo.org/change2-moon-7m-dom', {imgFormat: 'png', colormap: "redtemperature"})
       );
   });
 </script>
diff --git a/examples/al-set-colormap.html b/examples/al-set-colormap.html
index 81368133..d9913746 100644
--- a/examples/al-set-colormap.html
+++ b/examples/al-set-colormap.html
@@ -15,8 +15,8 @@
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {cooFrame: 'galactic', target: 'galactic center', survey: 'P/Finkbeiner'});
-        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma', 'rainbow',
-        // 'rdbu', 'rdyibu', 'redtemperature', 'spectral', 'summer', 'viridis', 'yignbu' and 'yiorbr'
+        // possible values are 'blues', 'cividis', 'cubehelix', 'eosb', 'grayscale', 'inferno', 'magma', 'native', 'parula', 'plasma',
+        // 'rdbu', 'rdylbu', 'redtemperature', 'sinebow', 'spectral', 'summer', 'viridis', 'ylgnbu' and 'ylorbr'
         aladin.getBaseImageLayer().setColormap("cubehelix");
         //aladin.getBaseImageLayer().setColor([1.0, 0.0, 1.0, 1.0], { tf: 'Linear'} );
     });
diff --git a/examples/al-stephan-quintet.html b/examples/al-stephan-quintet.html
index ed32fbdc..af3811f6 100644
--- a/examples/al-stephan-quintet.html
+++ b/examples/al-stephan-quintet.html
@@ -18,7 +18,7 @@
             '#aladin-lite-div',
             {
                 projection: 'AIT', // set a projection
-                fov: 0.02, // initial field of view in degrees
+                fov: 0.1, // initial field of view in degrees
                 target: '338.98958 33.96', // initial target
                 cooFrame: 'equatorial', // set galactic frame
                 showCooGrid: true, // set the grid
diff --git a/examples/al-zoom-meerkat.html b/examples/al-zoom-meerkat.html
index 6fb075ea..c106e92d 100644
--- a/examples/al-zoom-meerkat.html
+++ b/examples/al-zoom-meerkat.html
@@ -34,7 +34,7 @@
 
             let cut0 = -0.0004 * lambda + (1 - lambda) * -0.00132;
             let cut1 = 0.005 * lambda + (1 - lambda) * 0.05759;
-            meerkat.setCuts([cut0, cut1]);
+            meerkat.setCuts(cut0, cut1);
         })
     });
 </script>
diff --git a/src/core/Cargo.toml b/src/core/Cargo.toml
index b8c61139..63a905c0 100644
--- a/src/core/Cargo.toml
+++ b/src/core/Cargo.toml
@@ -39,6 +39,7 @@ al-task-exec = { path = "./al-task-exec" }
 al-api = { path = "./al-api" }
 mapproj = "0.3.0"
 wcs = "0.1.1"
+colorgrad = "0.6.2"
 
 [features]
 webgl1 = [
diff --git a/src/core/al-api/Cargo.toml b/src/core/al-api/Cargo.toml
index a31050f5..291f3dfd 100644
--- a/src/core/al-api/Cargo.toml
+++ b/src/core/al-api/Cargo.toml
@@ -10,6 +10,7 @@ cgmath = "*"
 serde = { version = "^1.0.59", features = ["derive"] }
 serde-wasm-bindgen = "0.4"
 wasm-bindgen = "0.2.79"
+colorgrad = "0.6.2"
 
 [features]
 webgl1 = [
diff --git a/src/core/al-api/src/color.rs b/src/core/al-api/src/color.rs
index 7e742acd..c73f5191 100644
--- a/src/core/al-api/src/color.rs
+++ b/src/core/al-api/src/color.rs
@@ -6,6 +6,8 @@ extern "C" {
 
     #[wasm_bindgen(static_method_of = Color)]
     pub fn hexToRgb(hex: String) -> JsValue;
+    #[wasm_bindgen(static_method_of = Color)]
+    pub fn hexToRgba(hex: String) -> JsValue;
 }
 
 #[derive(Debug, Clone, Copy)]
@@ -81,3 +83,17 @@ impl TryFrom<JsValue> for ColorRGB {
         Ok(c)
     }
 }
+
+impl TryFrom<JsValue> for ColorRGBA {
+    type Error = JsValue;
+
+    fn try_from(rgb: JsValue) -> Result<Self, JsValue> {
+        let mut c: ColorRGBA = serde_wasm_bindgen::from_value(rgb)?;
+        c.r /= 255.0;
+        c.g /= 255.0;
+        c.b /= 255.0;
+        c.a /= 255.0;
+
+        Ok(c)
+    }
+}
\ No newline at end of file
diff --git a/src/core/al-api/src/colormap.rs b/src/core/al-api/src/colormap.rs
index 81bd1ac6..7d3abe5e 100644
--- a/src/core/al-api/src/colormap.rs
+++ b/src/core/al-api/src/colormap.rs
@@ -1,26 +1,9 @@
-use wasm_bindgen::prelude::*;
-
 use serde::{Deserialize, Serialize};
-#[wasm_bindgen]
-#[derive(Clone, Debug, Copy, PartialEq, Deserialize, Serialize)]
-#[serde(rename_all = "camelCase")]
-pub enum Colormap {
-    Blues = 0,
-    Cividis = 1,
-    Cubehelix = 2,
-    Eosb = 3,
-    Grayscale = 4,
-    Inferno = 5,
-    Magma = 6,
-    Parula = 7,
-    Plasma = 8,
-    Rainbow = 9,
-    Rdbu = 10,
-    Rdyibu = 11,
-    Redtemperature = 12,
-    Spectral = 13,
-    Summer = 14,
-    Viridis = 15,
-    Ylgnbu = 16,
-    Ylorbr = 17,
+#[derive(Clone, Debug, PartialEq, Eq, Hash, Deserialize, Serialize)]
+pub struct CmapLabel(String);
+
+impl AsRef<str> for CmapLabel {
+    fn as_ref(&self) -> &str {
+        self.0.as_ref()
+    }
 }
diff --git a/src/core/al-api/src/hips.rs b/src/core/al-api/src/hips.rs
index cf756a05..86c267c9 100644
--- a/src/core/al-api/src/hips.rs
+++ b/src/core/al-api/src/hips.rs
@@ -25,25 +25,10 @@ pub struct SimpleHiPS {
 
     /// The HiPS metadata
     pub properties: HiPSProperties,
-
+    /// Its color
     pub meta: ImageSurveyMeta,
-
-    pub img_format: HiPSTileFormat,
 }
 
-/*#[wasm_bindgen]
-impl SimpleHiPS {
-    #[wasm_bindgen(constructor)]
-    pub fn new(layer: String, properties: HiPSProperties, meta: ImageSurveyMeta) -> Self {
-        Self {
-            layer,
-            properties,
-            meta,
-            backend: None
-        }
-    }
-}*/
-
 impl SimpleHiPS {
     pub fn get_layer(&self) -> String {
         self.layer.clone()
@@ -68,6 +53,7 @@ pub struct HiPSProperties {
     formats: Vec<HiPSTileFormat>,
     sky_fraction: f32,
     min_order: u8,
+    colored: bool,
 
     hips_initial_fov: Option<f64>,
     hips_initial_ra: Option<f64>,
@@ -79,38 +65,6 @@ pub struct HiPSProperties {
 }
 
 impl HiPSProperties {
-    /*pub fn new(
-        url: String,
-        max_order: u8,
-        frame: CooSystem,
-        tile_size: i32,
-        min_cutout: Option<f32>,
-        max_cutout: Option<f32>,
-        bitpix: Option<i32>,
-        formats: Vec<HiPSTileFormat>,
-        sky_fraction: f32,
-        min_order: u8,
-        hips_initial_fov: Option<f64>,
-        hips_initial_ra: Option<f64>,
-        hips_initial_dec: Option<f64>,
-    ) -> Self {
-        Self {
-            url,
-            max_order,
-            min_order,
-            frame,
-            tile_size,
-            formats,
-            bitpix,
-            min_cutout,
-            max_cutout,
-            sky_fraction,
-            hips_initial_fov,
-            hips_initial_dec,
-            hips_initial_ra,
-        }
-    }*/
-
     #[inline]
     pub fn get_url(&self) -> String {
         self.url.clone()
@@ -165,6 +119,11 @@ impl HiPSProperties {
     pub fn get_initial_dec(&self) -> Option<f64> {
         self.hips_initial_dec
     }
+
+    #[inline]
+    pub fn is_colored(&self) -> bool {
+        self.colored
+    }
 }
 
 #[derive(Deserialize, Debug, Clone, Copy, PartialEq)]
@@ -177,26 +136,6 @@ pub enum HiPSTileFormat {
 }
 
 use serde::Serialize;
-/*#[wasm_bindgen]
-#[derive(Deserialize, Serialize, Debug)]
-#[derive(Clone, Copy)]
-#[serde(rename_all = "camelCase")]
-pub struct GrayscaleParameter {
-    pub h: TransferFunction,
-    pub min_value: f32,
-    pub max_value: f32,
-}
-
-impl Default for GrayscaleParameter {
-    fn default() -> Self {
-        Self {
-            h: TransferFunction::Asinh,
-            min_value: 0.0,
-            max_value: 1.0
-        }
-    }
-}*/
-
 use wasm_bindgen::prelude::*;
 #[wasm_bindgen]
 #[derive(Clone, Copy, PartialEq, Debug, Deserialize, Serialize)]
@@ -237,47 +176,27 @@ impl From<String> for TransferFunction {
     }
 }
 
-use crate::colormap::Colormap;
-#[derive(Deserialize, Debug, Clone, Copy)]
+use crate::colormap::CmapLabel;
+#[derive(Deserialize, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
-pub enum HiPSColor {
-    // FITS tile
-    Grayscale {
-        #[serde(rename = "stretch")]
-        tf: TransferFunction,
-        #[serde(rename = "minCut")]
-        min_cut: Option<f32>,
-        #[serde(rename = "maxCut")]
-        max_cut: Option<f32>,
-
-        color: GrayscaleColor,
-    },
-    // JPG/PNG tile
-    Color,
+pub struct HiPSColor {
+    // transfer function called before evaluating the colormap
+    pub stretch: TransferFunction,
+    // low cut 
+    pub min_cut: Option<f32>,
+    // high cut
+    pub max_cut: Option<f32>,
+    // flag to tell the colormap is queried reversed
+    pub reversed: bool,
+    // the colormap
+    pub cmap_name: CmapLabel,
+    /// tonal color tuning factors
+    pub k_gamma: f32,
+    pub k_saturation: f32,
+    pub k_contrast: f32,
+    pub k_brightness: f32,
 }
 
-#[derive(Deserialize, Debug)]
-#[serde(rename_all = "camelCase")]
-#[derive(Clone, Copy)]
-pub enum GrayscaleColor {
-    Colormap { reversed: bool, name: Colormap },
-    Color([f32; 4]),
-}
-/*
-impl Default for HiPSColor {
-    fn default() -> Self {
-        HiPSColor::Grayscale2Color {
-            color: [1.0, 0.0, 0.0],
-            param: GrayscaleParameter {
-                h: TransferFunction::Asinh,
-                min_value: 0.0,
-                max_value: 1.0,
-            },
-            k: 1.0
-        }
-    }
-}*/
-
 #[derive(Deserialize, Debug)]
 #[serde(rename_all = "camelCase")]
 #[derive(Clone)]
@@ -293,6 +212,8 @@ pub struct ImageSurveyMeta {
     #[serde(default = "default_opacity")]
     pub opacity: f32,
     pub longitude_reversed: bool,
+    /// the current format chosen
+    pub img_format: HiPSTileFormat,
 }
 
 fn default_opacity() -> f32 {
@@ -313,71 +234,72 @@ impl ImageSurveyMeta {
     pub fn color(&self) -> JsValue {
         let js_color_obj = js_sys::Object::new();
 
-        let color = match &self.color {
-            HiPSColor::Color => JsValue::from_str("Colored"),
-            HiPSColor::Grayscale {
-                tf,
-                min_cut,
-                max_cut,
-                color,
-            } => {
-                let js_grayscale = js_sys::Object::new();
+        let HiPSColor {
+            stretch,
+            min_cut,
+            max_cut,
+            reversed,
+            cmap_name,
+            k_gamma,
+            k_saturation,
+            k_brightness,
+            k_contrast,
+        } = &self.color;
 
-                js_sys::Reflect::set(
-                    &js_grayscale,
-                    &"stretch".into(),
-                    &serde_wasm_bindgen::to_value(&tf).unwrap_abort(),
-                )
-                .unwrap_abort();
-                js_sys::Reflect::set(
-                    &js_grayscale,
-                    &"minCut".into(),
-                    &serde_wasm_bindgen::to_value(&min_cut).unwrap_abort(),
-                )
-                .unwrap_abort();
-                js_sys::Reflect::set(
-                    &js_grayscale,
-                    &"maxCut".into(),
-                    &serde_wasm_bindgen::to_value(&max_cut).unwrap_abort(),
-                )
-                .unwrap_abort();
-
-                let js_color = match color {
-                    GrayscaleColor::Color(color) => {
-                        let js_color = js_sys::Object::new();
-                        js_sys::Reflect::set(
-                            &js_color,
-                            &"color".into(),
-                            &serde_wasm_bindgen::to_value(&color).unwrap_abort(),
-                        )
-                        .unwrap_abort();
-
-                        js_color
-                    }
-                    GrayscaleColor::Colormap { reversed, name } => {
-                        let js_colormap = js_sys::Object::new();
-                        js_sys::Reflect::set(
-                            &js_colormap,
-                            &"reversed".into(),
-                            &JsValue::from_bool(*reversed),
-                        )
-                        .unwrap_abort();
-                        js_sys::Reflect::set(
-                            &js_colormap,
-                            &"colormap".into(),
-                            &serde_wasm_bindgen::to_value(&name).unwrap_abort(),
-                        )
-                        .unwrap_abort();
-
-                        js_colormap
-                    }
-                };
-                js_sys::Reflect::set(&js_grayscale, &"color".into(), &js_color).unwrap_abort();
-
-                js_grayscale.into()
-            }
-        };
-        js_sys::Reflect::set(&js_color_obj, &"color".into(), &color).unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"stretch".into(),
+            &serde_wasm_bindgen::to_value(&stretch).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"minCut".into(),
+            &serde_wasm_bindgen::to_value(&min_cut).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"maxCut".into(),
+            &serde_wasm_bindgen::to_value(&max_cut).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"kGamma".into(),
+            &serde_wasm_bindgen::to_value(&k_gamma).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"kSaturation".into(),
+            &serde_wasm_bindgen::to_value(&k_saturation).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"kBrightness".into(),
+            &serde_wasm_bindgen::to_value(&k_brightness).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"kContrast".into(),
+            &serde_wasm_bindgen::to_value(&k_contrast).unwrap_abort(),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"reversed".into(),
+            &JsValue::from_bool(*reversed),
+        )
+        .unwrap_abort();
+        js_sys::Reflect::set(
+            &js_color_obj,
+            &"colormap".into(),
+            &serde_wasm_bindgen::to_value(&cmap_name).unwrap_abort(),
+        )
+        .unwrap_abort();
 
         js_color_obj.into()
     }
diff --git a/src/core/al-core/Cargo.toml b/src/core/al-core/Cargo.toml
index 25d05684..13a21f3d 100644
--- a/src/core/al-core/Cargo.toml
+++ b/src/core/al-core/Cargo.toml
@@ -16,6 +16,7 @@ serde_json = "1.0"
 serde-wasm-bindgen = "0.4"
 wasm-streams = "0.3.0"
 futures = "0.3.25"
+colorgrad = "0.6.2"
 
 [dependencies.wasm-bindgen]
 version = "0.2.79"
diff --git a/src/core/al-core/src/colormap.rs b/src/core/al-core/src/colormap.rs
new file mode 100644
index 00000000..fee257e1
--- /dev/null
+++ b/src/core/al-core/src/colormap.rs
@@ -0,0 +1,249 @@
+use std::collections::HashMap;
+
+use al_api::resources::Resources;
+use colorgrad::Color;
+
+use crate::Texture2D;
+use crate::WebGlContext;
+use crate::image::format;
+use crate::shader::SendUniformsWithParams;
+
+use wasm_bindgen::JsValue;
+use crate::webgl_ctx::WebGlRenderingCtx;
+
+const WIDTH_CMAP_TEX: usize = 256;
+
+type Label = String;
+
+pub struct Colormap {
+    label: Label,
+    grad: colorgrad::Gradient,
+}
+impl Colormap {
+    pub fn new(label: &str, grad: colorgrad::Gradient) -> Self {
+        Self { label: label.to_string(), grad }
+    }
+
+    pub fn label(&self) -> &Label {
+        &self.label
+    }
+}
+
+fn build_cmaps_texture(gl: &WebGlContext, cmaps: &[Colormap]) -> Result<Texture2D, JsValue> {
+    let tex_bytes: Vec<u8> = cmaps.iter()
+        .map(|cmap| {
+            let mut values = [0_u8; 1024];
+            for ix in 0..WIDTH_CMAP_TEX {
+                let rgba = cmap.grad.at(ix as f64 / WIDTH_CMAP_TEX as f64).to_rgba8();
+                let ptr = values[4*ix..].as_mut_ptr() as *mut [u8; 4];
+                unsafe { *ptr = rgba; }
+            }
+
+            values
+        })
+        .flatten()
+        .collect();
+    let tex_params = &[
+        (
+            WebGlRenderingCtx::TEXTURE_MIN_FILTER,
+            WebGlRenderingCtx::LINEAR,
+        ),
+        (
+            WebGlRenderingCtx::TEXTURE_MAG_FILTER,
+            WebGlRenderingCtx::LINEAR,
+        ),
+        // Prevents s-coordinate wrapping (repeating)
+        (
+            WebGlRenderingCtx::TEXTURE_WRAP_S,
+            WebGlRenderingCtx::CLAMP_TO_EDGE,
+        ),
+        // Prevents t-coordinate wrapping (repeating)
+        (
+            WebGlRenderingCtx::TEXTURE_WRAP_T,
+            WebGlRenderingCtx::CLAMP_TO_EDGE,
+        ),
+    ];
+
+    Texture2D::create_from_raw_pixels::<format::RGBA8U>(
+        gl,
+        WIDTH_CMAP_TEX as i32,
+        cmaps.len() as i32,
+        tex_params,
+        Some(&tex_bytes[..])
+    )
+}
+
+pub struct Colormaps {
+    cmaps: Vec<Colormap>,
+    indices: HashMap<Label, i32>,
+
+    cmaps_tex: Texture2D,
+
+    labels: Vec<Label>,
+
+    gl: WebGlContext,
+}
+
+use crate::Abort;
+impl Colormaps {
+    pub fn new(gl: &WebGlContext) -> Result<Self, JsValue> {
+        let labels: Vec<_> = [
+            "blues", "cividis", "cubehelix", "eosb",
+            "grayscale", "inferno", "magma", "native",
+            "parula", "plasma", "rdbu",
+            "rdylbu", "redtemperature", "sinebow", "spectral", "summer",
+            "viridis", "ylgnbu", "ylorbr", "red", "green", "blue"
+        ]
+        .iter()
+        .map(|cmap_name| cmap_name.to_string())
+        .collect();
+
+        let indices = labels.iter().enumerate()
+            .map(|(id, label)| {
+                (label.clone(), id as i32)
+            })
+            .collect();
+
+        let cmaps = vec![
+            Colormap::new("blues", colorgrad::blues()),
+            Colormap::new("cividis", colorgrad::cividis()),
+            Colormap::new("cubehelix", colorgrad::cubehelix_default()),
+            Colormap::new("eosb", colorgrad::turbo()),
+            Colormap::new("grayscale", {
+                colorgrad::CustomGradient::new()
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("inferno", colorgrad::inferno()),
+            Colormap::new("magma", colorgrad::magma()),
+            Colormap::new("native", {
+                colorgrad::CustomGradient::new()
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("parula", {
+                colorgrad::CustomGradient::new()
+                    .colors(&[
+                        Color::from_rgba8(61, 38, 168, 255),
+                        Color::from_rgba8(71, 87, 247, 255),
+                        Color::from_rgba8(39, 150, 235, 255),
+                        Color::from_rgba8(24, 191, 181, 255),
+                        Color::from_rgba8(128, 203, 88, 255),
+                        Color::from_rgba8(253, 189, 60, 255),
+                        Color::from_rgba8(249, 250, 20, 255),
+                    ])
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("plasma", colorgrad::plasma()),
+            Colormap::new("rdbu", colorgrad::rd_bu()),
+            Colormap::new("rdylbu", colorgrad::rd_yl_bu()),
+            Colormap::new("redtemperature", {
+                colorgrad::CustomGradient::new()
+                    .colors(&[
+                        Color::new(0.0, 0.0, 0.0, 1.0),
+                        Color::new(0.75, 0.0, 0.0, 1.0),
+                        Color::new(1.0, 0.5, 0.0, 1.0),
+                        Color::new(1.0, 1.0, 1.0, 1.0),
+                    ])
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("sinebow", colorgrad::sinebow()),
+            Colormap::new("spectral", colorgrad::spectral()),
+            Colormap::new("summer", colorgrad::yl_gn()),
+            Colormap::new("viridis", colorgrad::viridis()),
+            Colormap::new("ylgnbu", colorgrad::yl_gn_bu()),
+            Colormap::new("ylorbr", colorgrad::yl_or_br()),
+            Colormap::new("red", {
+                colorgrad::CustomGradient::new()
+                    .colors(&[
+                        Color::new(0.0, 0.0, 0.0, 1.0),
+                        Color::new(1.0, 0.0, 0.0, 1.0),
+                    ])
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("green", {
+                colorgrad::CustomGradient::new()
+                    .colors(&[
+                        Color::new(0.0, 0.0, 0.0, 1.0),
+                        Color::new(0.0, 1.0, 0.0, 1.0),
+                    ])
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+            Colormap::new("blue", {
+                colorgrad::CustomGradient::new()
+                    .colors(&[
+                        Color::new(0.0, 0.0, 0.0, 1.0),
+                        Color::new(0.0, 0.0, 1.0, 1.0),
+                    ])
+                    .build()
+                    .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?
+            }),
+        ];
+
+        let cmaps_tex = build_cmaps_texture(gl, &cmaps[..])?;
+
+        let gl = gl.clone();
+        Ok(Self { cmaps, cmaps_tex, labels, indices, gl })
+    }
+
+    #[inline]
+    pub fn get_list_available_colormaps(&self) -> &[Label] {
+        &self.labels
+    }
+
+    #[inline]
+    pub fn get(&self, label: &str) -> &Colormap {
+        if let Some(id) = self.get_id(label).map(|id| *id) {
+            &self.cmaps[id as usize]
+        } else {
+            let id_greys = self.get_id(label).map(|id| *id).unwrap_abort();
+            &self.cmaps[id_greys as usize]
+        }
+    }
+
+    #[inline]
+    pub fn get_id(&self, label: &str) -> Option<&i32> {
+        self.indices.get(label)
+    }
+
+    pub fn add_cmap(&mut self, label: Label, cmap: Colormap) -> Result<(), JsValue> {
+        if let Some(id) = self.get_id(&label).map(|id| *id) {
+            let colormap = &mut self.cmaps[id as usize];
+            *colormap = cmap;
+        } else {
+            let num_cmaps = self.labels.len();
+            self.labels.push(label.clone());
+    
+            self.indices.insert(label, num_cmaps as i32);
+            self.cmaps.push(cmap);
+        }
+
+        // recompute the texture
+        self.cmaps_tex = build_cmaps_texture(&self.gl, &self.cmaps)?;
+
+        Ok(())
+    }
+}
+
+use crate::shader::{ShaderBound, SendUniforms};
+impl SendUniforms for Colormaps {
+    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
+        shader
+            .attach_uniform("colormaps", &self.cmaps_tex)
+            .attach_uniform("num_colormaps", &(self.labels.len() as f32));
+
+        shader
+    }
+}
+
+impl SendUniformsWithParams<Colormaps> for Colormap {
+    fn attach_uniforms_with_params<'a>(&self, shader: &'a ShaderBound<'a>, cmaps: &Colormaps) -> &'a ShaderBound<'a> {
+        let cmap_id = cmaps.get_id(&self.label).unwrap_abort();
+        shader.attach_uniform("colormap_id", &(*cmap_id as f32));
+        shader
+    }
+}
diff --git a/src/core/al-core/src/image/format.rs b/src/core/al-core/src/image/format.rs
index 85427a3a..2f4df504 100644
--- a/src/core/al-core/src/image/format.rs
+++ b/src/core/al-core/src/image/format.rs
@@ -337,4 +337,11 @@ impl ImageFormatType {
             ImageFormatType::R32I => R32I::EXT,
         }
     }
+
+    pub fn is_colored(&self) -> bool {
+        match self {
+            ImageFormatType::RGBA32F | ImageFormatType::RGB32F | ImageFormatType::RGBA8U | ImageFormatType::RGB8U => true,
+            _ => false
+        }
+    }
 }
diff --git a/src/core/al-core/src/lib.rs b/src/core/al-core/src/lib.rs
index 7cb82f90..38ae68ee 100644
--- a/src/core/al-core/src/lib.rs
+++ b/src/core/al-core/src/lib.rs
@@ -14,6 +14,8 @@ pub mod webgl_ctx;
 #[macro_use]
 pub mod log;
 pub use log::log;
+pub mod colormap;
+pub use colormap::{Colormap, Colormaps};
 
 pub use texture::pixel;
 pub use texture::{Texture2D, Texture2DBound};
diff --git a/src/core/al-core/src/shader.rs b/src/core/al-core/src/shader.rs
index dbd849a9..31d33703 100644
--- a/src/core/al-core/src/shader.rs
+++ b/src/core/al-core/src/shader.rs
@@ -1,7 +1,7 @@
-use al_api::hips::GrayscaleColor;
 use web_sys::{WebGlProgram, WebGlShader, WebGlUniformLocation};
 use wasm_bindgen::JsValue;
 
+use crate::Colormaps;
 use crate::webgl_ctx::WebGlRenderingCtx;
 fn compile_shader(
     gl: &WebGlContext,
@@ -300,7 +300,6 @@ impl SendUniforms for GrayscaleParameter {
         shader
     }
 }*/
-use al_api::colormap::Colormap;
 use al_api::hips::HiPSColor;
 use al_api::hips::ImageSurveyMeta;
 
@@ -315,44 +314,40 @@ impl SendUniforms for ImageSurveyMeta {
 }
 
 impl SendUniforms for HiPSColor {
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
-        match self {
-            HiPSColor::Color => (),
-            HiPSColor::Grayscale {
-                tf,
-                min_cut,
-                max_cut,
-                color,
-            } => match color {
-                GrayscaleColor::Color(color) => {
-                    shader
-                        .attach_uniform("H", tf)
-                        .attach_uniform("min_value", &min_cut.unwrap_or(0.0))
-                        .attach_uniform("max_value", &max_cut.unwrap_or(1.0))
-                        .attach_uniform("C", color)
-                        .attach_uniform("K", &1.0_f32);
-                }
-                GrayscaleColor::Colormap { reversed, name } => {
-                    let reversed = *reversed as u8 as f32;
-
-                    shader
-                        .attach_uniforms_from(name)
-                        .attach_uniform("H", tf)
-                        .attach_uniform("min_value", &min_cut.unwrap_or(0.0))
-                        .attach_uniform("max_value", &max_cut.unwrap_or(1.0))
-                        .attach_uniform("reversed", &reversed);
-                }
-            },
-        }
+    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {     
+        let reversed = self.reversed as u8 as f32;
 
+        shader
+            .attach_uniform("H", &self.stretch)
+            .attach_uniform("min_value", &self.min_cut.unwrap_or(0.0))
+            .attach_uniform("max_value", &self.max_cut.unwrap_or(1.0))
+            .attach_uniform("k_gamma", &self.k_gamma)
+            .attach_uniform("k_saturation", &self.k_saturation)
+            .attach_uniform("k_brightness", &self.k_brightness)
+            .attach_uniform("k_contrast", &self.k_contrast)
+            .attach_uniform("reversed", &reversed);
+    
         shader
     }
 }
 
-impl SendUniforms for Colormap {
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
-        shader.attach_uniform("colormap_id", &((*self as i32) as f32));
 
+impl SendUniformsWithParams<Colormaps> for HiPSColor {
+    fn attach_uniforms_with_params<'a>(&self, shader: &'a ShaderBound<'a>, cmaps: &Colormaps) -> &'a ShaderBound<'a> {     
+        let reversed = self.reversed as u8 as f32;
+
+        let cmap = cmaps.get(&self.cmap_name.as_ref());
+        shader
+            .attach_uniforms_with_params_from(cmap, cmaps)
+            .attach_uniform("H", &self.stretch)
+            .attach_uniform("min_value", &self.min_cut.unwrap_or(0.0))
+            .attach_uniform("max_value", &self.max_cut.unwrap_or(1.0))
+            .attach_uniform("k_gamma", &self.k_gamma)
+            .attach_uniform("k_saturation", &self.k_saturation)
+            .attach_uniform("k_brightness", &self.k_brightness)
+            .attach_uniform("k_contrast", &self.k_contrast)
+            .attach_uniform("reversed", &reversed);
+    
         shader
     }
 }
@@ -380,6 +375,12 @@ impl<'a> ShaderBound<'a> {
         self
     }
 
+    pub fn attach_uniforms_with_params_from<P, T: SendUniformsWithParams<P>>(&'a self, t: &T, params: &P) -> &'a Self {
+        t.attach_uniforms_with_params(self, params);
+
+        self
+    }
+
     pub fn attach_uniforms_from<T: SendUniforms>(&'a self, t: &T) -> &'a Self {
         t.attach_uniforms(self);
 
@@ -419,3 +420,7 @@ impl<'a> Drop for ShaderBound<'a> {
 pub trait SendUniforms {
     fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a>;
 }
+
+pub trait SendUniformsWithParams<T> {
+    fn attach_uniforms_with_params<'a>(&self, shader: &'a ShaderBound<'a>, params: &T) -> &'a ShaderBound<'a>;
+}
diff --git a/src/core/al-ui/js/hpxImageSurvey.js b/src/core/al-ui/js/hpxImageSurvey.js
deleted file mode 100644
index e56e6909..00000000
--- a/src/core/al-ui/js/hpxImageSurvey.js
+++ /dev/null
@@ -1,33 +0,0 @@
-
-import { HiPSDefinition } from "../../../../../js/HiPSDefinition.js";
-import { HpxImageSurvey } from "../../../../../js/HpxImageSurvey.js";
-import { Utils } from "../../../../../js/Utils.js";
-
-export async function fetchSurveyMetadata(rootURL) {
-    // Use the url for retrieving the HiPS properties
-    // remove final slash
-    if (rootURL.slice(-1) === '/') {
-        rootURL = rootURL.substr(0, rootURL.length-1);
-    }
-
-    // make URL absolute
-    rootURL = Utils.getAbsoluteURL(rootURL);
-
-    // fast fix for HTTPS support --> will work for all HiPS served by CDS
-    if (Utils.isHttpsContext() && ( /u-strasbg.fr/i.test(rootURL) || /unistra.fr/i.test(rootURL)  ) ) {
-        rootURL = rootURL.replace('http://', 'https://');
-    }
-
-    const url = rootURL + '/properties';
-    let metadata = await fetch(url)
-        .then((response) => response.text());
-    // We get the property here
-    metadata = HiPSDefinition.parseHiPSProperties(metadata);
-
-    // 1. Ensure there is exactly one survey matching
-    if (!metadata) {
-        throw 'no surveys matching';
-    }
-    //console.log(metadata);
-    return metadata;
-}
diff --git a/src/core/al-ui/src/widgets/survey.rs b/src/core/al-ui/src/widgets/survey.rs
index 921ff85a..4128f193 100644
--- a/src/core/al-ui/src/widgets/survey.rs
+++ b/src/core/al-ui/src/widgets/survey.rs
@@ -108,7 +108,7 @@ impl PropertiesParsed {
 use egui::{Color32, InnerResponse, Response};
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen(module = "/js/hpxImageSurvey.js")]
+#[wasm_bindgen(module = "/js/ImageSurvey.js")]
 extern "C" {
     #[wasm_bindgen(catch, js_name = fetchSurveyMetadata)]
     async fn fetch_survey_metadata(url: String) -> Result<JsValue, JsValue>;
@@ -535,7 +535,7 @@ impl SurveyWidget {
                                 .selectable_value(&mut self.colormap, Colormap::Plasma, "plasma")
                                 .clicked();
                             *ui_changed |= ui
-                                .selectable_value(&mut self.colormap, Colormap::Rainbow, "rainbow")
+                                .selectable_value(&mut self.colormap, Colormap::Rainbow, "sinebow")
                                 .clicked();
                             *ui_changed |= ui
                                 .selectable_value(&mut self.colormap, Colormap::Rdbu, "rdbu")
diff --git a/src/core/src/app.rs b/src/core/src/app.rs
index e4dc31cc..d0f7d8f0 100644
--- a/src/core/src/app.rs
+++ b/src/core/src/app.rs
@@ -1,7 +1,6 @@
 use crate::{
     async_task::{BuildCatalogIndex, ParseTableTask, TaskExecutor, TaskResult, TaskType},
     camera::CameraViewPort,
-    colormap::Colormaps,
     downloader::Downloader,
     math::{
         self,
@@ -22,6 +21,7 @@ use crate::{
 };
 
 use al_core::WebGlContext;
+use al_core::colormap::{Colormap, Colormaps};
 
 use al_api::{
     coo_system::CooSystem,
@@ -182,7 +182,7 @@ impl App {
         let out_of_fov = false;
         let catalog_loaded = false;
 
-        let colormaps = Colormaps::new(&gl, &resources)?;
+        let colormaps = Colormaps::new(&gl)?;
 
         let _final_rendering_pass = RenderPass::new(&gl)?;
         let tile_fetcher = TileFetcherQueue::new();
@@ -383,7 +383,6 @@ impl App {
     }*/
 }
 
-use al_api::hips::HiPSTileFormat;
 use al_api::cell::HEALPixCellProjeted;
 use crate::downloader::request::Resource;
 
@@ -834,27 +833,7 @@ impl App {
         self.layers.set_image_surveys(hipses, &self.gl, &mut self.camera, &self.projection)?;
 
         for hips in self.layers.values_hips() {
-            let cfg = hips.get_config();
-            // Request for the allsky first
-            // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
-            self.downloader.fetch(query::PixelMetadata::new(cfg));
-            // Try to fetch the MOC
-            self.downloader.fetch(query::Moc::new(format!("{}/Moc.fits", cfg.get_root_url()), al_api::moc::MOC::default()));
-
-            let tile_size = cfg.get_tile_size();
-            //Request the allsky for the small tile size or if base tiles are not available
-            if tile_size <= 128 || cfg.get_min_depth_tile() > 0 {
-                // Request the allsky
-                self.downloader.fetch(query::Allsky::new(cfg));
-            } else {
-                for texture_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
-                    for cell in texture_cell.get_tile_cells(cfg) {
-                        let query = query::Tile::new(&cell, cfg);
-                        self.tile_fetcher
-                            .append_base_tile(query, &mut self.downloader);
-                    }
-                }
-            }
+            self.tile_fetcher.launch_starting_hips_requests(hips, &mut self.downloader);
         }
 
         // Once its added, request the tiles in the view (unless the viewer is at depth 0)
@@ -872,29 +851,9 @@ impl App {
     pub(crate) fn set_hips_url(&mut self, past_url: String, new_url: String) -> Result<(), JsValue> {
         self.layers.set_survey_url(past_url, new_url.clone())?;
 
-        let hips = self.layers.get_mut_hips(&new_url).unwrap();
+        let hips = self.layers.get_hips(&new_url).unwrap();
         // Relaunch the base tiles for the survey to be ready with the new url
-        let cfg = hips.get_config();
-        // Request for the allsky first
-        // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
-        self.downloader.fetch(query::PixelMetadata::new(cfg));
-        // Try to fetch the MOC
-        self.downloader.fetch(query::Moc::new(format!("{}/Moc.fits", cfg.get_root_url()), al_api::moc::MOC::default()));
-
-        let tile_size = cfg.get_tile_size();
-        //Request the allsky for the small tile size or if base tiles are not available
-        if tile_size <= 128 || cfg.get_min_depth_tile() > 0 {
-            // Request the allsky
-            self.downloader.fetch(query::Allsky::new(cfg));
-        } else {
-            for texture_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
-                for cell in texture_cell.get_tile_cells(cfg) {
-                    let query = query::Tile::new(&cell, cfg);
-                    self.tile_fetcher
-                        .append_base_tile(query, &mut self.downloader);
-                }
-            }
-        }
+        self.tile_fetcher.launch_starting_hips_requests(hips, &mut self.downloader);
 
         Ok(())
     }
@@ -906,45 +865,23 @@ impl App {
     ) -> Result<(), JsValue> {
         self.request_redraw = true;
 
-        self.layers.set_layer_cfg(layer, meta, &self.camera, &self.projection)
-    }
+        let old_meta = self.layers.get_layer_cfg(&layer)?;
+        if old_meta.img_format != meta.img_format {
+            // the image format has been changed
+            let hips = self.layers
+                .get_mut_hips_from_layer(&layer)
+                .ok_or_else(|| JsValue::from_str("Layer not found"))?;
+            hips.set_img_format(meta.img_format)?;
+            // Relaunch the base tiles for the survey to be ready with the new url
+            self.tile_fetcher.launch_starting_hips_requests(hips, &mut self.downloader);     
 
-    pub(crate) fn set_image_survey_img_format(&mut self, layer: String, format: HiPSTileFormat) -> Result<(), JsValue> {
-        let survey = self.layers.get_mut_hips_from_layer(&layer)
-            .ok_or_else(|| JsValue::from_str("Layer not found"))?;
-        survey.set_img_format(format)?;
-        // Request for the allsky first
-        // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
-        let cfg = survey.get_config();
-
-        //Request the allsky for the small tile size
-        let tile_size = cfg.get_tile_size();
-
-        // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
-        self.downloader.fetch(query::PixelMetadata::new(cfg));
-        // Try to fetch the MOC
-        self.downloader.fetch(query::Moc::new(format!("{}/Moc.fits", cfg.get_root_url()), al_api::moc::MOC::default()));
-        //Request the allsky for the small tile size
-        if tile_size <= 128 || cfg.get_min_depth_tile() > 0 {
-            // Request the allsky
-            self.downloader.fetch(query::Allsky::new(cfg));
-        } else {
-            for texture_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
-                for cell in texture_cell.get_tile_cells(cfg) {
-                    let query = query::Tile::new(&cell, cfg);
-                    self.tile_fetcher
-                        .append_base_tile(query, &mut self.downloader);
-                }
-            }
+            // Once its added, request the tiles in the view (unless the viewer is at depth 0)
+            self.request_for_new_tiles = true;
+            self.request_redraw = true;
         }
-        
 
-        // Once its added, request the tiles in the view (unless the viewer is at depth 0)
-        self.request_for_new_tiles = true;
-
-        self.request_redraw = true;
-
-        Ok(())
+        // Set the new meta
+        self.layers.set_layer_cfg(layer, meta, &self.camera, &self.projection)
     }
 
     // Width and height given are in pixels
@@ -970,10 +907,9 @@ impl App {
         self.camera.get_longitude_reversed()
     }
 
-    pub(crate) fn add_catalog(&mut self, name: String, table: JsValue, colormap: String) {
+    pub(crate) fn add_catalog(&mut self, name: String, table: JsValue, _colormap: String) {
         let mut exec_ref = self.exec.borrow_mut();
         let table = table;
-        let c = self.colormaps.get(&colormap);
 
         exec_ref
             .spawner()
@@ -995,7 +931,6 @@ impl App {
                 TaskResult::TableParsed {
                     name,
                     sources: results.into_boxed_slice(),
-                    colormap: c,
                 }
             });
     }
@@ -1219,6 +1154,10 @@ impl App {
         self.out_of_fov = true;
     }
 
+    pub(crate) fn add_cmap(&mut self, label: String, cmap: Colormap) -> Result<(), JsValue> {
+        self.colormaps.add_cmap(label, cmap)
+    }
+
     // Accessors
     pub(crate) fn get_center(&self) -> LonLatT<f64> {
         self.camera.get_center().lonlat()
@@ -1237,6 +1176,10 @@ impl App {
         deg.0
     }
 
+    pub(crate) fn get_colormaps(&self) -> &Colormaps {
+        &self.colormaps
+    }
+
     pub(crate) fn get_gl_canvas(&self) -> Option<js_sys::Object> {
         self.gl.canvas()
     }
diff --git a/src/core/src/async_task.rs b/src/core/src/async_task.rs
index ac67d069..09930637 100644
--- a/src/core/src/async_task.rs
+++ b/src/core/src/async_task.rs
@@ -7,12 +7,10 @@ use al_task_exec::Executor;
 pub type TaskExecutor = Executor<TaskType, TaskResult>;
 
 pub use crate::renderable::catalog::Source;
-pub use al_api::colormap::Colormap;
 pub enum TaskResult {
     TableParsed {
         name: String,
         sources: Box<[Source]>,
-        colormap: Colormap,
     },
     /*TileSentToGPU {
         tile: Tile,
diff --git a/src/core/src/colormap.rs b/src/core/src/colormap.rs
deleted file mode 100644
index b3974968..00000000
--- a/src/core/src/colormap.rs
+++ /dev/null
@@ -1,117 +0,0 @@
-use al_api::resources::Resources;
-use std::collections::HashMap;
-
-use al_core::Texture2D;
-use al_core::WebGlContext;
-
-use wasm_bindgen::JsValue;
-use web_sys::WebGl2RenderingContext;
-
-pub struct Colormaps {
-    tex: Texture2D,
-    colormaps: HashMap<&'static str, Colormap>,
-}
-
-use crate::Abort;
-use al_api::colormap::Colormap;
-impl Colormaps {
-    pub fn new(gl: &WebGlContext, rs: &Resources) -> Result<Self, JsValue> {
-        let colormaps: HashMap<&str, Colormap> = [
-            ("blues", Colormap::Blues),
-            ("cividis", Colormap::Cividis),
-            ("cubehelix", Colormap::Cubehelix),
-            ("eosb", Colormap::Eosb),
-            ("grayscale", Colormap::Grayscale),
-            ("inferno", Colormap::Inferno),
-            ("magma", Colormap::Magma),
-            ("parula", Colormap::Parula),
-            ("plasma", Colormap::Plasma),
-            ("rainbow", Colormap::Rainbow),
-            ("rdbu", Colormap::Rdbu),
-            ("rdyibu", Colormap::Rdyibu),
-            ("redtemperature", Colormap::Redtemperature),
-            ("spectral", Colormap::Spectral),
-            ("summer", Colormap::Summer),
-            ("viridis", Colormap::Viridis),
-            ("ylgnbu", Colormap::Ylgnbu),
-            ("ylorbr", Colormap::Ylorbr),
-        ]
-        .iter()
-        .cloned()
-        .collect();
-        let colormap_filename = rs.get_filename("colormaps").unwrap_abort();
-        let tex = Texture2D::create_from_path::<_, al_core::image::format::RGBA8U>(
-            gl,
-            "colormap",
-            &colormap_filename,
-            &[
-                (
-                    WebGl2RenderingContext::TEXTURE_MIN_FILTER,
-                    WebGl2RenderingContext::LINEAR,
-                ),
-                (
-                    WebGl2RenderingContext::TEXTURE_MAG_FILTER,
-                    WebGl2RenderingContext::LINEAR,
-                ),
-                // Prevents s-coordinate wrapping (repeating)
-                (
-                    WebGl2RenderingContext::TEXTURE_WRAP_S,
-                    WebGl2RenderingContext::CLAMP_TO_EDGE,
-                ),
-                // Prevents t-coordinate wrapping (repeating)
-                (
-                    WebGl2RenderingContext::TEXTURE_WRAP_T,
-                    WebGl2RenderingContext::CLAMP_TO_EDGE,
-                ),
-            ],
-        )?;
-
-        Ok(Self { colormaps, tex })
-    }
-
-    #[inline]
-    pub const fn get_list_available_colormaps() -> &'static [&'static str] {
-        &[
-            "blues",
-            "cividis",
-            "cubehelix",
-            "eosb",
-            "grayscale",
-            "inferno",
-            "magma",
-            "parula",
-            "plasma",
-            "rainbow",
-            "rdbu",
-            "rdyibu",
-            "redtemperature",
-            "spectral",
-            "summer",
-            "viridis",
-            "ylgnbu",
-            "ylorbr",
-        ]
-    }
-
-    pub fn get(&self, name: &str) -> Colormap {
-        let c = if let Some(c) = self.colormaps.get(name) {
-            c
-        } else {
-            self.colormaps.get("grayscale").unwrap_abort()
-        };
-
-        *c
-    }
-}
-
-use al_core::shader::{SendUniforms, ShaderBound};
-
-impl SendUniforms for Colormaps {
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
-        shader
-            .attach_uniform("colormaps", &self.tex)
-            .attach_uniform("num_colormaps", &(self.colormaps.len() as f32));
-
-        shader
-    }
-}
diff --git a/src/core/src/lib.rs b/src/core/src/lib.rs
index 89093544..770d45a3 100644
--- a/src/core/src/lib.rs
+++ b/src/core/src/lib.rs
@@ -16,10 +16,6 @@
 //extern crate itertools_num;
 //extern crate num;
 //extern crate num_traits;
-extern crate wasm_streams;
-extern crate console_error_panic_hook;
-extern crate mapproj;
-extern crate wcs;
 use std::panic;
 
 pub trait Abort {
@@ -68,6 +64,7 @@ pub fn unwrap_abort<T>(o: Option<T>) -> T {
 #[macro_use]
 mod utils;
 
+use al_api::color::{Color, ColorRGBA};
 use math::projection::*;
 use wasm_bindgen::prelude::*;
 
@@ -75,7 +72,6 @@ mod app;
 pub mod async_task;
 mod camera;
 
-mod colormap;
 mod coosys;
 mod downloader;
 mod healpix;
@@ -89,7 +85,7 @@ mod time;
 mod fifo_cache;
 
 use crate::{
-    camera::CameraViewPort, colormap::Colormaps, math::lonlat::LonLatT, shader::ShaderManager, time::DeltaTime,
+    camera::CameraViewPort, math::lonlat::LonLatT, shader::ShaderManager, time::DeltaTime,
     healpix::coverage::HEALPixCoverage,
 };
 use crate::downloader::request::moc::from_fits_hpx;
@@ -100,7 +96,10 @@ use moclib::deser::fits;
 use std::io::Cursor;
 
 use al_api::hips::{HiPSColor, HiPSProperties, SimpleHiPS};
+
+use al_core::Colormap;
 use al_core::{WebGlContext};
+use al_core::colormap::Colormaps;
 
 use al_api::coo_system::CooSystem;
 
@@ -304,12 +303,9 @@ impl WebClient {
         // Deserialize the survey objects that compose the survey
         let surveys: Result<Vec<SimpleHiPS>, serde_wasm_bindgen::Error> = surveys
             .into_iter()
-            .map(|h| {
-                serde_wasm_bindgen::from_value(h)
-            })
+            .map(|hips| serde_wasm_bindgen::from_value(hips))
             .collect::<Result<Vec<_>, _>>();
 
-        //let surveys: Vec<SimpleHiPS> = surveys.iter().map(SimpleHiPS::from).collect::<Vec<_>>();
         let surveys = surveys?;
         self.app.set_image_surveys(surveys)?;
 
@@ -334,13 +330,6 @@ impl WebClient {
         self.app.set_image_survey_color_cfg(layer, meta)
     }
 
-    #[wasm_bindgen(js_name = setImageSurveyImageFormat)]
-    pub fn set_image_survey_img_format(&mut self, layer: String, format: JsValue) -> Result<(), JsValue> {
-        let format = serde_wasm_bindgen::from_value(format)?;
-
-        self.app.set_image_survey_img_format(layer, format)
-    }
-
     #[wasm_bindgen(js_name = setImageSurveyUrl)]
     pub fn set_survey_url(&mut self, past_url: String, new_url: String) -> Result<(), JsValue> {
         self.app.set_survey_url(past_url, new_url)
@@ -712,14 +701,43 @@ impl WebClient {
     /// in core/img/colormaps/colormaps.png
     #[wasm_bindgen(js_name = getAvailableColormapList)]
     pub fn get_available_colormap_list(&self) -> Result<Vec<JsValue>, JsValue> {
-        let colormaps = Colormaps::get_list_available_colormaps()
+        let colormaps = self.app.get_colormaps()
+            .get_list_available_colormaps()
             .iter()
-            .map(|&s| JsValue::from_str(s))
+            .map(|s| JsValue::from_str(s))
             .collect::<Vec<_>>();
 
         Ok(colormaps)
     }
 
+    #[wasm_bindgen(js_name = createCustomColormap)]
+    pub fn add_custom_colormap(&mut self, label: String, hex_colors: Vec<JsValue>) -> Result<(), JsValue> {
+        let rgba_colors: Result<Vec<_>, JsValue> = hex_colors
+            .into_iter()
+            .map(|hex_color| {
+                let hex_color = serde_wasm_bindgen::from_value(hex_color)?;
+                let color = Color::hexToRgba(hex_color);
+                let color_rgba: ColorRGBA = color.try_into()?;
+            
+                Ok(colorgrad::Color::new(
+                    color_rgba.r as f64,
+                    color_rgba.g as f64,
+                    color_rgba.b as f64,
+                    color_rgba.a as f64)
+                )
+            })
+            .collect();
+
+        let grad = colorgrad::CustomGradient::new()
+            .colors(&rgba_colors?)
+            .build()
+            .map_err(|err| JsValue::from_str(&format!("{:?}", err)))?;
+
+        let cmap = Colormap::new(&label, grad);
+        self.app.add_cmap(label, cmap)?;
+        Ok(())
+    }
+
     /// Get the image canvas where the webgl rendering is done
     #[wasm_bindgen(js_name = canvas)]
     pub fn get_gl_canvas(&mut self) -> Result<Option<js_sys::Object>, JsValue> {
diff --git a/src/core/src/renderable/catalog/manager.rs b/src/core/src/renderable/catalog/manager.rs
index 52340fe3..4450da0a 100644
--- a/src/core/src/renderable/catalog/manager.rs
+++ b/src/core/src/renderable/catalog/manager.rs
@@ -1,12 +1,14 @@
 use super::source::Source;
 use crate::ShaderManager;
-use al_api::colormap::Colormap;
+
 use al_api::resources::Resources;
 
 use al_core::FrameBufferObject;
 use al_core::{
     Texture2D, VecData, VertexArrayObject, WebGlContext,
 };
+use al_core::Colormaps;
+use al_core::colormap::Colormap;
 
 use std::collections::HashMap;
 use std::iter::FromIterator;
@@ -265,7 +267,6 @@ use cgmath::Vector2;
 use std::collections::HashSet;
 const MAX_SOURCES_PER_CATALOG: f32 = 50000.0;
 
-use crate::colormap::Colormaps;
 use crate::survey::view::HEALPixCellsInView;
 use crate::Abort;
 impl Catalog {
@@ -498,7 +499,7 @@ impl Catalog {
                 shaderbound
                     .attach_uniform("texture_fbo", &manager.fbo.texture) // FBO density texture computed just above
                     .attach_uniform("alpha", &self.alpha) // Alpha channel
-                    .attach_uniforms_from(&self.colormap)
+                    .attach_uniforms_with_params_from(&self.colormap, colormaps)
                     .attach_uniforms_from(colormaps)
                     .attach_uniform("reversed", &0.0_f32)
                     .bind_vertex_array_object_ref(&manager.vertex_array_object_screen)
diff --git a/src/core/src/renderable/hips/mod.rs b/src/core/src/renderable/hips/mod.rs
index 6d69a3b9..16d4f970 100644
--- a/src/core/src/renderable/hips/mod.rs
+++ b/src/core/src/renderable/hips/mod.rs
@@ -2,19 +2,20 @@ mod triangulation;
 pub mod uv;
 pub mod raytracing;
 
-use al_api::hips::{GrayscaleColor, HiPSTileFormat};
+use al_api::hips::HiPSTileFormat;
 
+use al_core::colormap::Colormap;
 use al_core::VertexArrayObject;
 use al_core::VecData;
 use al_core::shader::Shader;
 use al_core::WebGlContext;
 use al_core::image::Image;
 use al_core::image::format::ImageFormatType;
+use al_core::colormap::Colormaps;
 
 use crate::ProjectionType;
 use crate::math::{vector::dist2, angle::Angle};
 use crate::camera::CameraViewPort;
-use crate::colormap::Colormaps;
 use crate::{shader::ShaderManager, survey::config::HiPSConfig};
 use crate::{
     math::lonlat::LonLatT,
@@ -281,66 +282,43 @@ impl RecomputeRasterizer for UnZoom {
 }
 
 pub fn get_raster_shader<'a>(
-    color: &HiPSColor,
+    cmap: &Colormap,
     gl: &WebGlContext,
     shaders: &'a mut ShaderManager,
-    integer_tex: bool,
-    unsigned_tex: bool,
+    config: &HiPSConfig,
 ) -> Result<&'a Shader, JsValue> {
-    match color {
-        HiPSColor::Color => crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerColorFS"),
-        HiPSColor::Grayscale { color, .. } => match color {
-            GrayscaleColor::Color(..) => {
-                if unsigned_tex {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColorUnsignedFS")
-                } else if integer_tex {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColorIntegerFS")
-                } else {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColorFS")
-                }
-            }
-            GrayscaleColor::Colormap { .. } => {
-                if unsigned_tex {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapUnsignedFS")
-                } else if integer_tex {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapIntegerFS")
-                } else {
-                    crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapFS")
-                }
-            }
-        },
+    let colored_hips = config.is_colored();
+
+    if colored_hips && cmap.label() == "native" {
+        crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerColorFS")
+    } else {
+        if config.tex_storing_unsigned_int {
+            crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapUnsignedFS")
+        } else if config.tex_storing_integers {
+            crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapIntegerFS")
+        } else {
+            crate::shader::get_shader(gl, shaders, "RasterizerVS", "RasterizerGrayscale2ColormapFS")
+        }
     }
 }
 
 pub fn get_raytracer_shader<'a>(
-    color: &HiPSColor,
+    cmap: &Colormap,
     gl: &WebGlContext,
     shaders: &'a mut ShaderManager,
-    integer_tex: bool,
-    unsigned_tex: bool,
+    config: &HiPSConfig,
 ) -> Result<&'a Shader, JsValue> {
-    match color {
-        HiPSColor::Color => crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerColorFS"),
-        HiPSColor::Grayscale { color, .. } => match color {
-            GrayscaleColor::Color(..) => {
-                if unsigned_tex {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColorUnsignedFS")
-                } else if integer_tex {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColorIntegerFS")
-                } else {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColorFS")
-                }
-            }
-            GrayscaleColor::Colormap { .. } => {
-                if unsigned_tex {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapUnsignedFS")
-                } else if integer_tex {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapIntegerFS")
-                } else {
-                    crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapFS")
-                }
-            }
-        },
+    let colored_hips = config.is_colored();
+    if colored_hips && cmap.label() == "native" {
+        crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerColorFS")
+    } else {
+        if config.tex_storing_unsigned_int {
+            crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapUnsignedFS")
+        } else if config.tex_storing_integers {
+            crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapIntegerFS")
+        } else {
+            crate::shader::get_shader(gl, shaders, "RayTracerVS", "RayTracerGrayscale2ColormapFS")
+        }
     }
 }
 
@@ -953,23 +931,26 @@ impl HiPS {
         };*/
         let raytracing = raytracer.is_rendering(camera/* , depth_texture*/);
         let longitude_reversed = camera.get_longitude_reversed();
+        let config = self.get_config();
 
+        let cmap = colormaps.get(color.cmap_name.as_ref());
         if raytracing {
             // Triangle are defined in CCW
             self.gl.cull_face(WebGl2RenderingContext::BACK);
 
             let shader = get_raytracer_shader(
-                color,
+                cmap,
                 &self.gl,
                 shaders,
-                self.textures.config.tex_storing_integers,
-                self.textures.config.tex_storing_unsigned_int,
+                &config,
             )?;
 
             let shader = shader.bind(&self.gl);
             shader
                 .attach_uniforms_from(camera)
                 .attach_uniforms_from(&self.textures)
+                // send the cmap appart from the color config
+                .attach_uniforms_with_params_from(cmap, colormaps)
                 .attach_uniforms_from(color)
                 .attach_uniform("model", &w2v)
                 .attach_uniform("inv_model", &v2w)
@@ -1001,19 +982,19 @@ impl HiPS {
             // - The UVs are changed if:
             //     * new cells are added/removed (because new cells are added)
             //     * there are new available tiles for the GPU
-            let config = self.get_config();
             let shader = get_raster_shader(
-                color,
+                cmap,
                 &self.gl,
                 shaders,
-                config.tex_storing_integers,
-                config.tex_storing_unsigned_int,
+                &config,
             )?
             .bind(&self.gl);
 
             shader
                 .attach_uniforms_from(camera)
                 .attach_uniforms_from(&self.textures)
+                // send the cmap appart from the color config
+                .attach_uniforms_with_params_from(cmap, colormaps)
                 .attach_uniforms_from(color)
                 .attach_uniform("model", &w2v)
                 .attach_uniform("inv_model", &v2w)
diff --git a/src/core/src/renderable/image.rs b/src/core/src/renderable/image.rs
index 8a2f6622..503c9e20 100644
--- a/src/core/src/renderable/image.rs
+++ b/src/core/src/renderable/image.rs
@@ -346,7 +346,7 @@ impl FitsImage {
                 shader
                     .bind(&self.gl)
                     .attach_uniforms_from(colormaps)
-                    .attach_uniforms_from(color)
+                    .attach_uniforms_with_params_from(color, colormaps)
                     .attach_uniform("opacity", opacity)
                     .attach_uniform("tex", &self.texture)
                     .attach_uniform("scale", &self.scale)
diff --git a/src/core/src/renderable/mod.rs b/src/core/src/renderable/mod.rs
index 293330e0..5deaa169 100644
--- a/src/core/src/renderable/mod.rs
+++ b/src/core/src/renderable/mod.rs
@@ -21,12 +21,12 @@ use al_core::shader::Shader;
 use al_core::WebGlContext;
 use al_core::image::format::ImageFormatType;
 use al_core::webgl_ctx::GlWrapper;
+use al_core::colormap::Colormaps;
 
 use crate::Abort;
 use crate::ProjectionType;
 use crate::renderable::image::FitsImage;
 use crate::camera::CameraViewPort;
-use crate::colormap::Colormaps;
 use crate::shader::ShaderId;
 use crate::{shader::ShaderManager, survey::config::HiPSConfig};
 use crate::SimpleHiPS;
@@ -369,11 +369,10 @@ impl Layers {
             layer,
             properties,
             meta,
-            img_format,
             ..
         } in hipses.into_iter()
         {
-            let config = HiPSConfig::new(&properties, img_format)?;
+            let config = HiPSConfig::new(&properties, meta.img_format)?;
             //camera.set_longitude_reversed(meta.longitude_reversed);
 
             // Get the most precise survey from all the ones given
@@ -497,6 +496,10 @@ impl Layers {
         self.surveys.get_mut(root_url)
     }
 
+    pub fn get_hips(&mut self, root_url: &str) -> Option<&HiPS> {
+        self.surveys.get(root_url)
+    }
+
     pub fn values_hips(&self) -> impl Iterator<Item = &HiPS> {
         self.surveys.values()
     }
diff --git a/src/core/src/survey/config.rs b/src/core/src/survey/config.rs
index 6c436f81..3ac1c10e 100644
--- a/src/core/src/survey/config.rs
+++ b/src/core/src/survey/config.rs
@@ -171,6 +171,7 @@ pub struct HiPSConfig {
     pub frame: CooSystem,
     pub bitpix: Option<i32>,
     format: ImageFormatType,
+    colored: bool,
 }
 
 use crate::math;
@@ -316,6 +317,7 @@ impl HiPSConfig {
             bitpix,
             format,
             tile_size,
+            colored: properties.is_colored()
         };
 
         Ok(hips_config)
@@ -480,6 +482,11 @@ impl HiPSConfig {
         self.format
     }
 
+    #[inline]
+    pub fn is_colored(&self) -> bool {
+        self.colored
+    }
+
     #[inline]
     pub fn get_default_image(&self) -> &EmptyTileImage {
         &self.empty_image
diff --git a/src/core/src/tile_fetcher.rs b/src/core/src/tile_fetcher.rs
index 8ee71e3e..124a0df5 100644
--- a/src/core/src/tile_fetcher.rs
+++ b/src/core/src/tile_fetcher.rs
@@ -1,8 +1,12 @@
-const MAX_NUM_TILE_FETCHING: isize = 8;
-const MAX_QUERY_QUEUE_LENGTH: usize = 100;
+use crate::downloader::{query, Downloader};
+use crate::renderable::HiPS;
+use crate::Abort;
+
 use std::collections::VecDeque;
 
-use crate::downloader::query;
+const MAX_NUM_TILE_FETCHING: isize = 8;
+const MAX_QUERY_QUEUE_LENGTH: usize = 100;
+
 pub struct TileFetcherQueue {
     num_tiles_fetched: isize,
     // A stack of queries to fetch
@@ -10,8 +14,6 @@ pub struct TileFetcherQueue {
     base_tile_queries: Vec<query::Tile>,
 }
 
-use crate::downloader::Downloader;
-use crate::Abort;
 impl TileFetcherQueue {
     pub fn new() -> Self {
         let queries = VecDeque::new();
@@ -68,4 +70,27 @@ impl TileFetcherQueue {
             }
         }
     }
+
+    pub fn launch_starting_hips_requests(&mut self, hips: &HiPS, downloader: &mut Downloader) {
+        let cfg = hips.get_config();
+        // Request for the allsky first
+        // The allsky is not mandatory present in a HiPS service but it is better to first try to search for it
+        downloader.fetch(query::PixelMetadata::new(cfg));
+        // Try to fetch the MOC
+        downloader.fetch(query::Moc::new(format!("{}/Moc.fits", cfg.get_root_url()), al_api::moc::MOC::default()));
+
+        let tile_size = cfg.get_tile_size();
+        //Request the allsky for the small tile size or if base tiles are not available
+        if tile_size <= 128 || cfg.get_min_depth_tile() > 0 {
+            // Request the allsky
+            downloader.fetch(query::Allsky::new(cfg));
+        } else {
+            for texture_cell in crate::healpix::cell::ALLSKY_HPX_CELLS_D0 {
+                for cell in texture_cell.get_tile_cells(cfg) {
+                    let query = query::Tile::new(&cell, cfg);
+                    self.append_base_tile(query, downloader);
+                }
+            }
+        }
+    }
 }
diff --git a/src/css/aladin.css b/src/css/aladin.css
index 7419d29a..8b88ef0f 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -235,18 +235,19 @@ word-wrap:break-word;
 }
 
 /* Chrome, Safari, Edge, Opera */
+/*
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     margin: 0; 
-}
-
+}*/
 /* Firefox */
+/*
 input[type=number] {
   -moz-appearance: textfield;
-}
+}*/
 
 .aladin-dialog {
 	display: none;
diff --git a/src/glsl/webgl1/hips/rasterizer/grayscale_to_color.frag b/src/glsl/webgl1/hips/rasterizer/grayscale_to_color.frag
deleted file mode 100644
index 660eee02..00000000
--- a/src/glsl/webgl1/hips/rasterizer/grayscale_to_color.frag
+++ /dev/null
@@ -1,30 +0,0 @@
-precision mediump float;
-precision mediump sampler2D;
-precision mediump int;
-
-
-varying vec3 frag_uv_start;
-varying vec3 frag_uv_end;
-varying float frag_blending_factor;
-varying float m_start;
-varying float m_end;
-
-@import ../color;
-
-uniform float opacity;
-
-vec4 get_color(vec3 uv, float empty) {
-    vec4 color = mix(get_color_from_grayscale_texture(uv), vec4(0.0), empty);
-    return color;
-}
-
-void main() {
-    vec4 color_start = get_color(frag_uv_start, m_start);
-    vec4 color_end = get_color(frag_uv_end, m_end);
-
-    vec4 out_frag_color = mix(color_start, color_end, frag_blending_factor);
-    out_frag_color.a = out_frag_color.a * opacity;
-
-    gl_FragColor = out_frag_color;
-}
-
diff --git a/src/glsl/webgl1/hips/raytracer/grayscale_to_color.frag b/src/glsl/webgl1/hips/raytracer/grayscale_to_color.frag
deleted file mode 100644
index eb60c81c..00000000
--- a/src/glsl/webgl1/hips/raytracer/grayscale_to_color.frag
+++ /dev/null
@@ -1,90 +0,0 @@
-precision mediump float;
-precision mediump sampler2D;
-precision mediump int;
-
-varying vec3 out_vert_pos;
-varying vec2 out_clip_pos;
-
-struct Tile {
-    int uniq; // Healpix cell
-    int texture_idx; // Index in the texture buffer
-    float start_time; // Absolute time that the load has been done in ms
-    float empty;
-};
-
-uniform Tile textures_tiles[192];
-uniform int num_tiles;
-
-uniform float current_time; // current time in ms
-
-@import ../color;
-@import ./healpix;
-
-uniform float opacity;
-
-Tile get_tile(int idx) {
-    for(int i = 0; i < 12; i++) {
-        if( i == idx ) {
-            return textures_tiles[i];
-        }
-    }
-}
-
-Tile binary_search_tile(int uniq) {
-    int l = 0;
-    int r = 11;
-    for (int v = 0; v <= 5; v++) {
-        int mid = (l + r) / 2;
-
-        Tile tile = get_tile(mid);
-        if(tile.uniq == uniq) {
-            return tile;
-        } else if(tile.uniq < uniq) {
-            l = mid + 1;
-        } else {
-            r = mid - 1;
-        }
-
-        // before exiting the loop
-        if (l >= r) {
-            return get_tile(l);
-        }
-    }
-}
-
-vec4 get_tile_color(vec3 pos) {
-    float delta = asin(pos.y);
-    float theta = atan(pos.x, pos.z);
-    HashDxDy result = hash_with_dxdy(vec2(theta, delta));
-
-    int idx = result.idx;
-    vec2 uv = vec2(clamp(result.dy, 0.0, 1.0), result.dx);
-    int uniq = 16 + idx; 
-    Tile tile = binary_search_tile(uniq);
-
-    int idx_texture = tile.texture_idx / 64;
-    int off = tile.texture_idx - idx_texture * 64;
-
-    int idx_row = off / 8; // in [0; 7]
-    int idx_col = off - idx_row * 8; // in [0; 7]
-
-    vec2 offset = (vec2(float(idx_col), float(idx_row)) + uv)*0.125;
-    vec3 UV = vec3(offset, float(idx_texture));
-
-    vec4 color = get_color_from_grayscale_texture(UV);
-    color.a *= (1.0 - float(tile.empty));
-    return color;
-}
-
-uniform sampler2D position_tex;
-uniform mat4 model;
-void main() {
-    vec2 uv = out_clip_pos * 0.5 + 0.5;
-    vec3 n = texture2D(position_tex, uv).rgb;
-
-    vec3 frag_pos = vec3(model * vec4(n, 1.0));
-
-    vec4 c = get_tile_color(frag_pos);
-    c.a = c.a * opacity;
-    gl_FragColor = c;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/color.glsl b/src/glsl/webgl2/hips/color.glsl
index 215d8693..d5d28095 100644
--- a/src/glsl/webgl2/hips/color.glsl
+++ b/src/glsl/webgl2/hips/color.glsl
@@ -19,6 +19,8 @@ uniform int tex_storing_fits;
 
 @include "../colormaps/colormap.glsl"
 @include "./transfer_funcs.glsl"
+@include "./tonal_corrections.glsl"
+@include "./hsv.glsl"
 
 vec4 get_pixels(vec3 uv) {
     int idx_texture = int(uv.z);
@@ -35,12 +37,12 @@ vec4 get_pixels(vec3 uv) {
 
 vec3 reverse_uv(vec3 uv) {
     uv.y = size_tile_uv + 2.0*size_tile_uv*floor(uv.y / size_tile_uv) - uv.y;
-
     return uv;
 }
 
 vec4 get_color_from_texture(vec3 UV) {
-    return get_pixels(UV);
+    vec4 color = get_pixels(UV);
+    return apply_tonal(color);
 }
 
 vec4 get_colormap_from_grayscale_texture(vec3 UV) {
@@ -52,19 +54,6 @@ vec4 get_colormap_from_grayscale_texture(vec3 UV) {
     float alpha = x * scale + offset;
     alpha = transfer_func(H, alpha, min_value, max_value);
 
-    return mix(colormap_f(alpha) * color.a, vec4(0.0), float(x == blank || isnan(x)));
-}
-
-uniform vec4 C;
-uniform float K;
-vec4 get_color_from_grayscale_texture(vec3 UV) {
-    // FITS data pixels are reversed along the y axis
-    vec3 uv = mix(UV, reverse_uv(UV), float(tex_storing_fits == 1));
-
-    vec4 color = get_pixels(uv);
-    float x = color.r;
-    float alpha = x * scale + offset;
-    alpha = transfer_func(H, alpha, min_value, max_value);
-
-    return mix(vec4(C.rgb * K * alpha, C.a * color.a), vec4(0.0), float(x == blank || isnan(x)));
+    vec4 new_color = mix(colormap_f(alpha) * color.a, vec4(0.0), float(x == blank || isnan(x)));
+    return apply_tonal(new_color);
 }
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/color_i.glsl b/src/glsl/webgl2/hips/color_i.glsl
index 43fae380..bb02d24a 100644
--- a/src/glsl/webgl2/hips/color_i.glsl
+++ b/src/glsl/webgl2/hips/color_i.glsl
@@ -18,6 +18,7 @@ uniform int tex_storing_fits;
 
 @include "../colormaps/colormap.glsl"
 @include "./transfer_funcs.glsl"
+@include "./tonal_corrections.glsl"
 
 ivec4 get_pixels(vec3 uv) {
     int idx_texture = int(uv.z);
@@ -34,7 +35,6 @@ ivec4 get_pixels(vec3 uv) {
 
 vec3 reverse_uv(vec3 uv) {
     uv.y = size_tile_uv + 2.0*size_tile_uv*floor(uv.y / size_tile_uv) - uv.y;
-
     return uv;
 }
 
@@ -46,18 +46,6 @@ vec4 get_colormap_from_grayscale_texture(vec3 UV) {
     float alpha = x * scale + offset;
     alpha = transfer_func(H, alpha, min_value, max_value);
 
-    return mix(colormap_f(alpha), vec4(0.0), float(x == blank));
-}
-
-uniform vec4 C;
-uniform float K;
-vec4 get_color_from_grayscale_texture(vec3 UV) {
-    // FITS data pixels are reversed along the y axis
-    vec3 uv = mix(UV, reverse_uv(UV), float(tex_storing_fits == 1));
-
-    float x = float(get_pixels(uv).r);
-    float alpha = x * scale + offset;
-    alpha = transfer_func(H, alpha, min_value, max_value);
-
-    return mix(vec4(C.rgb * K * alpha, C.a), vec4(0.0), float(x == blank));
+    vec4 new_color = mix(colormap_f(alpha), vec4(0.0), float(x == blank));
+    return apply_tonal(new_color);
 }
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/color_u.glsl b/src/glsl/webgl2/hips/color_u.glsl
index 3b61eb4f..db09bdbc 100644
--- a/src/glsl/webgl2/hips/color_u.glsl
+++ b/src/glsl/webgl2/hips/color_u.glsl
@@ -18,6 +18,7 @@ uniform int tex_storing_fits;
 
 @include "../colormaps/colormap.glsl"
 @include "./transfer_funcs.glsl"
+@include "./tonal_corrections.glsl"
 
 uvec4 get_pixels(vec3 uv) {
     int idx_texture = int(uv.z);
@@ -34,7 +35,6 @@ uvec4 get_pixels(vec3 uv) {
 
 vec3 reverse_uv(vec3 uv) {
     uv.y = size_tile_uv + 2.0*size_tile_uv*floor(uv.y / size_tile_uv) - uv.y;
-
     return uv;
 }
 
@@ -46,18 +46,6 @@ vec4 get_colormap_from_grayscale_texture(vec3 UV) {
     float alpha = x * scale + offset;
     alpha = transfer_func(H, alpha, min_value, max_value);
 
-    return mix(colormap_f(alpha), vec4(0.0), float(x == blank));
-}
-
-uniform vec4 C;
-uniform float K;
-vec4 get_color_from_grayscale_texture(vec3 UV) {
-    // FITS data pixels are reversed along the y axis
-    vec3 uv = mix(UV, reverse_uv(UV), float(tex_storing_fits == 1));
-
-    float x = float(get_pixels(uv).r);
-    float alpha = x * scale + offset;
-    alpha = transfer_func(H, alpha, min_value, max_value);
-
-    return mix(vec4(C.rgb * K * alpha, C.a), vec4(0.0), float(x == blank));
+    vec4 new_color = mix(colormap_f(alpha), vec4(0.0), float(x == blank));
+    return apply_tonal(new_color);
 }
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/hsv.glsl b/src/glsl/webgl2/hips/hsv.glsl
new file mode 100644
index 00000000..dc4e6bf9
--- /dev/null
+++ b/src/glsl/webgl2/hips/hsv.glsl
@@ -0,0 +1,15 @@
+vec3 rgb2hsv(vec3 c) {
+    vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+    vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+    vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+
+    float d = q.x - min(q.w, q.y);
+    float e = 1.0e-10;
+    return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+vec3 hsv2rgb(vec3 c) {
+    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color.frag b/src/glsl/webgl2/hips/rasterizer/grayscale_to_color.frag
deleted file mode 100644
index 3eec605f..00000000
--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color.frag
+++ /dev/null
@@ -1,32 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp isampler2D;
-precision mediump int;
-
-in vec3 frag_uv_start;
-in vec3 frag_uv_end;
-in float frag_blending_factor;
-in float m_start;
-in float m_end;
-
-out vec4 out_frag_color;
-
-@include "../color.glsl"
-
-uniform float opacity;
-
-vec4 get_color(vec3 uv, float empty) {
-    vec4 color = mix(get_color_from_grayscale_texture(uv), vec4(0.0), empty);
-    //vec4 color = get_color_from_grayscale_texture(uv);
-    return color;
-}
-
-void main() {
-    vec4 color_start = get_color(frag_uv_start, m_start);
-    vec4 color_end = get_color(frag_uv_end, m_end);
-
-    out_frag_color = mix(color_start, color_end, frag_blending_factor);
-    out_frag_color.a = out_frag_color.a * opacity;
-}
-
diff --git a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_i.frag b/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_i.frag
deleted file mode 100644
index 986ce43d..00000000
--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_i.frag
+++ /dev/null
@@ -1,30 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp isampler2D;
-precision mediump int;
-
-in vec3 frag_uv_start;
-in vec3 frag_uv_end;
-in float frag_blending_factor;
-in float m_start;
-in float m_end;
-
-out vec4 out_frag_color;
-
-@include "../color_i.glsl"
-
-uniform float opacity;
-
-vec4 get_color(vec3 uv, float empty) {
-    vec4 color = mix(get_color_from_grayscale_texture(uv), vec4(0.0), empty);
-    return color;
-}
-
-void main() {
-    vec4 color_start = get_color(frag_uv_start, m_start);
-    vec4 color_end = get_color(frag_uv_end, m_end);
-
-    out_frag_color = mix(color_start, color_end, frag_blending_factor);
-    out_frag_color.a = out_frag_color.a * opacity;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_u.frag b/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_u.frag
deleted file mode 100644
index 56824377..00000000
--- a/src/glsl/webgl2/hips/rasterizer/grayscale_to_color_u.frag
+++ /dev/null
@@ -1,31 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp isampler2D;
-precision highp usampler2D;
-precision mediump int;
-
-in vec3 frag_uv_start;
-in vec3 frag_uv_end;
-in float frag_blending_factor;
-in float m_start;
-in float m_end;
-
-out vec4 out_frag_color;
-
-@include "../color_u.glsl"
-
-uniform float opacity;
-
-vec4 get_color(vec3 uv, float empty) {
-    vec4 color = mix(get_color_from_grayscale_texture(uv), vec4(0.0), empty);
-    return color;
-}
-
-void main() {
-    vec4 color_start = get_color(frag_uv_start, m_start);
-    vec4 color_end = get_color(frag_uv_end, m_end);
-
-    out_frag_color = mix(color_start, color_end, frag_blending_factor);
-    out_frag_color.a = out_frag_color.a * opacity;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/raytracer/grayscale_to_color.frag b/src/glsl/webgl2/hips/raytracer/grayscale_to_color.frag
deleted file mode 100644
index 2ae9df81..00000000
--- a/src/glsl/webgl2/hips/raytracer/grayscale_to_color.frag
+++ /dev/null
@@ -1,60 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp usampler2D;
-precision highp isampler2D;
-precision mediump int;
-
-in vec2 out_clip_pos;
-in vec3 frag_pos;
-out vec4 out_frag_color;
-
-struct Tile {
-    int uniq; // Healpix cell
-    int texture_idx; // Index in the texture buffer
-    float start_time; // Absolute time that the load has been done in ms
-    float empty;
-};
-
-uniform Tile textures_tiles[12];
-
-@include "../color.glsl"
-@include "./healpix.glsl"
-
-uniform float opacity;
-
-vec4 get_tile_color(vec3 pos) {
-    HashDxDy result = hash_with_dxdy(0, pos.zxy);
-    int idx = result.idx;
-    vec2 uv = vec2(result.dy, result.dx);
-
-    Tile tile = textures_tiles[idx];
-
-    int idx_texture = tile.texture_idx >> 6;
-    int off = tile.texture_idx & 0x3F;
-    float idx_row = float(off >> 3); // in [0; 7]
-    float idx_col = float(off & 0x7); // in [0; 7]
-
-    vec2 offset = (vec2(idx_col, idx_row) + uv)*0.125;
-    vec3 UV = vec3(offset, float(idx_texture));
-
-    vec4 color = get_color_from_grayscale_texture(UV);
-    // For empty tiles we set the alpha of the pixel to 0.0
-    // so that what is behind will be plotted
-    color.a *= (1.0 - tile.empty);
-    return color;
-}
-
-uniform sampler2D position_tex;
-uniform mat4 model;
-
-void main() {
-    //vec2 uv = out_clip_pos * 0.5 + 0.5;
-    //vec3 n = texture(position_tex, uv).rgb;
-
-    //vec3 frag_pos2 = vec3(model * vec4(n, 1.0));
-
-    vec4 c = get_tile_color(normalize(frag_pos));
-    out_frag_color = c;
-    out_frag_color.a = out_frag_color.a * opacity;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/raytracer/grayscale_to_color_i.frag b/src/glsl/webgl2/hips/raytracer/grayscale_to_color_i.frag
deleted file mode 100644
index 36db6c59..00000000
--- a/src/glsl/webgl2/hips/raytracer/grayscale_to_color_i.frag
+++ /dev/null
@@ -1,65 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp usampler2D;
-precision highp isampler2D;
-precision mediump int;
-
-in vec2 out_clip_pos;
-in vec3 frag_pos;
-out vec4 out_frag_color;
-
-struct Tile {
-    int uniq; // Healpix cell
-    int texture_idx; // Index in the texture buffer
-    float start_time; // Absolute time that the load has been done in ms
-    float empty;
-};
-
-uniform Tile textures_tiles[12];
-
-struct TileColor {
-    Tile tile;
-    vec4 color;
-    bool found;
-};
-
-@include "../color_i.glsl"
-@include "./healpix.glsl"
-
-uniform float opacity;
-
-vec4 get_tile_color(vec3 pos) {
-    HashDxDy result = hash_with_dxdy(0, pos.zxy);
-    int idx = result.idx;
-    vec2 uv = vec2(result.dy, result.dx);
-
-    Tile tile = textures_tiles[idx];
-
-    int idx_texture = tile.texture_idx >> 6;
-    int off = tile.texture_idx & 0x3F;
-    float idx_row = float(off >> 3); // in [0; 7]
-    float idx_col = float(off & 0x7); // in [0; 7]
-
-    vec2 offset = (vec2(idx_col, idx_row) + uv)*0.125;
-    vec3 UV = vec3(offset, float(idx_texture));
-
-    vec4 color = get_color_from_grayscale_texture(UV);
-    // For empty tiles we set the alpha of the pixel to 0.0
-    // so that what is behind will be plotted
-    color.a *= (1.0 - tile.empty);
-    return color;
-}
-
-uniform sampler2D position_tex;
-uniform mat4 model;
-void main() {
-    /*vec2 uv = out_clip_pos * 0.5 + 0.5;
-    vec3 n = texture(position_tex, uv).rgb;
-
-    vec3 frag_pos = vec3(model * vec4(n, 1.0));*/
-
-    vec4 c = get_tile_color(frag_pos);
-    out_frag_color = c;
-    out_frag_color.a = out_frag_color.a * opacity;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/raytracer/grayscale_to_color_u.frag b/src/glsl/webgl2/hips/raytracer/grayscale_to_color_u.frag
deleted file mode 100644
index a97f7dd4..00000000
--- a/src/glsl/webgl2/hips/raytracer/grayscale_to_color_u.frag
+++ /dev/null
@@ -1,66 +0,0 @@
-#version 300 es
-precision highp float;
-precision highp sampler2D;
-precision highp usampler2D;
-precision highp isampler2D;
-precision mediump int;
-
-in vec2 out_clip_pos;
-in vec3 frag_pos;
-out vec4 out_frag_color;
-
-struct Tile {
-    int uniq; // Healpix cell
-    int texture_idx; // Index in the texture buffer
-    float start_time; // Absolute time that the load has been done in ms
-    float empty;
-};
-
-uniform Tile textures_tiles[12];
-
-struct TileColor {
-    Tile tile;
-    vec4 color;
-    bool found;
-};
-
-@include "../color_u.glsl"
-@include "./healpix.glsl"
-
-uniform float opacity;
-
-vec4 get_tile_color(vec3 pos) {
-    HashDxDy result = hash_with_dxdy(0, pos.zxy);
-    int idx = result.idx;
-    vec2 uv = vec2(result.dy, result.dx);
-
-    Tile tile = textures_tiles[idx];
-
-    int idx_texture = tile.texture_idx >> 6;
-    int off = tile.texture_idx & 0x3F;
-    float idx_row = float(off >> 3); // in [0; 7]
-    float idx_col = float(off & 0x7); // in [0; 7]
-
-    vec2 offset = (vec2(idx_col, idx_row) + uv)*0.125;
-    vec3 UV = vec3(offset, float(idx_texture));
-
-    vec4 color = get_color_from_grayscale_texture(UV);
-    // For empty tiles we set the alpha of the pixel to 0.0
-    // so that what is behind will be plotted
-    color.a *= (1.0 - tile.empty);
-    return color;
-}
-
-uniform sampler2D position_tex;
-uniform mat4 model;
-
-void main() {
-    /*vec2 uv = out_clip_pos * 0.5 + 0.5;
-    vec3 n = texture(position_tex, uv).rgb;
-
-    vec3 frag_pos = vec3(model * vec4(n, 1.0));*/
-
-    vec4 c = get_tile_color(frag_pos);
-    out_frag_color = c;
-    out_frag_color.a = out_frag_color.a * opacity;
-}
\ No newline at end of file
diff --git a/src/glsl/webgl2/hips/tonal_corrections.glsl b/src/glsl/webgl2/hips/tonal_corrections.glsl
new file mode 100644
index 00000000..f9fea289
--- /dev/null
+++ b/src/glsl/webgl2/hips/tonal_corrections.glsl
@@ -0,0 +1,49 @@
+// This file apply the tonal corrections given in this article:
+// https://timseverien.com/posts/2020-06-19-colour-correction-with-webgl/
+
+uniform float k_gamma;
+uniform float k_saturation;
+uniform float k_contrast;
+uniform float k_brightness;
+uniform float k_exposure;
+
+vec4 apply_gamma(vec4 ic, float g) {
+    float new_r = pow(ic.r, g);
+    float new_g = pow(ic.g, g);
+    float new_b = pow(ic.b, g);
+
+    return vec4(new_r, new_g, new_b, ic.a);
+}
+
+vec4 apply_saturation(vec4 color, float value) {
+    // https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+    const vec3 luminosity_factor = vec3(0.2126, 0.7152, 0.0722);
+    vec3 grayscale = vec3(dot(color.rgb, luminosity_factor));
+    
+    return vec4(mix(grayscale, color.rgb, 1.0 + value), color.a);
+}
+
+vec4 apply_contrast(vec4 color, float value) {
+    return vec4(0.5 + (1.0 + value) * (color.rgb - 0.5), color.a);
+}
+
+vec4 apply_brightness(vec4 color, float value) {
+    return vec4(color.rgb + value, color.a);
+}
+
+vec4 apply_exposure(vec4 color, float value) {
+    return vec4((1.0 + value) * color.rgb, color.a);
+}
+
+vec4 apply_tonal(vec4 color) {
+  return apply_gamma(
+    apply_saturation(
+      apply_contrast(
+        apply_brightness(color, k_brightness),
+        k_contrast
+      ),
+      k_saturation
+    ),
+    k_gamma
+  );
+}
diff --git a/src/img/colormaps/blues.png b/src/img/colormaps/blues.png
deleted file mode 100644
index b5e21885..00000000
Binary files a/src/img/colormaps/blues.png and /dev/null differ
diff --git a/src/img/colormaps/cividis.png b/src/img/colormaps/cividis.png
deleted file mode 100644
index 73ed88dd..00000000
Binary files a/src/img/colormaps/cividis.png and /dev/null differ
diff --git a/src/img/colormaps/colormaps.png b/src/img/colormaps/colormaps.png
deleted file mode 100644
index 9a05af4e..00000000
Binary files a/src/img/colormaps/colormaps.png and /dev/null differ
diff --git a/src/img/colormaps/cubehelix.png b/src/img/colormaps/cubehelix.png
deleted file mode 100644
index b7aff44b..00000000
Binary files a/src/img/colormaps/cubehelix.png and /dev/null differ
diff --git a/src/img/colormaps/eosb.png b/src/img/colormaps/eosb.png
deleted file mode 100644
index b13c3f9c..00000000
Binary files a/src/img/colormaps/eosb.png and /dev/null differ
diff --git a/src/img/colormaps/eosb.xcf b/src/img/colormaps/eosb.xcf
deleted file mode 100644
index f374076f..00000000
Binary files a/src/img/colormaps/eosb.xcf and /dev/null differ
diff --git a/src/img/colormaps/grayscale.png b/src/img/colormaps/grayscale.png
deleted file mode 100644
index 43938c29..00000000
Binary files a/src/img/colormaps/grayscale.png and /dev/null differ
diff --git a/src/img/colormaps/inferno.png b/src/img/colormaps/inferno.png
deleted file mode 100644
index 60208e1b..00000000
Binary files a/src/img/colormaps/inferno.png and /dev/null differ
diff --git a/src/img/colormaps/magma.png b/src/img/colormaps/magma.png
deleted file mode 100644
index e5084b20..00000000
Binary files a/src/img/colormaps/magma.png and /dev/null differ
diff --git a/src/img/colormaps/makecolormap.sh b/src/img/colormaps/makecolormap.sh
deleted file mode 100755
index 1340d16d..00000000
--- a/src/img/colormaps/makecolormap.sh
+++ /dev/null
@@ -1,10 +0,0 @@
-#!/bin/bash
-rm -rf colormaps.png
-
-for colormap_filename in `ls *.png | sort -V`; do
-	convert "$colormap_filename" -crop 256x1+0+0 +repage "$colormap_filename"s
-done
-
-convert -append *.pngs colormaps.png
-
-rm -rf *.pngs
diff --git a/src/img/colormaps/parula.png b/src/img/colormaps/parula.png
deleted file mode 100644
index 1c6705d2..00000000
Binary files a/src/img/colormaps/parula.png and /dev/null differ
diff --git a/src/img/colormaps/plasma.png b/src/img/colormaps/plasma.png
deleted file mode 100644
index bc8d6e9d..00000000
Binary files a/src/img/colormaps/plasma.png and /dev/null differ
diff --git a/src/img/colormaps/rainbow.png b/src/img/colormaps/rainbow.png
deleted file mode 100644
index 761b93d6..00000000
Binary files a/src/img/colormaps/rainbow.png and /dev/null differ
diff --git a/src/img/colormaps/rdbu.png b/src/img/colormaps/rdbu.png
deleted file mode 100644
index 493e735f..00000000
Binary files a/src/img/colormaps/rdbu.png and /dev/null differ
diff --git a/src/img/colormaps/rdyibu.png b/src/img/colormaps/rdyibu.png
deleted file mode 100644
index f6570584..00000000
Binary files a/src/img/colormaps/rdyibu.png and /dev/null differ
diff --git a/src/img/colormaps/redtemperature.png b/src/img/colormaps/redtemperature.png
deleted file mode 100644
index 106b594e..00000000
Binary files a/src/img/colormaps/redtemperature.png and /dev/null differ
diff --git a/src/img/colormaps/spectral.png b/src/img/colormaps/spectral.png
deleted file mode 100644
index a8c4b6e6..00000000
Binary files a/src/img/colormaps/spectral.png and /dev/null differ
diff --git a/src/img/colormaps/summer.png b/src/img/colormaps/summer.png
deleted file mode 100644
index 214a266c..00000000
Binary files a/src/img/colormaps/summer.png and /dev/null differ
diff --git a/src/img/colormaps/viridis.png b/src/img/colormaps/viridis.png
deleted file mode 100644
index 2398e10e..00000000
Binary files a/src/img/colormaps/viridis.png and /dev/null differ
diff --git a/src/img/colormaps/ylgnbu.png b/src/img/colormaps/ylgnbu.png
deleted file mode 100644
index 4011cb7a..00000000
Binary files a/src/img/colormaps/ylgnbu.png and /dev/null differ
diff --git a/src/img/colormaps/ylorbr.png b/src/img/colormaps/ylorbr.png
deleted file mode 100644
index b6a9c282..00000000
Binary files a/src/img/colormaps/ylorbr.png and /dev/null differ
diff --git a/src/js/Aladin.js b/src/js/Aladin.js
index 0db7de94..dc9b8fe8 100644
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -44,7 +44,7 @@ import { CooFrameEnum } from "./CooFrameEnum.js";
 import { MeasurementTable } from "./MeasurementTable.js";
 import { Location } from "./Location.js";
 import { Source } from "./Source.js";
-import { HpxImageSurvey } from "./HpxImageSurvey.js";
+import { ImageSurvey } from "./ImageSurvey.js";
 import { Coo } from "./libs/astro/coo.js";
 import { CooConversion } from "./CooConversion.js";
 import { URLBuilder } from "./URLBuilder.js";
@@ -366,7 +366,7 @@ export let Aladin = (function () {
             }
         }
 
-        
+
         // Add the image layers
         // For that we check the survey key of options
         // It can be given as a single string or an array of strings
@@ -392,7 +392,7 @@ export let Aladin = (function () {
 
             this.setBaseImageLayer(dssUrl);
         }
-        
+
         this.view.showCatalog(options.showCatalog);
 
         var aladin = this;
@@ -558,7 +558,7 @@ export let Aladin = (function () {
             options.frame = requestedFrame;
         }
         var requestedSurveyId = $.urlParam('survey');
-        if (requestedSurveyId && HpxImageSurvey.getSurveyInfoFromId(requestedSurveyId)) {
+        if (requestedSurveyId && ImageSurvey.getSurveyInfoFromId(requestedSurveyId)) {
             options.survey = requestedSurveyId;
         }
         var requestedZoom = $.urlParam('zoom');
@@ -988,17 +988,17 @@ export let Aladin = (function () {
             }
     
             this.cacheSurveys.set(id, {id, name, rootUrl, options});
-            return new HpxImageSurvey(id, name, rootUrl, this.view, options);
+            return new ImageSurvey(id, name, rootUrl, this.view, options);
         } else {
             cfg = Utils.clone(cfg)
-            return new HpxImageSurvey(cfg.id, cfg.name, cfg.rootUrl, this.view, cfg.options);
+            return new ImageSurvey(cfg.id, cfg.name, cfg.rootUrl, this.view, cfg.options);
         }
     };
 
     Aladin.prototype.newImageSurvey = function(rootUrlOrId, options) {
         const idOrUrl = rootUrlOrId;
         // Check if the survey has already been added
-        // Create a new HpxImageSurvey
+        // Create a new ImageSurvey
         let isUrl = false;
         if (idOrUrl.includes("http")) {
             isUrl = true;
@@ -1016,14 +1016,14 @@ export let Aladin = (function () {
         }
     }
 
-    // @param imageSurvey : HpxImageSurvey object or image survey identifier
+    // @param imageSurvey : ImageSurvey object or image survey identifier
     // @api
     // @old
     Aladin.prototype.setImageSurvey = function(imageSurvey) {
         this.setBaseImageLayer(imageSurvey);
     };
 
-    // @param imageSurvey : HpxImageSurvey object or image survey identifier
+    // @param imageSurvey : ImageSurvey object or image survey identifier
     // @api
     // @old
     Aladin.prototype.setBackgroundColor = function(rgb) {
@@ -1069,7 +1069,7 @@ export let Aladin = (function () {
         if (typeof idOrUrlOrSurvey === "string") {
             const idOrUrl = idOrUrlOrSurvey;
             // Check if the survey has already been added
-            // Create a new HpxImageSurvey
+            // Create a new ImageSurvey
             let isUrl = false;
             if (idOrUrl.includes("http")) {
                 isUrl = true;
@@ -1821,7 +1821,7 @@ A.hipsDefinitionFromURL = function(url, successCallback) {
 };
 
 A.getAvailableListOfColormaps = function() {
-    return HpxImageSurvey.COLORMAPS;
+    return ImageSurvey.COLORMAPS;
 };
 
 A.init = (async () => {
diff --git a/src/js/Color.js b/src/js/Color.js
index 41d3c8d6..9c51e2b2 100644
--- a/src/js/Color.js
+++ b/src/js/Color.js
@@ -88,6 +88,22 @@ export let Color = (function() {
         } : null;
     };
 
+    Color.hexToRgba = function(hex) {
+        // Expand shorthand form (e.g. "03AF") to full form (e.g. "0033AAFF")
+        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, function(m, r, g, b, a) {
+          return r + r + g + g + b + b + a + a;
+        });
+      
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+          a: parseInt(result[4], 16)
+        } : null;
+    };
+
     Color.rgbToHex = function (r, g, b) {
         return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
     }
diff --git a/src/js/ImageColorCfg.js b/src/js/ImageColorCfg.js
index f75cd155..fd1f6708 100644
--- a/src/js/ImageColorCfg.js
+++ b/src/js/ImageColorCfg.js
@@ -17,45 +17,52 @@
 //    along with Aladin Lite.
 //
 
-
-
 /******************************************************************************
  * Aladin Lite project
  * 
- * File HpxImageSurvey
+ * File ColorCfg
  * 
  * Authors: Thomas Boch & Matthieu Baumann [CDS]
  * 
  *****************************************************************************/
- export let ImageColorCfg = (function() {
+ export let ColorCfg = (function() {
     /** Constructor
      * cooFrame and maxOrder can be set to null
      * They will be determined by reading the properties file
      */
-    function ImageColorCfg(options) {
-        // Name of the layer
-        this.layer = null;
-
+    function ColorCfg(options) {
         // Opacity of the survey/image
         this.opacity = (options && options.opacity) || 1.0;
 
         // Colormap config options
+        this.colormap = (options && options.colormap) || "native";
+        this.colormap = formatColormap(this.colormap);
+
         this.stretch = (options && options.stretch) || "linear";
         this.stretch = this.stretch.toLowerCase();
+        this.reversed = false;
 
-        this.minCut = (options && options.minCut) || 0.0;
-        this.maxCut = (options && options.maxCut) || 1.0;
-        this.colormap = (options && options.colormap) || "grayscale";
+        if (options && options.reversed === true) {
+            this.reversed = true;
+        }
+
+        this.minCut = options && options.minCut;
+        this.maxCut = options && options.maxCut;
         
-        this.reversed = options && options.reversed;
         if (this.reversed === undefined) {
             this.reversed = false;
         }
 
         this.additiveBlending = options.additive;
+
+        // A default value for gamma correction
+        this.kGamma = (options && options.gamma) || 1.0;
+        this.kSaturation = (options && options.saturation) || 0.0;
+        this.kBrightness = (options && options.brightness) || 0.0;
+        this.kContrast = (options && options.contrast) || 0.0;
     };
 
-    HpxImageSurvey.prototype.computeColorCfg = function() {
+    ColorCfg.prototype.get = function() {
         let blend = {
             srcColorFactor: 'SrcAlpha',
             dstColorFactor: 'OneMinusSrcAlpha',
@@ -70,96 +77,142 @@
             }
         }
 
-        // reset the whole meta object
+        // Reset the whole meta object
         return {
             blendCfg: blend,
             opacity: this.opacity,
             color: {
-                grayscale: {
-                    stretch: stretch,
-                    minCut: minCut,
-                    maxCut: maxCut,
-                    color: {
-                        colormap: {
-                            reversed: reversed,
-                            name: colormap,
-                        }
-                    }
-                }
+                // Tonal corrections constants
+                kGamma: this.kGamma,
+                kSaturation: this.kSaturation,
+                kBrightness: this.kBrightness,
+                kContrast: this.kContrast,
+
+                stretch: this.stretch,
+                minCut: this.minCut,
+                maxCut: this.maxCut,
+                reversed: this.reversed,
+                cmapName: this.colormap,
             }
         };
     }
 
     // @api
-    HpxImageSurvey.prototype.setOpacity = function(opacity) {
+    ColorCfg.prototype.setBrightness = function(kBrightness) {
+        kBrightness = +kBrightness || 0.0; // coerce to number
+        this.kBrightness = Math.max(-1, Math.min(kBrightness, 1));
+    };
+
+    // @api
+    ColorCfg.prototype.getBrightness = function() {
+        return this.kBrightness;
+    };
+
+    // @api
+    ColorCfg.prototype.setContrast = function(kContrast) {
+        kContrast = +kContrast || 0.0; // coerce to number
+        this.kContrast = Math.max(-1, Math.min(kContrast, 1));
+    };
+
+    // @api
+    ColorCfg.prototype.getContrast = function() {
+        return this.kContrast;
+    };
+
+    // @api
+    ColorCfg.prototype.setSaturation = function(kSaturation) {
+        kSaturation = +kSaturation || 0.0; // coerce to number
+
+        this.kSaturation = Math.max(-1, Math.min(kSaturation, 1));
+    };
+
+    // @api
+    ColorCfg.prototype.getSaturation = function() {
+        return this.kSaturation;
+    };
+
+    // @api
+    ColorCfg.prototype.setGamma = function(gamma) {
+        gamma = +gamma; // coerce to number
+        this.kGamma = Math.max(0.1, Math.min(gamma, 10));
+    };
+
+    // @api
+    ColorCfg.prototype.getGamma = function() {
+        return this.kGamma;
+    };
+
+    // @api
+    ColorCfg.prototype.setOpacity = function(opacity) {
         opacity = +opacity; // coerce to number
         this.opacity = Math.max(0, Math.min(opacity, 1));
     };
 
     // @oldapi
-    HpxImageSurvey.prototype.setAlpha = HpxImageSurvey.prototype.setOpacity;
+    ColorCfg.prototype.setAlpha = ColorCfg.prototype.setOpacity;
 
     // @api
-    HpxImageSurvey.prototype.getOpacity = function() {
+    ColorCfg.prototype.getOpacity = function() {
         return this.opacity;
     };
 
     // @api
-    HpxImageSurvey.prototype.setBlendingConfig = function(additive = false) {
+    ColorCfg.prototype.setBlendingConfig = function(additive = false) {
         this.additiveBlending = additive;
     };
 
-    // @api
-    // Optional arguments, 
-    HpxImageSurvey.prototype.setColormap = function(colormap, stretch = undefined, reversed = undefined) {
+    ColorCfg.prototype.getBlendingConfig = function() {
+        return this.additiveBlending;
+    };
+
+    var formatColormap = function(colormap) {
         /// colormap
-        // If not defined we set the colormap to grayscale
-        if (!colormap) {
-            colormap = "grayscale";
-        }
-
-        if (colormap === "native") {
-            colormap = "grayscale";
-        }
-
         // Make it case insensitive
         colormap = colormap.toLowerCase();
-
-        if (!ImageColorCfg.COLORMAPS.includes(colormap)) {
-            console.warn("The colormap \'" + colormap + "\' does not exist. You should use one of the following: " + ImageColorCfg.COLORMAPS + "\n\'grayscale\' has been chosen by default.")
-
+        if (!ColorCfg.COLORMAPS.includes(colormap)) {
+            console.warn("The colormap \'" + colormap + "\' is not supported. You should use one of the following: " + ColorCfg.COLORMAPS + "\n\'grayscale\' has been chosen by default.")
+            // If the user specify a colormap that is not supported,
+            // then set it to grayscale
             colormap = "grayscale";
         }
 
+        return colormap;
+    }
+
+    // @api
+    // Optional arguments, 
+    ColorCfg.prototype.setColormap = function(colormap = "native", options = {}) {
+        /// colormap
+        // Make it case insensitive
+        let cmap = formatColormap(colormap);
+
         /// stretch
-        if (stretch) {
-            stretch = stretch.toLowerCase();
+        let stretch = (options && options.stretch) || this.stretch || "linear";
+        stretch = stretch.toLowerCase();
+
+        /// reversed
+        let reversed = false;
+        if (options && options.reversed === true) {
+            reversed = true;
         }
 
-        /// reversed 
-        if (reversed === undefined) {
-            reversed = false;
-        }
-
-        this.colormap = colormap;
+        this.colormap = cmap;
         this.stretch = stretch;
         this.reversed = reversed;
     }
 
     // @api
-    HpxImageSurvey.prototype.setCuts = function(lowCut, highCut) {
+    ColorCfg.prototype.setCuts = function(lowCut, highCut) {
         this.minCut = lowCut;
         this.maxCut = highCut;
     };
 
     // @api
-    ImageColorCfg.prototype.getAlpha = function() {
+    ColorCfg.prototype.getAlpha = function() {
         return this.opacity;
     };
 
-    ImageColorCfg.COLORMAPS = [];
-    
-    return ImageColorCfg;
+    ColorCfg.COLORMAPS = [];
+
+    return ColorCfg;
  })();
- 
- 
\ No newline at end of file
diff --git a/src/js/HpxImageSurvey.js b/src/js/ImageSurvey.js
similarity index 54%
rename from src/js/HpxImageSurvey.js
rename to src/js/ImageSurvey.js
index ce47292b..6ebc4787 100644
--- a/src/js/HpxImageSurvey.js
+++ b/src/js/ImageSurvey.js
@@ -22,7 +22,7 @@
 /******************************************************************************
  * Aladin Lite project
  * 
- * File HpxImageSurvey
+ * File ImageSurvey
  * 
  * Authors: Thomas Boch & Matthieu Baumann [CDS]
  * 
@@ -33,6 +33,7 @@ import { ALEvent } from "./events/ALEvent.js";
 import { CooFrameEnum } from "./CooFrameEnum.js"
 import { Aladin } from "./Aladin.js";
 import { MocServer } from "./MocServer.js";
+import { ColorCfg } from "./ImageColorCfg.js";
 
 export async function fetchSurveyProperties(rootURLOrId) {
     if (!rootURLOrId) {
@@ -125,13 +126,13 @@ export async function fetchSurveyProperties(rootURLOrId) {
     return metadata;
 }
 
-export let HpxImageSurvey = (function() {
+export let ImageSurvey = (function() {
     /** Constructor
      * cooFrame and maxOrder can be set to null
      * They will be determined by reading the properties file
      *  
      */
-    function HpxImageSurvey(id, name, rootURL, view, options) {
+    function ImageSurvey(id, name, rootURL, view, options) {
         // A reference to the view
         this.backend = view;
         // A number used to ensure the correct layer ordering in the aladin lite view
@@ -143,42 +144,41 @@ export let HpxImageSurvey = (function() {
         this.added = false;
         this.id = id;
         this.name = name;
-        // Default options
-        this.options = options || {};
-        
-        if (this.options.imgFormat) {
-            // Img format preprocessing
-            // transform to upper case
-            this.options.imgFormat = this.options.imgFormat.toLowerCase();
 
+        // Image format
+        let imgFormat = options && options.imgFormat;
+        // transform to lower case
+        if (imgFormat) {
+            imgFormat = imgFormat.toLowerCase();
             // convert JPG -> JPEG
-            if (this.options.imgFormat === "jpg") {
-                this.options.imgFormat = "jpeg";
+            if (imgFormat === "jpg") {
+                imgFormat = "jpeg";
+            }
+    
+            if (imgFormat === 'fits') {
+                //tileFormat = "FITS";
+                this.fits = true;
+            } else if (imgFormat === "png") {
+                //tileFormat = "PNG";
+                this.fits = false;
+            } else {
+                // jpeg default case
+                //tileFormat = "JPG";
+                this.fits = false;
             }
         }
 
-        if (this.options.imgFormat === 'fits') {
-            //tileFormat = "FITS";
-            this.fits = true;
-        } else if (this.options.imgFormat === "png") {
-            //tileFormat = "PNG";
-            this.fits = false;
-        } else {
-            // jpeg default case
-            //tileFormat = "JPG";
-            this.fits = false;
-        }
-
-        if (this.options.longitudeReversed === undefined) {
-            this.options.longitudeReversed = false;
-        }
-
-        if (this.options.opacity === undefined) {
-            this.options.opacity = 1.0;
+        this.imgFormat = imgFormat;
+        
+        // Longitude reversed
+        let longitudeReversed = false;
+        if (options && options.longitudeReversed === true) {
+            longitudeReversed = true;
         }
+        this.longitudeReversed = longitudeReversed;
 
         let idxSelectedHiPS = 0;
-        const surveyFound = HpxImageSurvey.SURVEYS.some(s => {
+        const surveyFound = ImageSurvey.SURVEYS.some(s => {
             let res = this.id.endsWith(s.id);
             if (!res) {
                 idxSelectedHiPS += 1;
@@ -186,19 +186,28 @@ export let HpxImageSurvey = (function() {
 
             return res;
         });
+
+        // initialize the color meta data here
+        this.colorCfg = new ColorCfg(options);
+        updateMetadata(this);
+
+        const opt = {
+            ...this.colorCfg.get(),
+            imgFormat: this.imgFormat,
+            longitudeReversed: this.longitudeReversed,
+        };
         // The survey has not been found among the ones cached
         if (!surveyFound) {
-            HpxImageSurvey.SURVEYS.push({
+            ImageSurvey.SURVEYS.push({
                 id: this.id,
                 name: this.name,
-                options: this.options
+                options: opt,
             });
         } else {
-            let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-            surveyDef.options = this.options;
+            let surveyDef = ImageSurvey.SURVEYS[idxSelectedHiPS];
+            surveyDef.options = opt;
         }
 
-        this.updateMeta();
         let self = this;
         (async () => {
             try {
@@ -221,29 +230,29 @@ export let HpxImageSurvey = (function() {
                 // HiPS tile format
                 const formats = metadata.hips_tile_format || "jpeg";
                 const tileFormats = formats.split(' ').map((fmt) => fmt.toLowerCase());
-                if (self.options.imgFormat) {
+                if (self.imgFormat) {
                     // user wants a fits but the metadata tells this format is not available
-                    if (self.options.imgFormat === "fits" && tileFormats.indexOf('fits') < 0) {
+                    if (self.imgFormat === "fits" && tileFormats.indexOf('fits') < 0) {
                         throw self.name + " does not provide fits tiles";
                     }
                     
-                    if (self.options.imgFormat === "png" && tileFormats.indexOf('png') < 0) {
+                    if (self.imgFormat === "png" && tileFormats.indexOf('png') < 0) {
                         throw self.name + " does not provide png tiles";
                     }
                     
-                    if (self.options.imgFormat === "jpeg" && tileFormats.indexOf('jpeg') < 0) {
+                    if (self.imgFormat === "jpeg" && tileFormats.indexOf('jpeg') < 0) {
                         throw self.name + " does not provide jpeg tiles";
                     }
                 } else {
                     // user wants nothing then we choose one from the metadata
                     if (tileFormats.indexOf('png') >= 0) {
-                        self.options.imgFormat = "png";
+                        self.imgFormat = "png";
                         self.fits = false;
                     } else if (tileFormats.indexOf('jpeg') >= 0) {
-                        self.options.imgFormat = "jpeg";
+                        self.imgFormat = "jpeg";
                         self.fits = false;
                     } else if (tileFormats.indexOf('fits') >= 0) {
-                        self.options.imgFormat = "fits";
+                        self.imgFormat = "fits";
                         self.fits = true;
                     } else {
                         throw "Unsupported format(s) found in the metadata: " + tileFormats;
@@ -273,41 +282,27 @@ export let HpxImageSurvey = (function() {
 
                 // HiPS coverage sky fraction
                 const skyFraction = +metadata.moc_sky_fraction || 0.0;
-                
-                let removeAllChildNodes = function removeAllChildNodes(parent) {
-                    while (parent.firstChild) {
-                        parent.removeChild(parent.firstChild);
-                    }
-                };
                 // HiPS planet/planetoïde
-                let planetoide = false;
+                let cooFrame = undefined;
                 if (metadata.hips_body !== undefined) {
-                    planetoide = true;
-                    self.options.cooFrame = "ICRSd";
-                    self.options.longitudeReversed = true;
+                    cooFrame = "ICRSd";
+                    self.longitudeReversed = true;
                 }
 
                 // HiPS frame
-                self.options.cooFrame = self.options.cooFrame || metadata.hips_frame;
+                cooFrame = cooFrame || metadata.hips_frame;
                 let frame = null;
 
-                if (self.options.cooFrame == "ICRS" || self.options.cooFrame == "ICRSd" || self.options.cooFrame == "equatorial" || self.options.cooFrame == "j2000") {
+                if (cooFrame == "ICRS" || cooFrame == "ICRSd" || cooFrame == "equatorial" || cooFrame == "j2000") {
                     frame = "ICRSJ2000";
-                } else if (self.options.cooFrame == "galactic") {
+                } else if (cooFrame == "galactic") {
                     frame = "GAL";
-                } else if (self.options.cooFrame === undefined) {
-                    //self.options.cooFrame = "ICRS";
+                } else if (cooFrame === undefined) {
                     frame = "ICRSJ2000";
                     console.warn('No cooframe given. Coordinate systems supported: "ICRS", "ICRSd", "j2000" or "galactic". ICRS is chosen by default');
                 } else {
                     frame = "ICRSd";
-                    console.warn('Invalid cooframe given: ' + self.options.cooFrame + '. Coordinate systems supported: "ICRS", "ICRSd", "j2000" or "galactic". ICRS is chosen by default');
-                }
-
-                // HiPS grayscale
-                self.colored = false;
-                if (metadata.dataproduct_subtype && (metadata.dataproduct_subtype.includes("color") || metadata.dataproduct_subtype[0].includes("color") )) {
-                    self.colored = true;
+                    console.warn('Invalid cooframe given: ' + cooFrame + '. Coordinate systems supported: "ICRS", "ICRSd", "j2000" or "galactic". ICRS is chosen by default');
                 }
 
                 // HiPS initial fov/ra/dec
@@ -317,67 +312,61 @@ export let HpxImageSurvey = (function() {
 
                 if (initialFov < 0.00002777777) {
                     initialFov = 360;
-                    //this.pinchZoomParameters.initialAccDelta = Math.pow(si / new_fov, 1.0/alpha);
                 }
 
-                if (!self.colored) {
-                    // Grayscale hips, this is not mandatory that there are fits tiles associated with it unfortunately
-                    // For colored HiPS, no fits tiles provided
+                // Grayscale hips, this is not mandatory that there are fits tiles associated with it unfortunately
+                // For colored HiPS, no fits tiles provided
 
-                    // HiPS cutouts
-                    let cuts = (metadata.hips_pixel_cut && metadata.hips_pixel_cut.split(" ")) || undefined;
-                    let propertiesDefaultMinCut = undefined;
-                    let propertiesDefaultMaxCut = undefined;
-                    if ( cuts ) {
-                        propertiesDefaultMinCut = parseFloat(cuts[0]);
-                        propertiesDefaultMaxCut = parseFloat(cuts[1]);
-                    }
-
-                    // HiPS bitpix
-                    const bitpix = +metadata.hips_pixel_bitpix;
-
-                    self.properties = {
-                        url: url,
-                        maxOrder: order,
-                        frame: frame,
-                        tileSize: tileSize,
-                        formats: tileFormats,
-                        minCutout: propertiesDefaultMinCut,
-                        maxCutout: propertiesDefaultMaxCut,
-                        bitpix: bitpix,
-                        skyFraction: skyFraction,
-                        minOrder: hipsOrderMin,
-                        hipsInitialFov: initialFov,
-                        hipsInitialRa: initialRa,
-                        hipsInitialDec: initialDec,
-                    };
-                } else {
-                    self.properties = {
-                        url: url,
-                        maxOrder: order,
-                        frame: frame,
-                        tileSize: tileSize,
-                        formats: tileFormats,
-                        skyFraction: skyFraction,
-                        minOrder: hipsOrderMin,
-                        hipsInitialFov: initialFov,
-                        hipsInitialRa: initialRa,
-                        hipsInitialDec: initialDec,
-                    };
+                // HiPS cutouts
+                let cuts = (metadata.hips_pixel_cut && metadata.hips_pixel_cut.split(" ")) || undefined;
+                let propertiesDefaultMinCut = undefined;
+                let propertiesDefaultMaxCut = undefined;
+                if ( cuts ) {
+                    propertiesDefaultMinCut = parseFloat(cuts[0]);
+                    propertiesDefaultMaxCut = parseFloat(cuts[1]);
                 }
 
-                self.options.stretch = self.options.stretch || "linear";
+                // HiPS bitpix
+                let bitpix = undefined;
+                if (metadata.hips_pixel_bitpix) {
+                    bitpix = +metadata.hips_pixel_bitpix;
+                }
 
-                // For grayscale JPG/PNG hipses
+                self.colored = false;
+                if (metadata.dataproduct_subtype === 'color') {
+                    self.colored = true;
+                }
+            
+                self.properties = {
+                    url: url,
+                    maxOrder: order,
+                    frame: frame,
+                    tileSize: tileSize,
+                    formats: tileFormats,
+                    minCutout: propertiesDefaultMinCut,
+                    maxCutout: propertiesDefaultMaxCut,
+                    bitpix: bitpix,
+                    skyFraction: skyFraction,
+                    minOrder: hipsOrderMin,
+                    hipsInitialFov: initialFov,
+                    hipsInitialRa: initialRa,
+                    hipsInitialDec: initialDec,
+                    colored: self.colored,
+                };
+
+                // Set the cuts at this point, if the user gave one, keep it
+                // otherwise, set it to default values found in the HiPS properties
+                let minCut, maxCut;
                 if (!self.fits) {
                     // Erase the cuts with the default one for image tiles
-                    self.options.minCut = self.options.minCut || 0.0;
-                    self.options.maxCut = self.options.maxCut || 1.0;
-                // For FITS hipses
+                    minCut = self.colorCfg.minCut || 0.0;
+                    maxCut = self.colorCfg.maxCut || 1.0;
                 } else {
-                    self.options.minCut = self.options.minCut || self.properties.minCutout;
-                    self.options.maxCut = self.options.maxCut || self.properties.maxCutout;
+                    // For FITS hipses
+                    minCut = self.colorCfg.minCut || self.properties.minCutout;
+                    maxCut = self.colorCfg.maxCut || self.properties.maxCutout;
                 }
+                self.setCuts(minCut, maxCut);
 
                 // Discard further processing if the layer has been associated to another hips
                 // before the request has been resolved
@@ -402,13 +391,11 @@ export let HpxImageSurvey = (function() {
                     }
                 }
 
-                self.updateMeta();
-                self.updateColor();
                 self.ready = true;
 
                 ////// Update SURVEYS
                 let idxSelectedHiPS = 0;
-                const surveyFound = HpxImageSurvey.SURVEYS.some(s => {
+                const surveyFound = ImageSurvey.SURVEYS.some(s => {
                     let res = self.id.endsWith(s.id);
                     if (!res) {
                         idxSelectedHiPS += 1;
@@ -420,13 +407,16 @@ export let HpxImageSurvey = (function() {
                 if (!surveyFound) {
                     throw 'Should have been found!'
                 } else {
-                    // Update the HpxImageSurvey
-                    let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-                    surveyDef.options = self.options;
+                    // Update the ImageSurvey
+                    let surveyDef = ImageSurvey.SURVEYS[idxSelectedHiPS];
+                    surveyDef.options = {
+                        ...self.colorCfg.get(),
+                        imgFormat: self.imgFormat,
+                        longitudeReversed: self.longitudeReversed,
+                    };
                     surveyDef.maxOrder = self.properties.maxOrder;
                     surveyDef.url = self.properties.url;
                 }
-                /////
 
                 // If the layer has been set then it is linked to the aladin lite view
                 // so we add it
@@ -446,7 +436,7 @@ export let HpxImageSurvey = (function() {
         })();
     };
 
-    HpxImageSurvey.prototype.searchForValidSurveyUrl = async function(metadata) {
+    ImageSurvey.prototype.searchForValidSurveyUrl = async function(metadata) {
         let self = this;
         const pingHipsServiceUrl = (hipsServiceUrl) => {
             const controller = new AbortController()
@@ -462,12 +452,6 @@ export let HpxImageSurvey = (function() {
                 // Resolve with the time duration of the request
                 return { duration: duration, baseUrl: hipsServiceUrl, validRequest: true };
             }).catch((e) => {
-                // The request aborted because it was to slow
-                let errorMsg = e;
-                if (timeoutId >= maxTime) {
-                    errorMsg = hipsServiceUrl + " responding very slowly.";
-                }
-
                 return { duration: maxTime, baseUrl: hipsServiceUrl, validRequest: false };
             });
 
@@ -545,365 +529,170 @@ export let HpxImageSurvey = (function() {
         }
     }
 
-    HpxImageSurvey.prototype.updateMeta = function() {
-        let blend = {
-            srcColorFactor: 'SrcAlpha',
-            dstColorFactor: 'OneMinusSrcAlpha',
-            func: 'FuncAdd' 
-        };
+    // @api
+    // TODO: include imgFormat inside the ImageSurvey's meta attribute
+    ImageSurvey.prototype.setImageFormat = function(format) {
+        let self = this;
 
-        const additiveBlending = this.options.additive;
-        if (additiveBlending) {
-            blend = {
-                srcColorFactor: 'SrcAlpha',
-                dstColorFactor: 'One',
-                func: 'FuncAdd' 
+        updateMetadata(self, () => {
+            let imgFormat = format.toLowerCase();
+
+            if (imgFormat !== "fits" && imgFormat !== "png" && imgFormat !== "jpg" && imgFormat !== "jpeg") {
+                throw 'Formats must lie in ["fits", "png", "jpg"]';
             }
-        }
 
-        // reset the whole meta object
-        this.meta = this.meta || {};
-        this.meta.blendCfg = blend;
-        this.meta.opacity = this.options.opacity;
-        this.meta.longitudeReversed = this.options.longitudeReversed;
+            if (imgFormat === "jpg") {
+                imgFormat = "jpeg";
+            }
+
+            // Passed the check, we erase the image format with the new one
+            // We do nothing if the imgFormat is the same
+            if (self.imgFormat === imgFormat) {
+                return;
+            }
+    
+            // Check the properties to see if the given format is available among the list
+            // If the properties have not been retrieved yet, it will be tested afterwards
+            if (self.properties) {
+                const availableFormats = self.properties.formats;
+                const idSurvey = self.properties.id;
+                // user wants a fits but the metadata tells this format is not available
+                if (imgFormat === "fits" && availableFormats.indexOf('fits') < 0) {
+                    throw idSurvey + " does not provide fits tiles";
+                }
+                
+                if (imgFormat === "png" && availableFormats.indexOf('png') < 0) {
+                    throw idSurvey + " does not provide png tiles";
+                }
+                
+                if (imgFormat === "jpeg" && availableFormats.indexOf('jpeg') < 0) {
+                    throw idSurvey + " does not provide jpeg tiles";
+                }
+            }
+    
+            // Check if it is a fits
+            self.imgFormat = imgFormat;
+            self.fits = (self.imgFormat === 'fits');
+        });
+    };
+
+    // @api
+    ImageSurvey.prototype.setOpacity = function(opacity) {
+        let self = this;
+        updateMetadata(self, () => {
+            self.colorCfg.setOpacity(opacity);
+        });
+    };
+
+    // @api
+    ImageSurvey.prototype.setBlendingConfig = function(additive = false) {
+        updateMetadata(this, () => {
+            this.colorCfg.setBlendingConfig(additive);
+        });
+    };
+
+    // @api
+    ImageSurvey.prototype.setColormap = function(colormap, options) {
+        updateMetadata(this, () => {
+            this.colorCfg.setColormap(colormap, options);
+        });
     }
 
-    HpxImageSurvey.prototype.updateColor = function() {
-        let minCut = this.options.minCut;
-        let maxCut = this.options.maxCut;
-
-        // Make the stretch case insensitive
-        let stretch = this.options.stretch;
-        if (stretch) {
-            stretch = stretch.toLowerCase();
-        }
-
-        let color = this.options.color;
-        let colormap = this.options.colormap;
-
-        if (color) {
-            this.meta.color = {
-                grayscale: {
-                    stretch: stretch,
-                    minCut: minCut,
-                    maxCut: maxCut,
-                    color: {
-                        color: color,
-                    }
-                }
-            };
-
-            this.options.minCut = minCut;
-            this.options.maxCut = maxCut;
-            this.options.stretch = stretch;
-            this.options.color = color;
-        } else if(colormap || !this.colored) {
-            // If not defined we set the colormap to grayscale
-            if (!colormap) {
-                colormap = "grayscale";
-            }
-
-            if (colormap === "native") {
-                if(this.colored) {
-                    // Go back to native pixels
-                    this.meta.color = "color";
-                    return;
-                }
-
-                colormap = "grayscale";
-            }
-
-            // Make it case insensitive
-            colormap = colormap.toLowerCase();
-
-            if (!HpxImageSurvey.COLORMAPS.includes(colormap)) {
-                console.warn("The colormap \'" + colormap + "\' does not exist. You should use one of the following: " + HpxImageSurvey.COLORMAPS + "\n\'grayscale\' has been chosen by default.")
-
-                colormap = "grayscale";
-            }
-
-            let reversed = this.options.reversed;
-            if (reversed === undefined) {
-                reversed = false;
-            }
-
-            this.meta.color = {
-                grayscale: {
-                    stretch: stretch,
-                    minCut: minCut,
-                    maxCut: maxCut,
-                    color: {
-                        colormap: {
-                            reversed: reversed,
-                            name: colormap,
-                        }
-                    }
-                }
-            };
-
-            this.options.minCut = minCut;
-            this.options.maxCut = maxCut;
-            this.options.stretch = stretch;
-            this.options.reversed = reversed;
-            this.options.colormap = colormap;
-        } else if(this.colored) {
-            // neither colormap or color defined by the user
-            // so we keep the original pixels
-            this.meta.color = "color";
-        }
+    // @api
+    ImageSurvey.prototype.setCuts = function(lowCut, highCut) {
+        updateMetadata(this, () => {
+            this.colorCfg.setCuts(lowCut, highCut);
+        });
     };
 
     // @api
-    HpxImageSurvey.prototype.setOpacity = function(opacity) {
-        const oldOptions = this.options;
+    ImageSurvey.prototype.setGamma = function(gamma) {
+        updateMetadata(this, () => {
+            this.colorCfg.setGamma(gamma);
+        });
+    };
 
-        this.prevOpacity = this.options.opacity;
+    // @api
+    ImageSurvey.prototype.setSaturation = function(saturation) {
+        updateMetadata(this, () => {
+            this.colorCfg.setSaturation(saturation);
+        });
+    };
 
-        opacity = +opacity; // coerce to number
-        this.options.opacity = Math.max(0, Math.min(opacity, 1));
+    ImageSurvey.prototype.setBrightness = function(brightness) {
+        updateMetadata(this, () => {
+            this.colorCfg.setBrightness(brightness);
+        });
+    };
 
-        this.updateMeta();
+    ImageSurvey.prototype.setContrast = function(contrast) {
+        updateMetadata(this, () => {
+            this.colorCfg.setContrast(contrast);
+        });
+    };
+
+    ImageSurvey.prototype.metadata = function() {
+        return {
+            ...this.colorCfg.get(),
+            longitudeReversed: this.longitudeReversed,
+            imgFormat: this.imgFormat
+        };
+    }
+
+    // Private method for updating the backend with the new meta
+    var updateMetadata = function(self, callback = undefined) {        
+        if (callback) {
+            callback();
+        }
 
         // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateMeta();
+        try {
+            if( self.ready && self.added ) {
+                const metadata = self.metadata();
+                self.backend.aladin.webglAPI.setImageSurveyMeta(self.layer, metadata);
+                // once the meta have been well parsed, we can set the meta 
+                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(self.backend.aladinDiv, {survey: self});
             }
+        } catch(e) {
+            // Display the error message
+            console.error(e);
         }
-    };
+    }
 
     // @api
-    HpxImageSurvey.prototype.toggle = function() {
-        if (this.options.opacity != 0.0) {
-            this.setOpacity(0.0);
+    ImageSurvey.prototype.toggle = function() {
+        if (this.colorCfg.getOpacity() != 0.0) {
+            this.colorCfg.setOpacity(0.0);
         } else {
-            this.setOpacity(this.prevOpacity);
+            this.colorCfg.setOpacity(this.prevOpacity);
         }
     };
 
     // @oldapi
-    HpxImageSurvey.prototype.setAlpha = HpxImageSurvey.prototype.setOpacity;
+    ImageSurvey.prototype.setAlpha = ImageSurvey.prototype.setOpacity;
 
     // @api
-    HpxImageSurvey.prototype.getOpacity = function() {
-        return this.options.opacity;
-    };
-
-    // @api
-    HpxImageSurvey.prototype.setBlendingConfig = function(additive = false) {
-        const oldOptions = this.options;
-
-        this.options.additive = additive;
-
-        this.updateMeta();
-
-        // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateMeta();
-            }
-        }
-    };
-
-    // @api
-    HpxImageSurvey.prototype.setColor = function(color, options) {
-        const oldOptions = this.options;
-
-        this.options = {...this.options, ...options};
-        // Erase the colormap given first
-        if (this.options.colormap) {
-            delete this.options.colormap;
-        }
-        this.options.color = color;
-
-        this.updateColor();
-
-        // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateColor();
-            }
-        }
-    };
-
-    // @api
-    HpxImageSurvey.prototype.setColormap = function(colormap, options) {
-        const oldOptions = this.options;
-
-        this.options = {...this.options, ...options};
-        // Erase the color given first
-        if (this.options.color) {
-            delete this.options.color;
-        }
-        this.options.colormap = colormap;
-
-        this.updateColor();
-
-        // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateColor();
-            }
-        }
-    }
-
-    // @api
-    HpxImageSurvey.prototype.setCuts = function(cuts) {
-        const oldOptions = this.options;
-
-        this.options.minCut = cuts[0];
-        this.options.maxCut = cuts[1];
-
-        this.updateColor();
-
-        // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateColor();
-            }
-        }
-    };
-
-    HpxImageSurvey.prototype.setOptions = function(options) {
-        const oldOptions = this.options;
-
-        this.options = {...this.options, ...options};
-        this.updateMeta();
-        this.updateColor();
-
-        // Tell the view its meta have changed
-        if( this.ready && this.added ) {
-            try {
-                this.backend.aladin.webglAPI.setImageSurveyMeta(this.layer, this.meta);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                // Display the error message
-                console.error(e);
-
-                // Restore the past survey config
-                this.options = oldOptions;
-                this.updateMeta();
-                this.updateColor();
-            }
-        }
-    };
-
-    // @api
-    HpxImageSurvey.prototype.changeImageFormat = function(format) {
-        const prevImageFmt = this.options.imgFormat;
-        let imgFormat = format.toLowerCase();
-        if (imgFormat !== "fits" && imgFormat !== "png" && imgFormat !== "jpg" && imgFormat !== "jpeg") {
-            throw 'Formats must lie in ["fits", "png", "jpg"]';
-        }
-
-        if (imgFormat === "jpg") {
-            imgFormat = "jpeg";
-        }
-
-        // Check the properties to see if the given format is available among the list
-        // If the properties have not been retrieved yet, it will be tested afterwards
-        if (this.properties) {
-            const availableFormats = this.properties.formats;
-            const idSurvey = this.properties.id;
-            // user wants a fits but the metadata tells this format is not available
-            if (imgFormat === "fits" && availableFormats.indexOf('fits') < 0) {
-                throw idSurvey + " does not provide fits tiles";
-            }
-            
-            if (imgFormat === "png" && availableFormats.indexOf('png') < 0) {
-                throw idSurvey + " does not provide png tiles";
-            }
-            
-            if (imgFormat === "jpeg" && availableFormats.indexOf('jpeg') < 0) {
-                throw idSurvey + " does not provide jpeg tiles";
-            }
-        }
-
-        // Passed the check, we erase the image format with the new one
-        // We do nothing if the imgFormat is the same
-        if (this.options.imgFormat === imgFormat) {
-            return;
-        }
-
-        this.options.imgFormat = imgFormat;
-        // Check if it is a fits
-        this.fits = (this.options.imgFormat === 'fits');
-
-        // Tell the view its meta have changed
-        if ( this.ready && this.added ) {
-            try {
-
-                this.backend.aladin.webglAPI.setImageSurveyImageFormat(this.layer, imgFormat);
-                ALEvent.HIPS_LAYER_CHANGED.dispatchedTo(this.backend.aladinDiv, {survey: this});
-            } catch(e) {
-                console.error(e);
-    
-                this.options.imgFormat = prevImageFmt;
-                this.fits = (this.options.imgFormat === 'fits');
-            }
-        }
-    };
-
-    // @api
-    HpxImageSurvey.prototype.getMeta = function() {
-        return this.meta;
+    ImageSurvey.prototype.getColorCfg = function() {
+        return this.colorCfg;
     };
     
     // @api
-    HpxImageSurvey.prototype.getAlpha = function() {
-        return this.meta.opacity;
+    ImageSurvey.prototype.getOpacity = function() {
+        return this.colorCfg.getOpacity();
     };
 
+    ImageSurvey.prototype.getAlpha = ImageSurvey.prototype.getOpacity;
+
     // @api
-    HpxImageSurvey.prototype.readPixel = function(x, y) {
+    ImageSurvey.prototype.readPixel = function(x, y) {
         return this.backend.aladin.webglAPI.readPixel(x, y, this.layer);
     };
 
     /* Some constants */
-    HpxImageSurvey.DEFAULT_SURVEY_ID = "P/DSS2/color";
+    ImageSurvey.DEFAULT_SURVEY_ID = "P/DSS2/color";
 
-    HpxImageSurvey.SURVEYS_OBJECTS = {};
-    HpxImageSurvey.SURVEYS = [
+    ImageSurvey.SURVEYS_OBJECTS = {};
+    ImageSurvey.SURVEYS = [
         {
             id: "P/2MASS/color",
             name: "2MASS colored",
@@ -925,25 +714,11 @@ export let HpxImageSurvey = (function() {
             options: {
                 minCut: 1000.0,
                 maxCut: 10000.0,
-                imgFormat: "fits",
                 colormap: "magma",
-                stretch: 'Linear'
+                stretch: 'Linear',
+                imgFormat: "fits"
             }
         },
-        /*{
-            id: "P/MeerKAT/Galactic-Centre-1284MHz-StokesI",
-            name: "MeerKAT Galactic Centre 1284MHz StokesI",
-            url: "https://alasky.cds.unistra.fr/MeerKAT/CDS_P_MeerKAT_Galactic-Centre-1284MHz-StokesI",
-            maxOrder: 9,
-            // options
-            options: {
-                minCut: -4e-4,
-                maxCut: 0.01,
-                imgFormat: "fits",
-                colormap: "rainbow",
-                stretch: 'Linear'
-            }
-        },*/
         {
             id: "P/DM/I/350/gaiaedr3",
             name: "Density map for Gaia EDR3 (I/350/gaiaedr3)",
@@ -954,7 +729,7 @@ export let HpxImageSurvey = (function() {
                 minCut: 0,
                 maxCut: 12000,
                 stretch: 'asinh',
-                colormap: "rdyibu",
+                colormap: "rdylbu",
                 imgFormat: "fits",
             }
         },
@@ -1035,13 +810,13 @@ export let HpxImageSurvey = (function() {
             options: {
                 stretch: 'asinh',
                 colormap: "redtemperature",
-                imgFormat: "fits",
+                imgFormat: 'fits'
             }
         },
         {
             id: "P/SPITZER/color",
             name: "IRAC color I1,I2,I4 - (GLIMPSE, SAGE, SAGE-SMC, SINGS)",
-            url: "https://alasky.cds.unistra.fr/SpitzerI1I2I4color",
+            url: "http://alasky.cds.unistra.fr/Spitzer/SpitzerI1I2I4color/",
             maxOrder: 9,
         },
         {
@@ -1085,10 +860,10 @@ export let HpxImageSurvey = (function() {
         },*/
     ];
 
-    HpxImageSurvey.getAvailableSurveys = function() {
-        return HpxImageSurvey.SURVEYS;
+    ImageSurvey.getAvailableSurveys = function() {
+        return ImageSurvey.SURVEYS;
     };
 
-    return HpxImageSurvey;
+    return ImageSurvey;
 })();
 
diff --git a/src/js/ShadersWebGL1.js b/src/js/ShadersWebGL1.js
index 3afa527d..b41e6f1a 100644
--- a/src/js/ShadersWebGL1.js
+++ b/src/js/ShadersWebGL1.js
@@ -21,12 +21,10 @@ import GridFS_CPU from '../glsl/webgl1/grid/grid_cpu.frag'
 // Raytracer
 import RayTracerVS from '../glsl/webgl1/hips/raytracer/raytracer.vert'
 import RayTracerColorFS from '../glsl/webgl1/hips/raytracer/color.frag'
-import RayTracerGrayscale2ColorFS from '../glsl/webgl1/hips/raytracer/grayscale_to_color.frag'
 import RayTracerGrayscale2ColormapFS from '../glsl/webgl1/hips/raytracer/grayscale_to_colormap.frag'
 // Rasterizer
 import RasterizerVS from '../glsl/webgl1/hips/rasterizer/raster.vert'
 import RasterizerColorFS from '../glsl/webgl1/hips/rasterizer/color.frag'
-import RasterizerGrayscale2ColorFS from '../glsl/webgl1/hips/rasterizer/grayscale_to_color.frag'
 import RasterizerGrayscale2ColormapFS from '../glsl/webgl1/hips/rasterizer/grayscale_to_colormap.frag'
 
 // Post
@@ -95,10 +93,6 @@ let shaders = [
         id: "RayTracerColorFS",
         content: RayTracerColorFS,
     },
-    {
-        id: "RayTracerGrayscale2ColorFS",
-        content: RayTracerGrayscale2ColorFS,
-    },
     {
         id: "RayTracerGrayscale2ColormapFS",
         content: RayTracerGrayscale2ColormapFS,
@@ -112,10 +106,6 @@ let shaders = [
         id: "RasterizerColorFS",
         content: RasterizerColorFS,
     },
-    {
-        id: "RasterizerGrayscale2ColorFS",
-        content: RasterizerGrayscale2ColorFS,
-    },
     {
         id: "RasterizerGrayscale2ColormapFS",
         content: RasterizerGrayscale2ColormapFS,
diff --git a/src/js/ShadersWebGL2.js b/src/js/ShadersWebGL2.js
index e621115a..209a3881 100644
--- a/src/js/ShadersWebGL2.js
+++ b/src/js/ShadersWebGL2.js
@@ -22,11 +22,8 @@ import GridFS_CPU from '../glsl/webgl2/grid/grid_cpu.frag'
 // Raytracer
 import RayTracerVS from '../glsl/webgl2/hips/raytracer/raytracer.vert'
 import RayTracerColorFS from '../glsl/webgl2/hips/raytracer/color.frag'
-import RayTracerGrayscale2ColorFS from '../glsl/webgl2/hips/raytracer/grayscale_to_color.frag'
 import RayTracerGrayscale2ColormapFS from '../glsl/webgl2/hips/raytracer/grayscale_to_colormap.frag'
-import RayTracerGrayscale2ColorIntegerFS from '../glsl/webgl2/hips/raytracer/grayscale_to_color_i.frag'
 import RayTracerGrayscale2ColormapIntegerFS from '../glsl/webgl2/hips/raytracer/grayscale_to_colormap_i.frag'
-import RayTracerGrayscale2ColorUnsignedFS from '../glsl/webgl2/hips/raytracer/grayscale_to_color_u.frag'
 import RayTracerGrayscale2ColormapUnsignedFS from '../glsl/webgl2/hips/raytracer/grayscale_to_colormap_u.frag'
 import RayTracerFontVS from '../glsl/webgl2/hips/raytracer/backcolor.vert'
 import RayTracerFontFS from '../glsl/webgl2/hips/raytracer/backcolor.frag'
@@ -34,11 +31,8 @@ import RayTracerFontFS from '../glsl/webgl2/hips/raytracer/backcolor.frag'
 // Rasterizer
 import RasterizerVS from '../glsl/webgl2/hips/rasterizer/raster.vert'
 import RasterizerColorFS from '../glsl/webgl2/hips/rasterizer/color.frag'
-import RasterizerGrayscale2ColorFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_color.frag'
 import RasterizerGrayscale2ColormapFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_colormap.frag'
-import RasterizerGrayscale2ColorIntegerFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_color_i.frag'
 import RasterizerGrayscale2ColormapIntegerFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_colormap_i.frag'
-import RasterizerGrayscale2ColorUnsignedFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_color_u.frag'
 import RasterizerGrayscale2ColormapUnsignedFS from '../glsl/webgl2/hips/rasterizer/grayscale_to_colormap_u.frag'
 
 // Shader passes
@@ -115,26 +109,14 @@ let shaders = [
         id: "RayTracerColorFS",
         content: RayTracerColorFS,
     },
-    {
-        id: "RayTracerGrayscale2ColorFS",
-        content: RayTracerGrayscale2ColorFS,
-    },
     {
         id: "RayTracerGrayscale2ColormapFS",
         content: RayTracerGrayscale2ColormapFS,
     },
-    {
-        id: "RayTracerGrayscale2ColorIntegerFS",
-        content: RayTracerGrayscale2ColorIntegerFS,
-    },
     {
         id: "RayTracerGrayscale2ColormapIntegerFS",
         content: RayTracerGrayscale2ColormapIntegerFS,
     },
-    {
-        id: "RayTracerGrayscale2ColorUnsignedFS",
-        content: RayTracerGrayscale2ColorUnsignedFS,
-    },
     {
         id: "RayTracerGrayscale2ColormapUnsignedFS",
         content: RayTracerGrayscale2ColormapUnsignedFS,
@@ -156,26 +138,14 @@ let shaders = [
         id: "RasterizerColorFS",
         content: RasterizerColorFS,
     },
-    {
-        id: "RasterizerGrayscale2ColorFS",
-        content: RasterizerGrayscale2ColorFS,
-    },
     {
         id: "RasterizerGrayscale2ColormapFS",
         content: RasterizerGrayscale2ColormapFS,
     },
-    {
-        id: "RasterizerGrayscale2ColorIntegerFS",
-        content: RasterizerGrayscale2ColorIntegerFS,
-    },
     {
         id: "RasterizerGrayscale2ColormapIntegerFS",
         content: RasterizerGrayscale2ColormapIntegerFS,
     },
-    {
-        id: "RasterizerGrayscale2ColorUnsignedFS",
-        content: RasterizerGrayscale2ColorUnsignedFS,
-    },
     {
         id: "RasterizerGrayscale2ColormapUnsignedFS",
         content: RasterizerGrayscale2ColormapUnsignedFS,
diff --git a/src/js/View.js b/src/js/View.js
index 86ed98aa..e9f234fc 100644
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -45,7 +45,7 @@ import { requestAnimFrame } from "./libs/RequestAnimationFrame.js";
 import { WebGLCtx } from "./WebGL.js";
 import { Logger } from "./Logger.js";
 import { ALEvent } from "./events/ALEvent.js";
-import { ImageColorCfg } from "./ImageColorCfg.js";
+import { ColorCfg } from "./ImageColorCfg.js";
 
 import $ from 'jquery';
 
@@ -68,7 +68,7 @@ export let View = (function () {
             this.aladin.webglAPI = webglCtx.webclient;
 
             // Retrieve all the possible colormaps
-            ImageColorCfg.COLORMAPS = this.aladin.webglAPI.getAvailableColormapList();
+            ColorCfg.COLORMAPS = this.aladin.webglAPI.getAvailableColormapList();
         } catch (e) {
             // For browsers not supporting WebGL2:
             // 1. Print the original exception message in the console
@@ -153,8 +153,6 @@ export let View = (function () {
         this.mocs = [];
         // reference to all overlay layers (= catalogs + overlays + mocs)
         this.allOverlayLayers = []
-        //console.log("alv3 starting...")
-
 
         //this.fixLayoutDimensions();
 
@@ -428,11 +426,11 @@ export let View = (function () {
                     //if (!survey.colored) {
                         if (survey.fits) {
                             // properties default cuts always refers to fits tiles
-                            cutMinInit = survey.properties.minCutout || survey.options.minCut;
-                            cutMaxInit = survey.properties.maxCutout || survey.options.maxCut;
+                            cutMinInit = survey.properties.minCutout || survey.getColorCfg().minCut;
+                            cutMaxInit = survey.properties.maxCutout || survey.getColorCfg().maxCut;
                         } else {
-                            cutMinInit = survey.options.minCut;
-                            cutMaxInit = survey.options.maxCut;
+                            cutMinInit = survey.getColorCfg().minCut;
+                            cutMaxInit = survey.getColorCfg().maxCut;
                         }
                     //} else {
                         // todo: contrast
@@ -650,7 +648,7 @@ export let View = (function () {
                     const rr = offset + (1.0 + 2.0 * cy) * cutMaxInit;
 
                     if (lr <= rr) {
-                        selectedSurvey.setCuts([lr, rr])
+                        selectedSurvey.setCuts(lr, rr)
                     }
 
                     return;
@@ -861,16 +859,20 @@ export let View = (function () {
         view.executeCallbacksThrottled = Utils.throttle(
             function () {
                 var pos = view.aladin.pix2world(view.width / 2, view.height / 2);
+
                 var fov = view.fov;
+
                 if (pos === undefined || fov === undefined) {
                     return;
                 }
 
                 var ra = pos[0];
                 var dec = pos[1];
+
                 // trigger callback only if position has changed !
                 if (ra !== this.ra || dec !== this.dec) {
                     var posChangedFn = view.aladin.callbacksByEventName['positionChanged'];
+
                     (typeof posChangedFn === 'function') && posChangedFn({ ra: ra, dec: dec, dragging: true });
 
                     // finally, save ra and dec value
@@ -1391,7 +1393,7 @@ export let View = (function () {
      */
     View.prototype.computeNorder = function () {
         /*var resolution = this.fov / this.largestDim; // in degree/pixel
-        var tileSize = 512; // TODO : read info from HpxImageSurvey.tileSize
+        var tileSize = 512; // TODO : read info from ImageSurvey.tileSize
         const calculateNSide = (pixsize) => {
             const NS_MAX = 536870912;
             const ORDER_MAX = 29;
@@ -1538,9 +1540,7 @@ export let View = (function () {
                 return {
                     layer: s.layer,
                     properties: s.properties,
-                    meta: s.meta,
-                    // rust accepts it in upper case whereas the js API handles 'jpeg', 'png' or 'fits' in lower case
-                    imgFormat: s.options.imgFormat,
+                    meta: s.metadata(),
                 };
             });
         this.aladin.empty = false;
diff --git a/src/js/WebGL.js b/src/js/WebGL.js
index f508b73e..e071211c 100644
--- a/src/js/WebGL.js
+++ b/src/js/WebGL.js
@@ -2,7 +2,6 @@
 import { loadShadersWebGL2 } from "./ShadersWebGL2";
 // Import resources images
 import kernel from '../img/kernel.png';
-import colormaps from '../img/colormaps/colormaps.png';
 import letters from '../img/letters.png';
 import lettersMetadata from '../img/letters.json';
 
@@ -17,7 +16,6 @@ export let WebGLCtx = (function() {
             shaders,
             {
                 'kernel': kernel,
-                'colormaps': colormaps,
                 'letters': letters,
                 'letters_metadata': lettersMeta,
             }
diff --git a/src/js/gui/HiPSLayer.js b/src/js/gui/HiPSLayer.js
index ed989a8b..8eb704a9 100644
--- a/src/js/gui/HiPSLayer.js
+++ b/src/js/gui/HiPSLayer.js
@@ -28,13 +28,12 @@
  * 
  *****************************************************************************/
 
-import { HpxImageSurvey } from "../HpxImageSurvey.js";
+import { ImageSurvey } from "../ImageSurvey.js";
 import { ALEvent } from "../events/ALEvent.js";
 import { HiPSSelector } from "./HiPSSelector.js";
-import { Color } from "./../Color.js";
-import { Utils } from './../Utils.js';
 
 import $ from 'jquery';
+import { ColorCfg } from "../ImageColorCfg.js";
 
 export class HiPSLayer {
 
@@ -58,7 +57,15 @@ export class HiPSLayer {
         );
 
         if (this.survey.layer === "base") {
-            this.headerDiv[0].getElementsByClassName("aladin-delete-layer")[0].style.visibility = "hidden";
+            let deleteLayerBtn = this.headerDiv[0].getElementsByClassName("aladin-delete-layer")[0];
+            deleteLayerBtn.disabled = true;
+            deleteLayerBtn.style.backgroundColor = 'lightgray';
+            deleteLayerBtn.style.borderColor = 'gray';
+
+            // This is how to color emojis:
+            // see: https://stackoverflow.com/questions/32413731/color-for-unicode-emoji
+            deleteLayerBtn.style.color = 'transparent';
+            deleteLayerBtn.style.textShadow = '0 0 0 gray';
         }
 
         // HiPS main options div
@@ -66,29 +73,27 @@ export class HiPSLayer {
         for (const cm of this.aladin.webglAPI.getAvailableColormapList()) {
             cmListStr += '<option>' + cm + '</option>';
         }
-        // Add the native which is special:
-        // - for FITS hipses, it is changed to grayscale
-        // - for JPG/PNG hipses, we do not use any colormap in the backend
-        this.nameRadioColorChoice = encodeURIComponent(Utils.uuidv4());
-        cmListStr += '<option selected>native</option>';
 
         this.cmap = "native";
         this.color = "#ff0000";
 
         this.mainDiv = $('<div class="aladin-frame" style="display:none">' +
             '<div class="aladin-options">' +
-            '  <div class="row">' +
-            '    <div style="width: 50%"><label>Color map<input type="radio" class="colormap-color-selector" name="' + this.nameRadioColorChoice + '" value="colormap" id="colormap-radio" checked></label></div>' +
-            '    <div style="width: 50%"><label>Color<input class="color-color-selector" type="radio" name="'+ this.nameRadioColorChoice + '" value="color"></label></div>' +
-            '  </div>' +
-            '  <div class="row"><div class="col-label"></div><div class="col-input"><select class="colormap-selector">' + cmListStr + '</select></div></div>' +
-            '  <div class="row"><div class="col-label"></div><div class="col-input"><input type="color" name="color-radio" value="' + this.color + '" class="color-selector"></div></div>' +
+            // colormap
+            '  <div class="row"><div class="col-label">Colormap</div><div class="col-input"><select class="colormap-selector">' + cmListStr + '</select></div></div>' +
             '  <label><div class="row"><div class="col-label">Reverse</div><div class="col-input"><input type="checkbox" class="reversed"></div></div></label>' +
             '  <div class="row"><div class="col-label"><label>Stretch</label></div><div class="col-input"><select class="stretch"><option>pow2</option><option selected>linear</option><option>sqrt</option><option>asinh</option><option>log</option></select></div></div>' +
             '  <div class="row"><div class="col-label"><label>Format</label></div><div class="col-input"><select class="format"></select></div></div>' +
             '  <div class="row"><div class="col-label"><label>Min cut</label></div><div class="col-input"><input type="number" class="min-cut"></div></div>' +
             '  <div class="row"><div class="col-label"><label>Max cut</label></div><div class="col-input"><input type="number" class="max-cut"></div></div>' +
+            // tonal corrections
+            '  <div class="row"><div class="col-label"><label>Gamma</label></div><div class="col-input"><input class="gamma" type="number" value="1.0" min="0.1" max="10.0" step="0.01"></div></div>' +
+            '  <div class="row"><div class="col-label"><label>Color Sat.</label></div><div class="col-input"><input class="saturation" type="number" value="0.0" min="-1.0" max="1.0" step="0.01"></div></div>' +
+            '  <div class="row"><div class="col-label"><label>Contrast</label></div><div class="col-input"><input class="contrast" type="number" value="0.0" min="-1.0" max="1.0" step="0.01"></div></div>' +
+            '  <div class="row"><div class="col-label"><label>Brightness</label></div><div class="col-input"><input class="brightness" type="number" value="0.0" min="-1.0" max="1.0" step="0.01"></div></div>' +
+            // blending mode
             '  <div class="row"><div class="col-label"><label>Blending mode</label></div><div class="col-input"><select class="blending"><option>additive</option><option selected>default</option></select></div></div>' +
+            // opacity
             '  <div class="row"><div class="col-label"><label>Opacity</label></div><div class="col-input"><input class="opacity" type="range" min="0" max="1" step="0.01"></div></div>' +
             '</div> ' +
             '</div>');
@@ -100,7 +105,6 @@ export class HiPSLayer {
         this.layerChangedListener = function(e) {
             const survey = e.detail.survey;
 
-
             if (survey.layer === self.survey.layer) {
                 // Update the survey to the new one
                 self.survey = survey;
@@ -153,7 +157,7 @@ export class HiPSLayer {
         const surveySelector = this.headerDiv.find('.aladin-surveySelection');
         surveySelector.unbind("change");
         surveySelector.change(function () {
-            let cfg = HpxImageSurvey.SURVEYS[$(this)[0].selectedIndex];
+            let cfg = ImageSurvey.SURVEYS[$(this)[0].selectedIndex];
             if (self.hidden) {
                 cfg.options.opacity = 0.0;
             }
@@ -217,21 +221,16 @@ export class HiPSLayer {
             opacitySlider.get(0).disabled = self.hidden;
 
             self.survey.setOpacity(newOpacity);
-
-            // Update HpxImageSurvey.SURVEYS definition
-            /*const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
-            let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-            let options = surveyDef.options || {};
-            options.opacity = newOpacity;
-            surveyDef.options = options;*/
         });
 
         // MAIN DIV listeners
         // blending method
         if (self.survey.layer === "base") {
-            this.mainDiv.find('.row').eq(8)[0].style.display = "none";
+            const blendingRow = this.mainDiv.find('.row').eq(10)[0];
+            blendingRow.style.display = "none";
         } else {
             const blendingSelector = this.mainDiv.find('.blending').eq(0);
+
             blendingSelector.unbind("change");
             blendingSelector.change(function () {
                 let mode = blendingSelector.val()
@@ -247,7 +246,7 @@ export class HiPSLayer {
         format4ImgLayer.change(function () {
             const imgFormat = format4ImgLayer.val();
 
-            self.survey.changeImageFormat(imgFormat);
+            self.survey.setImageFormat(imgFormat);
 
             let minCut = 0;
             let maxCut = 1;
@@ -256,103 +255,40 @@ export class HiPSLayer {
                 minCut = self.survey.properties.minCutout;
                 maxCut = self.survey.properties.maxCutout;
             }
-            self.survey.setCuts([minCut, maxCut]);
+            self.survey.setCuts(minCut, maxCut);
 
             // update the cuts only
             minCut4ImgLayer.val(parseFloat(minCut.toFixed(5)));
             maxCut4ImgLayer.val(parseFloat(maxCut.toFixed(5)));
-
-            // update HpxImageSurvey.SURVEYS definition
-            /*const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
-            let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-            let options = surveyDef.options || {};
-            options.minCut = minCut;
-            options.maxCut = maxCut;
-            options.imgFormat = imgFormat;
-            surveyDef.options = options;*/
         });
         // min/max cut
-        minCut4ImgLayer.unbind("input blur");
-        maxCut4ImgLayer.unbind("input blur");
-        minCut4ImgLayer.add(maxCut4ImgLayer).on('input blur', function (e) {
+        minCut4ImgLayer.unbind("change blur");
+        maxCut4ImgLayer.unbind("change blur");
+        minCut4ImgLayer.add(maxCut4ImgLayer).on('change blur', function (e) {
             let minCutValue = parseFloat(minCut4ImgLayer.val());
             let maxCutValue = parseFloat(maxCut4ImgLayer.val());
 
             if (isNaN(minCutValue) || isNaN(maxCutValue)) {
                 return;
             }
-            self.survey.setCuts([minCutValue, maxCutValue]);
-
-            // update HpxImageSurvey.SURVEYS definition
-            /*const idxSelectedHiPS = self.surveySelectionDiv[0].selectedIndex;
-            let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-            let options = surveyDef.options || {};
-            options.minCut = minCutValue;
-            options.maxCut = maxCutValue;
-            surveyDef.options = options;*/
+            self.survey.setCuts(minCutValue, maxCutValue);
         });
 
         // colormap
         const colorMapSelect4ImgLayer = this.mainDiv.find('.colormap-selector').eq(0);
         const stretchSelect4ImgLayer = this.mainDiv.find('.stretch').eq(0);
         const reverseCmCb = this.mainDiv.find('.reversed').eq(0);
-        const colorSelect4ImgLayer = self.mainDiv.find('.color-selector').eq(0);
-        const colorMode = this.mainDiv[0].getElementsByClassName('colormap-color-selector');
 
         reverseCmCb.unbind("change");
         colorMapSelect4ImgLayer.unbind("change");
-        colorSelect4ImgLayer.unbind("change");
         stretchSelect4ImgLayer.unbind("change");
-        colorMapSelect4ImgLayer.add(colorSelect4ImgLayer).add(reverseCmCb).add(stretchSelect4ImgLayer).change(function () {
+        colorMapSelect4ImgLayer.add(reverseCmCb).add(stretchSelect4ImgLayer).change(function () {
             const stretch = stretchSelect4ImgLayer.val();
             const reverse = reverseCmCb[0].checked;
 
-            if (colorMode[0].checked) {
-                // Color map case
-                const cmap = colorMapSelect4ImgLayer.val();
-                self.survey.setColormap(cmap, { reversed: reverse, stretch: stretch });
-
-                // Save the colormap change
-                //self.cmap = cmap;
-            } else {
-                // Single color case
-                const colorHex = colorSelect4ImgLayer.val();
-                let colorRgb = Color.hexToRgb(colorHex);
-                self.survey.setColor([colorRgb.r / 255.0, colorRgb.g / 255.0, colorRgb.b / 255.0, 1.0], { reversed: reverse, stretch: stretch });
-                
-                // Save the color change
-                //self.color = colorHex;
-            }
-        });
-
-        colorSelect4ImgLayer.unbind("input");
-        colorSelect4ImgLayer.on('input', function () {
-            const stretch = stretchSelect4ImgLayer.val();
-            const reverse = reverseCmCb[0].checked;
-
-            const colorHex = colorSelect4ImgLayer.val();
-            let colorRgb = Color.hexToRgb(colorHex);
-            self.survey.setColor([colorRgb.r / 255.0, colorRgb.g / 255.0, colorRgb.b / 255.0, 1.0], {stretch: stretch, reversed: reverse});
-
-            // Save the color change
-            //self.color = colorHex;
-        });
-
-        // colormap/color radio
-        const [colormapChoiceRadioBtn, colorChoiceRadioBtn] = document.querySelectorAll('input[name="' + this.nameRadioColorChoice + '"]');
-        $(colormapChoiceRadioBtn).on("click", function (e) {
-            // restore the colormap
-            const cmap = self.cmap;
-
-            // set the colormap
-            self.survey.setColormap(cmap);
-        });
-        $(colorChoiceRadioBtn).on("click", function (e) {
-            // set the color
-            const colorHex = self.color;
-
-            let colorRgb = Color.hexToRgb(colorHex);
-            self.survey.setColor([colorRgb.r / 255.0, colorRgb.g / 255.0, colorRgb.b / 255.0, 1.0]);
+            // Color map case
+            const cmap = colorMapSelect4ImgLayer.val();
+            self.survey.setColormap(cmap, { reversed: reverse, stretch: stretch });
         });
 
         // opacity
@@ -361,35 +297,84 @@ export class HiPSLayer {
         opacity4ImgLayer.on('input', function () {
             const opacity = +opacity4ImgLayer.val();
             self.survey.setOpacity(opacity);
+        });
 
-            // update HpxImageSurvey.SURVEYS definition
-            /*const idxSelectedHiPS = self.headerDiv.find('.aladin-surveySelection')[0].selectedIndex;
-            let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-            let options = surveyDef.options || {};
-            options.opacity = opacity;
-            surveyDef.options = options;*/
+        // gamma
+        const gamma4ImgLayer = self.mainDiv.find('.gamma').eq(0);
+        gamma4ImgLayer.unbind("change blur");
+        gamma4ImgLayer.on('change blur', function () {
+            const gamma = parseFloat(gamma4ImgLayer.val()) || 1.0;
+
+            self.survey.setGamma(gamma);
+
+            const trueGamma = self.survey.getColorCfg().getGamma();
+            if (gamma !== trueGamma) {
+                gamma4ImgLayer.val(trueGamma);
+            }
+        });
+
+        // saturation
+        const sat4ImgLayer = self.mainDiv.find('.saturation').eq(0);
+        sat4ImgLayer.unbind("change blur");
+        sat4ImgLayer.on('change blur', function (e) {
+            const saturation = parseFloat(sat4ImgLayer.val()) || 0.0;
+
+            self.survey.setSaturation(saturation);
+
+            const trueSaturation = self.survey.getColorCfg().getSaturation();
+            if (saturation !== trueSaturation) {
+                sat4ImgLayer.val(trueSaturation);
+            }
+        });
+
+        // contrast
+        const contrast4ImgLayer = self.mainDiv.find('.contrast').eq(0);
+        contrast4ImgLayer.unbind("change blur");
+        contrast4ImgLayer.on('change blur', function (e) {
+            const contrast = parseFloat(contrast4ImgLayer.val()) || 0.0;
+
+            self.survey.setContrast(contrast);
+
+            const trueContrast = self.survey.getColorCfg().getContrast();
+            if (contrast !== trueContrast) {
+                contrast4ImgLayer.val(trueContrast);
+            }
+        });
+
+        // brightness
+        const brightness4ImgLayer = self.mainDiv.find('.brightness').eq(0);
+        brightness4ImgLayer.unbind("change blur");
+        brightness4ImgLayer.on('change blur', function (e) {
+            const brightness = parseFloat(brightness4ImgLayer.val()) || 0.0;
+
+            self.survey.setBrightness(brightness);
+
+            const trueBrightness = self.survey.getColorCfg().getBrightness();
+            if (brightness !== trueBrightness) {
+                brightness4ImgLayer.val(trueBrightness);
+            }
         });
     }
 
     _updateHiPSLayerOptions() {
-        const colorModeTr = this.mainDiv.find('.row').eq(0);
-        const colorMapTr = this.mainDiv.find('.row').eq(1);
-        const colorTr = this.mainDiv.find('.row').eq(2);
-        const reverseTr = this.mainDiv.find('.row').eq(3);
-        const stretchTr = this.mainDiv.find('.row').eq(4);
-        const formatTr = this.mainDiv.find('.row').eq(5);
-        const minCutTr = this.mainDiv.find('.row').eq(6);
-        const maxCutTr = this.mainDiv.find('.row').eq(7);
-
-        const colormapMode = this.mainDiv.find('.colormap-color-selector').eq(0);
-        const colorMode = this.mainDiv.find('.color-color-selector').eq(0);
-        const colorVal = this.mainDiv.find('.color-selector').eq(0);
+        const colorMapTr = this.mainDiv.find('.row').eq(0);
+        const reverseTr = this.mainDiv.find('.row').eq(1);
+        const stretchTr = this.mainDiv.find('.row').eq(2);
+        const formatTr = this.mainDiv.find('.row').eq(3);
+        const minCutTr = this.mainDiv.find('.row').eq(4);
+        const maxCutTr = this.mainDiv.find('.row').eq(5);
 
         const reverseCmCb = this.mainDiv.find('.reversed').eq(0);
         const colorMapSelect4ImgLayer = this.mainDiv.find('.colormap-selector').eq(0);
         const stretchSelect4ImgLayer = this.mainDiv.find('.stretch').eq(0);
         const formatSelect4ImgLayer = this.mainDiv.find('.format').eq(0);
         const opacity4ImgLayer = this.mainDiv.find('.opacity').eq(0);
+        const gamma4ImgLayer = this.mainDiv.find('.gamma').eq(0);
+        const contrast4ImgLayer = this.mainDiv.find('.contrast').eq(0);
+        const brightness4ImgLayer = this.mainDiv.find('.brightness').eq(0);
+        const sat4ImgLayer = this.mainDiv.find('.saturation').eq(0);
+        const blendingSelect4ImgLayer = this.mainDiv.find('.blending').eq(0);
+
         const minCut = this.mainDiv.find('.min-cut').eq(0);
         const maxCut = this.mainDiv.find('.max-cut').eq(0);
 
@@ -401,105 +386,72 @@ export class HiPSLayer {
             }));
         });
 
-        const options = this.survey.options;
-        const cmap = options.colormap;
-        const reverse = options.reversed;
-        const stretch = options.stretch;
+        const colorCfg = this.survey.getColorCfg();
+        const cmap = colorCfg.colormap;
+        const reverse = colorCfg.reversed;
+        const stretch = colorCfg.stretch;
 
         // Update radio color/colormap selection
-        if (cmap) {
-            colormapMode[0].checked = true;
-            colorMode[0].checked = false;
-        } else {
-            colormapMode[0].checked = false;
-            colorMode[0].checked = true;
-        }
-
-        const colored = this.survey.colored;
-
-        const imgFormat = options.imgFormat;
+        const imgFormat = this.survey.imgFormat;
         formatSelect4ImgLayer.val(imgFormat);
 
+        // Update radio color/colormap selection
+        const additive = colorCfg.getBlendingConfig();
+        blendingSelect4ImgLayer.val(additive ? "additive" : "default");
+
         // cuts
-        if (colored) {
-            colorModeTr[0].style.display = "none";
+        colorMapTr[0].style.display = "flex";
+        reverseTr[0].style.display = "flex";
+        stretchTr[0].style.display = "flex";
 
-            colorTr[0].style.display = "none";
-
-            colorMapTr[0].style.display = "none";
-            reverseTr[0].style.display = "none";
-            stretchTr[0].style.display = "none";
-
-            minCutTr[0].style.display = "none";
-            maxCutTr[0].style.display = "none";
+        if (colorCfg.minCut) {
+            if (parseFloat(minCut.val()) != colorCfg.minCut) {
+                minCut.val(parseFloat(colorCfg.minCut.toFixed(5)));
+            }
         }
         else {
-            colorModeTr[0].style.display = "flex";
-            if (!colormapMode[0].checked) {
-                colorTr[0].style.display = "flex";
-                stretchTr[0].style.display = "flex";
-
-                colorMapTr[0].style.display = "none";
-                reverseTr[0].style.display = "none";
-            } else {
-                colorTr[0].style.display = "none";
-
-                colorMapTr[0].style.display = "flex";
-                reverseTr[0].style.display = "flex";
-                stretchTr[0].style.display = "flex";
-            }
-
-            if (options.minCut) {
-                if (parseFloat(minCut.val()) != options.minCut) {
-                    minCut.val(parseFloat(options.minCut.toFixed(5)));
-                }
-            }
-            else {
-                minCut.val(0.0);
-            }
-
-            minCutTr[0].style.display = "flex";
-
-            if (options.maxCut) {
-                if (parseFloat(maxCut.val()) != options.maxCut) {
-                    maxCut.val(parseFloat(options.maxCut.toFixed(5)));
-                }
-            }
-            else {
-                maxCut.val(0.0);
-            }
-            maxCutTr[0].style.display = "flex";
+            minCut.val(0.0);
         }
 
-        const opacity = options.opacity;
+        minCutTr[0].style.display = "flex";
+
+        if (colorCfg.maxCut) {
+            if (parseFloat(maxCut.val()) != colorCfg.maxCut) {
+                maxCut.val(parseFloat(colorCfg.maxCut.toFixed(5)));
+            }
+        }
+        else {
+            maxCut.val(0.0);
+        }
+        maxCutTr[0].style.display = "flex";
+        // save opacity
+        const opacity = colorCfg.getOpacity();
         opacity4ImgLayer.val(opacity);
-
-        // TODO: traiter ce cas
-        if (this.survey.colored) {
-            return;
-        }
-        
-        if (options.color) {
-            const [r, g, b, _] = options.color;
-            const hexColor = Color.rgbToHex(r*255, g*255, b*255);
-            colorVal[0].value = hexColor;
-
-            // save color
-            this.color = hexColor;
-        } else {
-            colorMapSelect4ImgLayer.val(cmap);
-
-            // save cmap
-            this.cmap = cmap;
-        }
+        // save gamma
+        const gamma = colorCfg.getGamma();
+        gamma4ImgLayer.val(gamma);
+        // save saturation
+        const saturation = colorCfg.getSaturation();
+        sat4ImgLayer.val(saturation);
+        // save brightness
+        const brightness = colorCfg.getBrightness();
+        brightness4ImgLayer.val(brightness);
+        // save contrast
+        const contrast = colorCfg.getContrast();
+        contrast4ImgLayer.val(contrast);
+        // save cmap
+        colorMapSelect4ImgLayer.val(cmap);
+        this.cmap = cmap;
+        // save reverse
         reverseCmCb.prop('checked', reverse);
+        // save stretch
         stretchSelect4ImgLayer.val(stretch);
     }
 
     _updateSurveysDropdownList() {
         let surveySelectionDiv = this.headerDiv.find('.aladin-surveySelection');
 
-        let surveys = HpxImageSurvey.SURVEYS.sort(function (a, b) {
+        let surveys = ImageSurvey.SURVEYS.sort(function (a, b) {
             if (!a.order) {
                 return a.name > b.name ? 1 : -1;
             }
@@ -518,21 +470,12 @@ export class HiPSLayer {
             // The survey has not been found among the ones cached
             if (!surveyFound) {
                 // Cache it
-                /*HpxImageSurvey.SURVEYS.push({
-                    id: this.survey.properties.id,
-                    name: this.survey.properties.name,
-                    maxOrder: this.survey.properties.maxOrder,
-                    url: this.survey.properties.url,
-                    options: this.survey.options
-                });
-                surveySelectionDiv.append($("<option />").attr("selected", true).val(this.survey.properties.id).text(this.survey.properties.name));*/
-
                 console.warn(this.survey, " has not been found in SURVEYS!")
             } else {
-                // Update the HpxImageSurvey
+                // Update the ImageSurvey
                 const idxSelectedHiPS = surveySelectionDiv[0].selectedIndex;
-                let surveyDef = HpxImageSurvey.SURVEYS[idxSelectedHiPS];
-                surveyDef.options = this.survey.options;
+                let surveyDef = ImageSurvey.SURVEYS[idxSelectedHiPS];
+                surveyDef.options = this.survey.metadata;
             }
         }
     }
diff --git a/src/js/gui/Stack.js b/src/js/gui/Stack.js
index ccafc4e0..e77d306e 100644
--- a/src/js/gui/Stack.js
+++ b/src/js/gui/Stack.js
@@ -54,6 +54,8 @@ export class Stack {
         this.imgLayers = new Map();
         this.selectedLayer = undefined;
 
+        this.backgroundColor = '#6699ff';
+
         this._createComponent();
         this._addListeners();
     }
@@ -101,15 +103,13 @@ export class Stack {
         layerBox.append(backgroundColorInput);
 
         // Set a default background color
-        const defaultBackgroundColor = '#6699ff';
-        backgroundColorInput.val(defaultBackgroundColor);
-        self.view.aladin.setBackgroundColor(Color.hexToRgb(defaultBackgroundColor));
+        backgroundColorInput.val(this.backgroundColor);
+        self.view.aladin.setBackgroundColor(Color.hexToRgb(this.backgroundColor));
 
-        let updateBackgroundColor = function () {
-            const backgroundColor = backgroundColorInput.val();
-            self.view.aladin.setBackgroundColor(Color.hexToRgb(backgroundColor));
-        };
-        backgroundColorInput.on('input', updateBackgroundColor);
+        backgroundColorInput.on('input', () => {
+            self.backgroundColor = backgroundColorInput.val();
+            self.view.aladin.setBackgroundColor(Color.hexToRgb(self.backgroundColor));
+        });
 
         layerBox.append('<div class="aladin-box-separator"></div>' +
             '<div class="aladin-label">Overlay layers</div>');