diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 9328b951d..207b41b2d 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -61,7 +61,7 @@
     from reportlab.lib.colors import Color
     from reportlab.platypus import Paragraph
     from reportlab.lib.enums import TA_LEFT, TA_CENTER, TA_RIGHT
-
+    from reportlab.lib.utils import ImageReader
     reportlab_installed = True
 except ImportError:
     reportlab_installed = False
@@ -1677,6 +1677,222 @@ def draw_scalebar(self, panel, region_width, page):
                 font_size, (red, green, blue),
                 align="center")
 
+    def get_color_ramp(self, channel):
+        """
+        Return the 256 1D array of the LUT from the server or
+        the color gradient.
+
+        LUT files on the server are read with the script service, and
+        file content is parsed with a custom implementation.
+        """
+        color = channel["color"]
+
+        # Convert the hexadecimal string to RGB
+        color_ramp = None
+        if len(color) == 6:
+            try:
+                r = int(color[0:2], 16)
+                g = int(color[2:4], 16)
+                b = int(color[4:6], 16)
+                color_ramp = (numpy.linspace(0, 1, 256).reshape(-1, 1)
+                              * numpy.array([r, g, b], dtype=numpy.uint8).T)
+                color_ramp = color_ramp.astype(numpy.uint8)
+            except ValueError:
+                pass
+
+        else:
+            script_service = self.conn.getScriptService()
+            luts = script_service.getScriptsByMimetype("text/x-lut")
+            for lut in luts:
+                if lut.name.val != color:
+                    continue
+
+                orig_file = self.conn.getObject(
+                    "OriginalFile", lut.getId()._val)
+                lut_data = bytearray()
+                # Collect the LUT data in byte form
+                for chunk in orig_file.getFileInChunks():
+                    lut_data.extend(chunk)
+
+                if len(lut_data) in [768, 800]:
+                    lut_arr = numpy.array(lut_data, dtype="uint8")[-768:]
+                    color_ramp = lut_arr.reshape(3, 256).T
+                else:
+                    lut_data = lut_data.decode()
+                    r, g, b = [], [], []
+
+                    lines = lut_data.split("\n")
+                    sep = None
+                    if "\t" in lines[0]:
+                        sep = "\t"
+                    for line in lines:
+                        val = line.split(sep)
+                        if len(val) < 3 or not val[-1].isnumeric():
+                            continue
+                        r.append(int(val[-3]))
+                        g.append(int(val[-2]))
+                        b.append(int(val[-1]))
+                    color_ramp = numpy.array([r, g, b], dtype=numpy.uint8).T
+                break
+
+        if channel.get("reverseIntensity", False):
+            color_ramp = color_ramp[::-1]
+
+        if color_ramp is None:
+            return numpy.zeros((1, 256, 3), dtype=numpy.uint8)
+        else:
+            return color_ramp[numpy.newaxis]
+
+    def draw_colorbar(self, panel, page):
+        """
+        Add the colorbar to the page.
+        Here we calculate the position of colorbar but delegate
+        to self.draw_scalebar_line() and self.draw_text() to actually place
+        the colorbar, ticks and labels on PDF/TIFF
+        """
+
+        colorbar = panel.get("colorbar", {})
+        if not colorbar.get("show", False):
+            return
+
+        channel = None
+        for c in panel["channels"]:
+            if c["active"]:
+                channel = c
+                break
+        if not channel:
+            return
+
+        color_ramp = self.get_color_ramp(channel)
+
+        spacing = colorbar["spacing"]
+        thickness = colorbar["thickness"]
+        cbar = {  # Dict of colorbar properties to pass to paste_image
+            'zoom': '100',
+            'dx': 0,
+            'dy': 0,
+            'orig_height': panel['orig_height'],
+            'orig_width': panel['orig_width'],
+        }
+        start, end = channel["window"]["start"], channel["window"]["end"]
+
+        decimals = max(0, int(numpy.ceil(
+            -numpy.log10((end - start) / colorbar["num_ticks"]))))
+        labels = numpy.linspace(start, end, num=colorbar["num_ticks"])
+        pos_ratio = numpy.linspace(0, 1, colorbar["num_ticks"])
+        if colorbar["position"] in ["left", "right"]:
+            color_ramp = color_ramp.transpose((1, 0, 2))[::-1]
+            cbar['width'] = thickness
+            cbar['height'] = panel['height']
+            cbar['y'] = panel['y']
+            cbar['x'] = panel['x'] - (spacing + thickness)
+            labels_x = [cbar['x']]
+            labels_y = cbar['y'] + panel['height'] * pos_ratio[::-1]
+            align = "right"
+            if colorbar["position"] == "right":
+                cbar['x'] = panel['x'] + panel['width'] + spacing
+                labels_x = [cbar['x'] + cbar['width']]
+                align = "left"
+            labels_x *= labels.size  # Duplicate x postions
+        elif colorbar["position"] in ["top", "bottom"]:
+            cbar['width'] = panel['width']
+            cbar['height'] = thickness
+            cbar['x'] = panel['x']
+            cbar['y'] = panel['y'] - (spacing + thickness)
+            labels_x = cbar['x'] + panel['width'] * pos_ratio
+            labels_y = [cbar['y']]
+            align = "center"
+            if colorbar["position"] == "bottom":
+                cbar['y'] = panel['y'] + panel['height'] + spacing
+                labels_y = [cbar['y'] + cbar['height']]
+            labels_y *= labels.size  # Duplicate y postions
+
+        pil_img = Image.fromarray(color_ramp)
+        img_name = channel["color"] + ".png"
+
+        # for PDF export, we might have a target dpi
+        dpi = panel.get('min_export_dpi', None)
+
+        # Paste the panel to PDF or TIFF image
+        self.paste_image(pil_img, img_name, cbar, page, dpi,
+                         is_colorbar=True)
+
+        rgb = tuple(int(colorbar["axis_color"][i:i+2], 16) for i in (0, 2, 4))
+        fontsize = int(colorbar["font_size"])
+        tick_width = 1
+        tick_len = colorbar["tick_len"]
+        label_margin = colorbar["label_margin"]
+        contour_width = tick_width
+        for label, pos_x, pos_y in zip(labels, labels_x, labels_y):
+
+            # Cosmetic correction, for first and last ticks to be
+            # aligned with the image
+            shift = 0
+            if label == labels[0]:
+                shift = -tick_width / 2
+            elif label == labels[-1]:
+                shift = tick_width / 2
+
+            # Round the label str to the appropriate decimal
+            label = f"{label:.{decimals}f}"
+
+            if colorbar["position"] == "left":
+                x2 = pos_x - tick_len
+                pos_y += shift
+                self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
+                                        tick_width, rgb)
+                self.draw_text(label, pos_x - 4 - label_margin,
+                               pos_y - fontsize / 2 + 1,
+                               fontsize, rgb, align=align)
+            elif colorbar["position"] == "right":
+                x2 = pos_x + tick_len
+                pos_y += shift
+                self.draw_scalebar_line(pos_x, pos_y, x2, pos_y,
+                                        tick_width, rgb)
+                self.draw_text(label, pos_x + 4 + label_margin,
+                               pos_y - fontsize / 2 + 1,
+                               fontsize, rgb, align=align)
+            elif colorbar["position"] == "top":
+                y2 = pos_y - tick_len
+                pos_x -= shift  # Order of the label is reversed
+                self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
+                                        tick_width, rgb)
+                self.draw_text(label, pos_x,
+                               pos_y - fontsize - 2 - label_margin,
+                               fontsize, rgb, align=align)
+            elif colorbar["position"] == "bottom":
+                y2 = pos_y + tick_len
+                pos_x -= shift  # Order of the label is reversed
+                self.draw_scalebar_line(pos_x, pos_y, pos_x, y2,
+                                        tick_width, rgb)
+                self.draw_text(label, pos_x, pos_y + 4 + label_margin,
+                               fontsize, rgb, align=align)
+
+        if colorbar["position"] == "top":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'],
+                                    contour_width, rgb)
+        elif colorbar["position"] == "bottom":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'] + cbar['height'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
+        elif colorbar["position"] == "left":
+            self.draw_scalebar_line(cbar['x'],
+                                    cbar['y'],
+                                    cbar['x'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
+        elif colorbar["position"] == "right":
+            self.draw_scalebar_line(cbar['x'] + cbar['width'],
+                                    cbar['y'],
+                                    cbar['x'] + cbar['width'],
+                                    cbar['y'] + cbar['height'],
+                                    contour_width, rgb)
+
     def is_big_image(self, image):
         """Return True if this is a 'big' tiled image."""
         max_w, max_h = self.conn.getMaxPlaneSize()
@@ -1936,12 +2152,6 @@ def draw_panel(self, panel, page, idx):
         """
         image_id = panel['imageId']
         channels = panel['channels']
-        x = panel['x']
-        y = panel['y']
-
-        # Handle page offsets
-        x = x - page['x']
-        y = y - page['y']
 
         image = self.conn.getObject("Image", image_id)
         if image is None:
@@ -2150,6 +2360,7 @@ def add_panels_to_page(self, panels_json, image_ids, page):
             # Finally, add scale bar and labels to the page
             self.draw_scalebar(panel, pil_img.size[0], page)
             self.draw_labels(panel, page)
+            self.draw_colorbar(panel, page)
 
     def get_figure_file_ext(self):
         return "pdf"
@@ -2266,7 +2477,8 @@ def draw_scalebar_line(self, x, y, x2, y2, width, rgb):
         c.setStrokeColorRGB(red, green, blue, 1)
         c.line(x, y, x2, y2)
 
-    def paste_image(self, pil_img, img_name, panel, page, dpi):
+    def paste_image(self, pil_img, img_name, panel, page, dpi,
+                    is_colorbar=False):
         """ Adds the PIL image to the PDF figure. Overwritten for TIFFs """
 
         # Apply flip transformations before drawing the image
@@ -2307,8 +2519,15 @@ def paste_image(self, pil_img, img_name, panel, page, dpi):
         if self.zip_folder_name is not None:
             img_name = os.path.join(self.zip_folder_name, FINAL_DIR, img_name)
 
-        # Save Image to file, then bring into PDF
-        pil_img.save(img_name)
+        if is_colorbar:
+            # Save the image to a BytesIO stream
+            buffer = BytesIO()
+            pil_img.save(buffer, format="PNG")
+            buffer.seek(0)
+            img_name = ImageReader(buffer)  # drawImage accepts ImageReader
+        else:
+            # Save Image to file, then bring into PDF
+            pil_img.save(img_name)
         # Since coordinate system is 'bottom-up', convert from 'top-down'
         y = self.page_height - height - y
         # set fill color alpha to fully opaque, since this impacts drawImage
@@ -2374,7 +2593,8 @@ def add_page_color(self):
         """ Don't need to do anything for TIFF. Image is already colored."""
         pass
 
-    def paste_image(self, pil_img, img_name, panel, page, dpi=None):
+    def paste_image(self, pil_img, img_name, panel, page,
+                    dpi=None, is_colorbar=False):
         """ Add the PIL image to the current figure page """
 
         # Apply flip transformations before drawing the image
@@ -2405,8 +2625,9 @@ def paste_image(self, pil_img, img_name, panel, page, dpi=None):
         width = int(round(width))
         height = int(round(height))
 
+        export_img = self.export_images and not is_colorbar
         # Save image BEFORE resampling
-        if self.export_images:
+        if export_img:
             rs_name = os.path.join(self.zip_folder_name, RESAMPLED_DIR,
                                    img_name)
             pil_img.save(rs_name)
@@ -2414,7 +2635,7 @@ def paste_image(self, pil_img, img_name, panel, page, dpi=None):
         # Resize to our target size to match DPI of figure
         pil_img = pil_img.resize((width, height), Image.BICUBIC)
 
-        if self.export_images:
+        if export_img:
             img_name = os.path.join(self.zip_folder_name, FINAL_DIR, img_name)
             pil_img.save(img_name)
 
diff --git a/src/css/figure.css b/src/css/figure.css
index 2cdc6a2c8..83d27d88a 100644
--- a/src/css/figure.css
+++ b/src/css/figure.css
@@ -1368,7 +1368,119 @@
         color: white;
         border-color: #007bff;
     }
-    
+
     .flipping .btn.active i {
         color: white;
     }
+
+    .colorbar {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    .colorbar_left, .colorbar_right{
+        position: absolute;
+        top: 0%;
+        width: 100%;
+        height: 100%;
+    }
+
+    .colorbar_left{
+        right: 0%;
+        -webkit-transform: scaleX(-1) rotate(-90deg);
+        transform: scaleX(-1) rotate(-90deg);
+    }
+
+    .colorbar_right{
+        -webkit-transform: rotate(-90deg);
+        transform: rotate(-90deg);
+    }
+
+    .colorbar_top, .colorbar_bottom {
+        position: absolute;
+        width: 100%;
+        left: 0%;
+    }
+
+    .colorbar_top {
+        bottom: 0%;
+    }
+
+    .colorbar_bottom {
+        top: 0%;
+    }
+
+    .colorbar_bg {
+        background-size: 100% var(--pngHeight);
+        background-repeat: no-repeat;
+        margin-right: 0px;
+        margin-left: 0px;
+        display: flex;
+        position: relative;
+    }
+
+    .colorbar_ticks_right, .colorbar_ticks_left {
+        height: 100%;
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: space-between;
+        position: absolute;
+    }
+
+    .colorbar_ticks_right {
+        align-items: left;
+    }
+
+    .colorbar_ticks_left {
+        right: 0%;
+        align-items: flex-end;
+    }
+
+    .colorbar_ticks_top, .colorbar_ticks_bottom {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-end;
+        position: absolute;
+    }
+
+    .colorbar_ticks_top {
+        bottom: 0%;
+    }
+
+    .colorbar_ticks_bottom {
+        top: 0%;
+    }
+
+    .colorbar_label_horizontal {
+        line-height: 1;
+    }
+
+    .colorbar_label_vertical {
+        height: 0px;
+        line-height: 1px;
+    }
+
+    .colorbar_dash_horizontal {
+        width: 1px;
+        position: relative;
+    }
+
+    .colorbar_dash_vertical {
+        height: 1px;
+        position: relative;
+    }
+
+    .colorbar_tick_horizontal {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 1px;
+        position: relative;
+    }
+
+    .colorbar_tick_vertical {
+        display: flex;
+    }
diff --git a/src/index.html b/src/index.html
index 1d528a75f..374c19b18 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1871,6 +1871,10 @@ <h5>Scalebar</h5>
 
             <hr />
 
+            <h5>Colorbar</h5>
+            <div id="colorbar_form"></div>
+            <hr />
+
             <h5 style="float: left; margin-top: 10px">Add Labels</h5>
 
             <button
diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index 059516cb0..a231d50b5 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -240,6 +240,20 @@
             this.save('scalebar', sb);
         },
 
+        hide_colorbar: function() {
+            // keep all colorbar properties, except 'show'
+            var cb = $.extend(true, {}, this.get('colorbar'));
+            cb.show = false;
+            this.save('colorbar', cb);
+        },
+
+        save_colorbar: function(new_cb) {
+            // update only the attributes of colorbar we're passed
+            var old_cb = $.extend(true, {}, this.get('colorbar') || {});
+            var cb = $.extend(true, old_cb, new_cb);
+            this.save('colorbar', cb);
+        },
+
         show_border: function(color, strokeWidth){
             var border = {
                 'color': '#'+color,
@@ -1080,40 +1094,120 @@
             var y = this.get('y');
             // get labels by position
             var top_labels = labels.filter(function(l) {return l.position === 'top'});
-            // offset by font-size of each
-            y = top_labels.reduce(function(prev, l){
-                return prev - (LINE_HEIGHT * l.size);
-            }, y);
-            return y;
+            // calculate offset by font-size of each
+            var shift = 0;
+            shift = top_labels.reduce(function(prev, l){
+                return prev + (LINE_HEIGHT * l.size);
+            }, shift);
+
+            var shift_cbar = 0;
+            var cb = this.get("colorbar");
+            if (cb && cb.show) {
+                var size = Number(cb.font_size);
+                if (cb.position == "top") {
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        size + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "left" || cb.position == "right") {
+                    // get height of topmost tick label and take half of it
+                    shift_cbar = size / 2;
+                }
+            }
+            return y - Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxLeft: function() {
-            // get left of panel including 'leftvert' labels (ignore
-            // left horizontal labels - hard to calculate width)
             var labels = this.get("labels");
             var x = this.get('x');
             // get labels by position
             var left_labels = labels.filter(function(l) {return l.position === 'leftvert'});
-            // offset by font-size of each
-            x = left_labels.reduce(function(prev, l){
-                return prev - (LINE_HEIGHT * l.size);
-            }, x);
-            return x;
+            // calculate offset by font-size of each vertical label
+            var shift = 0;
+            shift = left_labels.reduce(function(prev, l){
+                return prev + (LINE_HEIGHT * l.size);
+            }, shift);
+
+            left_labels = labels.filter(function(l) {return l.position === 'left'});
+            // compare offset of each horizontal label
+            for (const l of left_labels) {
+                const width = this.measureTextSize(l.text, l.size + "px");
+                shift = Math.max(shift, width);
+            }
+
+            var start = "";
+            var end = "";
+            for (const chann of this.get('channels')) {
+                if(chann.active) {
+                    start = chann.window?.start;
+                    end = chann.window?.end;
+                    break;
+                }
+            }
+            var shift_cbar = 0;
+            var cb = this.get("colorbar");
+            if (cb && cb.show) {
+                let rounding = Math.max(0, Math.ceil(-Math.log10((end - start) / cb.num_ticks)));
+                start = start.toFixed(rounding);
+                end = end.toFixed(rounding);
+                if (cb.position == "left") {
+                    const width = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        width + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "top" || cb.position == "bottom"){
+                    shift_cbar = this.measureTextSize(start, cb.font_size + "px");
+                    shift_cbar = shift_cbar / 2;
+                }
+            }
+
+            return x - Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxRight: function() {
-            // Ignore right (horizontal) labels since we don't know how long they are
-            // but include right vertical labels
             var labels = this.get("labels");
             var x = this.get('x') + this.get('width');
             // get labels by position
             var right_labels = labels.filter(function(l) {return l.position === 'rightvert'});
-            // offset by font-size of each
-            x = right_labels.reduce(function(prev, l){
+            // calculate offset by font-size of each vertical label
+            var shift = 0;
+            shift = right_labels.reduce(function(prev, l){
                 return prev + (LINE_HEIGHT * l.size);
-            }, x);
+            }, shift);
+
+            right_labels = labels.filter(function(l) {return l.position === 'right'});
+            // compare offset of each horizontal label
+            for (const l of right_labels) {
+                const width = this.measureTextSize(l.text, l.size + "px");
+                shift = Math.max(shift, width);
+            }
+
+            var start = "";
+            var end = "";
+            for (const chann of this.get('channels')) {
+                if(chann.active) {
+                    start = chann.window?.start;
+                    end = chann.window?.end;
+                    break;
+                }
+            }
+            var shift_cbar = 0;
+            var cb = this.get("colorbar");
+            if (cb && cb.show) {
+                let rounding = Math.max(0, Math.ceil(-Math.log10((end - start) / cb.num_ticks)));
+                start = start.toFixed(rounding);
+                end = end.toFixed(rounding);
+                if (cb.position == "right") {
+                    const width = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        width + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "top" || cb.position == "bottom"){
+                    shift_cbar = this.measureTextSize(end, cb.font_size + "px");
+                    shift_cbar = shift_cbar / 2;
+                }
+            }
 
-            return x;
+            return x + Math.max(shift, shift_cbar);
         },
 
         getBoundingBoxBottom: function() {
@@ -1122,11 +1216,42 @@
             var y = this.get('y') + this.get('height');
             // get labels by position
             var bottom_labels = labels.filter(function(l) {return l.position === 'bottom'});
-            // offset by font-size of each
-            y = bottom_labels.reduce(function(prev, l){
+            // calculate offset by font-size of each
+            var shift = 0;
+            shift = bottom_labels.reduce(function(prev, l){
                 return prev + (LINE_HEIGHT * l.size);
-            }, y);
-            return y;
+            }, shift);
+
+            var shift_cbar = 0;
+            var cb = this.get("colorbar");
+            if (cb && cb.show) {
+                var size = Number(cb.font_size);
+                if (cb.position == "bottom") {
+                    shift_cbar = (cb.spacing + cb.thickness +
+                        size + cb.tick_len + cb.label_margin);
+                    shift_cbar = Math.max(0, shift_cbar);
+                } else if (cb.position == "left" || cb.position == "right") {
+                    // get height of topmost tick label and take half of it
+                    shift_cbar = size / 2;
+                }
+            }
+            return y + Math.max(shift, shift_cbar);
+        },
+
+        measureTextSize: function(text, fontSize) {
+            var fontFamily = "bs-font-sans-serif";
+            // Create a canvas element
+            var canvas = document.createElement('canvas');
+            var context = canvas.getContext('2d');
+
+            // Set the font properties
+            context.font = `${fontSize} ${fontFamily}`;
+            var metrics = context.measureText(text);
+
+            context = null;
+            canvas = null;
+
+            return metrics.width;
         },
 
         // True if coords (x,y,width, height) overlap with panel
diff --git a/src/js/views/colorbar_form_view.js b/src/js/views/colorbar_form_view.js
new file mode 100644
index 000000000..655e7a157
--- /dev/null
+++ b/src/js/views/colorbar_form_view.js
@@ -0,0 +1,124 @@
+import Backbone from "backbone";
+import _, { forEach } from "underscore";
+import $ from "jquery";
+
+import colorbar_form_template from '../../templates/colorbar_form.template.html?raw';
+
+var ColorbarFormView = Backbone.View.extend({
+
+    template: _.template(colorbar_form_template),
+
+    initialize: function(opts) {
+        this.render = _.debounce(this.render);
+        this.models = opts.models;
+
+        var self = this;
+        this.models.forEach(function(m) {
+            self.listenTo(m, 'change:colorbar', self.render);
+        });
+    },
+
+    events: {
+        "submit .colorbar_form": "update_colorbar",
+        "change .btn": "dropdown_btn_changed",
+        "click .hide_colorbar": "hide_colorbar",
+        "keyup input[type='number']"  : "handle_keyup",
+     },
+
+    handle_keyup: function (event) {
+        // If Enter key - submit form...
+        if (event.which == 13) {
+            this.update_colorbar();
+        }
+    },
+
+    dropdown_btn_changed: function(event) {
+        $(event.target).closest('form').submit();
+    },
+
+    hide_colorbar: function() {
+        this.models.forEach(function(m) {
+            m.hide_colorbar();
+        });
+    },
+
+    update_colorbar: function(event) {
+        var $form = $('.colorbar_form');
+        var position = $('.label-position i:first', $form).attr('data-position'),
+            thickness = parseInt($('.colorbar-thickness', $form).val()),
+            font_size = $('.colorbar_font_size span:first', $form).text().trim(),
+            axis_color = $('.colorbar-axis-color span:first', $form).attr('data-axis-color'),
+            num_ticks = parseInt($('.colorbar-num-ticks', $form).val()),
+            tick_len = parseInt($('.colorbar-tick-length', $form).val()),
+            spacing = parseInt($('.colorbar-spacing', $form).val()),
+            label_margin = parseInt($('.colorbar-label-margin', $form).val());
+
+        this.models.forEach(function(m) {
+            var lutBgPos = m.get('lutBgPos');
+            var cb = { show: true, lutBgPos: lutBgPos };
+            if (position != '-') cb.position = position;
+            if (thickness != '-') cb.thickness = thickness;
+            if (font_size != '-') cb.font_size = font_size;
+            if (axis_color != '-') cb.axis_color = axis_color;
+            if (num_ticks != '-') cb.num_ticks = num_ticks;
+            if (tick_len != '-') cb.tick_len = tick_len;
+            if (spacing != '-') cb.spacing = spacing;
+            if (label_margin != '-') cb.label_margin = label_margin;
+            m.save_colorbar(cb);
+        });
+        return false;
+    },
+
+    render: function() {
+        var cb_json = {show: false},
+            hidden = false,
+            cb;
+
+        this.models.forEach(function(m) {
+            cb = m.get('colorbar');
+
+            if (cb) {
+                if (!cb_json.length) {
+                    cb_json.position = cb.position;
+                    cb_json.thickness = cb.thickness;
+                    cb_json.font_size = cb.font_size;
+                    cb_json.axis_color = cb.axis_color;
+                    cb_json.num_ticks = cb.num_ticks;
+                    cb_json.tick_len = cb.tick_len;
+                    cb_json.spacing = cb.spacing;
+                    cb_json.label_margin = cb.label_margin;
+                } else {
+                    if (cb_json.position != cb.position) cb_json.position = '-';
+                    if (cb_json.thickness != cb.thickness) cb_json.thickness = '-';
+                    if (cb_json.font_size != cb.font_size) cb_json.font_size = '-';
+                    if (cb_json.axis_color != cb.axis_color) cb_json.axis_color = '-';
+                    if (cb_json.num_ticks != cb.num_ticks) cb_json.num_ticks = '-';
+                    if (cb_json.tick_len != cb.tick_len) cb_json.tick_len = '-';
+                    if (cb_json.spacing != cb.spacing) cb_json.spacing = '-';
+                    if (cb_json.label_margin != cb.label_margin) cb_json.label_margin = '-';
+                }
+            }
+            if (!cb || !cb.show) {
+                hidden = true;
+            }
+        });
+
+        if (this.models.length === 0 || hidden) {
+            cb_json.show = true;
+        }
+
+        cb_json.position = cb_json.position ?? 'right';
+        cb_json.thickness = cb_json.thickness ?? 15;
+        cb_json.font_size = cb_json.font_size ?? 10;
+        cb_json.axis_color = cb_json.axis_color ?? '000000';
+        cb_json.num_ticks = cb_json.num_ticks ?? 7;
+        cb_json.tick_len = cb_json.tick_len ?? 3;
+        cb_json.spacing = cb_json.spacing ?? 5;
+        cb_json.label_margin = cb_json.label_margin ?? 5;
+        var html = this.template(cb_json);
+        this.$el.html(html);
+        return this;
+    }
+});
+
+export default ColorbarFormView;
\ No newline at end of file
diff --git a/src/js/views/lutpicker.js b/src/js/views/lutpicker.js
index 468b4041c..8ce6028d0 100644
--- a/src/js/views/lutpicker.js
+++ b/src/js/views/lutpicker.js
@@ -63,10 +63,40 @@ var LutPickerView = Backbone.View.extend({
         $("button[type='submit']", this.el).removeAttr('disabled');
     },
 
-    loadLuts: function() {
+    loadLuts: async function(force_reload = false) {
         var url = WEBGATEWAYINDEX + 'luts/';
         let cors_headers = { mode: 'cors', credentials: 'include' };
-        return fetch(url, cors_headers).then(rsp => rsp.json());
+        if (force_reload || this.lut_names === undefined || this.lutsPngUrl === undefined || this.luts === undefined) {
+            const rsp = await fetch(url, cors_headers);
+            const data = await rsp.json();
+
+            this.luts = data.luts;
+            this.lut_names = data.png_luts;
+            this.is_dynamic_lut = Boolean(data.png_luts_new);
+            if (this.is_dynamic_lut){
+                this.luts = this.luts.map(function(lut) {
+                    lut.png_index = lut.png_index_new;
+                    return lut;
+                });
+                this.lut_names = data.png_luts_new;
+                this.lutsPngUrl = `${WEBGATEWAYINDEX}luts_png/`;
+            } else {
+                this.lutsPngUrl = STATIC_DIR + lutsPng;
+            }
+            this.lut_names = this.lut_names.map(lut_name => lut_name.split('/').pop());
+
+            var png_len = this.lut_names.length;
+            if (!this.is_dynamic_lut) {
+                // png of figure does not include the gradient
+                png_len = png_len - 1;
+            }
+            // Set the css variables at the document root, as it's used in different places
+            $(":root").css({
+                "--pngHeight": png_len * 50 + "px",
+                "--lutPng": "url("+this.lutsPngUrl+")"
+            });
+        }
+        return this.lutsPngUrl
     },
 
     getLutBackgroundPosition: function(lutName) {
@@ -95,24 +125,8 @@ var LutPickerView = Backbone.View.extend({
             this.success = options.success;
         }
 
-        this.loadLuts().then(data => {
-            this.luts = data.luts;
-            this.lut_names = data.png_luts;
-            this.is_dynamic_lut = Boolean(data.png_luts_new);
-            if (this.is_dynamic_lut){
-                this.luts = this.luts.map(function(lut) {
-                    lut.png_index = lut.png_index_new;
-                    return lut;
-                });
-                this.lut_names = data.png_luts_new;
-                this.lutsPngUrl = `${WEBGATEWAYINDEX}luts_png/`;
-            } else {
-                this.lutsPngUrl = STATIC_DIR + lutsPng;
-            }
-            this.lut_names = this.lut_names.map(lut_name => lut_name.split('/').pop());
-
-            this.render();
-        });
+        this.loadLuts();
+        this.render();
     },
 
     render:function() {
@@ -129,17 +143,6 @@ var LutPickerView = Backbone.View.extend({
                         'displayName': this.formatLutName(lut.name)};
             }.bind(this));
 
-
-            var png_len = this.lut_names.length;
-            if (!this.is_dynamic_lut) {
-                // png of figure does not include the gradient
-                png_len = png_len - 1;
-            }
-            // Set the css variables at the document root, as it's used in different places
-            $(":root").css({
-                "--pngHeight": png_len * 50 + "px",
-                "--lutPng": "url("+this.lutsPngUrl+")"
-            });
             html = this.template({'luts': luts});
         }
         $(".modal-body", this.el).html(html);
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 3a8b01a4b..828d6d4b6 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -12,6 +12,8 @@
     import label_right_vertical_template from '../../templates/labels/label_right_vertical.template.html?raw';
     import label_table_template from '../../templates/labels/label_table.template.html?raw';
     import scalebar_panel_template from '../../templates/scalebar_panel.template.html?raw';
+    import colorbar_panel_template from '../../templates/colorbar.template.html?raw';
+    import FigureLutPicker from "../views/lutpicker";
 
     // -------------------------Panel View -----------------------------------
     // A Panel is a <div>, added to the #paper by the FigureView below.
@@ -24,7 +26,7 @@
         label_right_vertical_template: _.template(label_right_vertical_template),
         label_table_template: _.template(label_table_template),
         scalebar_template: _.template(scalebar_panel_template),
-
+        colorbar_template: _.template(colorbar_panel_template),
 
         initialize: function(opts) {
             // we render on Changes in the model OR selected shape etc.
@@ -33,6 +35,7 @@
                 'change:x change:y change:width change:height change:zoom change:dx change:dy change:rotation change:vertical_flip change:horizontal_flip',
                 this.render_layout);
             this.listenTo(this.model, 'change:scalebar change:pixel_size_x', this.render_scalebar);
+            this.listenTo(this.model, 'change:colorbar change:channels', this.render_colorbar);
             this.listenTo(this.model,
                 'change:zoom change:dx change:dy change:width change:height change:channels change:theZ change:theT change:z_start change:z_end change:z_projection change:min_export_dpi change:pixel_range change:vertical_flip change:horizontal_flip',
                 this.render_image);
@@ -154,6 +157,11 @@
                 var sb_width = panel_scale * sb_pixels;
                 this.$scalebar.css('width', sb_width);
             }
+            var cb = this.model.get('colorbar');
+            if (cb && cb.show && (cb.position == "left" || cb.position == "right") && this.$colorbar) {
+                this.$colorbar.css('width', h);
+                this.$colorbar.css('height', h);
+            }
         },
 
         render_shapes: function() {
@@ -357,6 +365,70 @@
             this.render_layout();
         },
 
+        render_colorbar: async function() {
+
+            if (this.$colorbar) {
+                this.$colorbar.remove();
+            }
+            var cb = this.model.get('colorbar');
+            var start = 0,
+                end = 125,
+                reverseIntensity = false,
+                color = "";
+            for (const chann of this.model.get('channels')) {
+                if(chann.active) {
+                    color = chann.color;
+                    start = chann.window?.start;
+                    end = chann.window?.end;
+                    reverseIntensity = chann.reverseIntensity;
+                    break;
+                }
+            }
+            var lut_url = await FigureLutPicker.loadLuts()  // Ensure lut url and list are loaded
+            var lutBgPos = FigureLutPicker.getLutBackgroundPosition(color);
+            var isLUT = !(/^[0-9a-fA-F]+$/.test(color))  // check if it's a normal color or a LUT
+            var inverted_pos = {  // convenience variable for the colorbar template.
+                "left": "right",
+                "right": "left",
+                "top": "bottom",
+                "bottom": "top",
+            };
+            var orientation = {  // convenience variable for the colorbar template.
+                "left": "vertical",
+                "right": "vertical",
+                "top": "horizontal",
+                "bottom": "horizontal",
+            }
+            if (cb && cb.show) {
+                var cb_json = {
+                    position: cb.position,
+                    inv_position: inverted_pos[cb.position],
+                    orientation: orientation[cb.position],
+                    show: cb.show,
+                    thickness: cb.thickness,
+                    font_size: cb.font_size,
+                    axis_color: cb.axis_color,
+                    num_ticks: cb.num_ticks,
+                    tick_len: cb.tick_len,
+                    spacing: cb.spacing,
+                    label_margin: cb.label_margin,
+                    start: start,
+                    end: end,
+                    color: color,
+                    isLUT: isLUT,
+                    lutBgPos: lutBgPos,
+                    lut_url: lut_url,
+                    reverseIntensity: reverseIntensity,
+                };
+                var cb_html = this.colorbar_template(cb_json);
+                this.$el.append(cb_html);
+            }
+            this.$colorbar = $(".colorbar", this.$el);
+
+            // update colorbar size wrt current sizes
+            this.render_layout();
+        },
+
         render: function() {
             // This render() is only called when the panel is first created
             // to set up the elements. It then calls other render methods to
@@ -377,6 +449,7 @@
             this.render_image();
             this.render_labels();
             this.render_scalebar();     // also calls render_layout()
+            this.render_colorbar();
 
             // At this point, element is not ready for Raphael svg
             // If we wait a short time, works fine
diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
index 35558b4f2..3db48d1b1 100644
--- a/src/js/views/right_panel_view.js
+++ b/src/js/views/right_panel_view.js
@@ -15,6 +15,7 @@
     import InfoPanelView from "./info_panel_view";
     import ChannelSliderView from "./channel_slider_view";
     import ScalebarFormView from "./scalebar_form_view";
+    import ColorbarFormView from "./colorbar_form_view";
     import ZtSlidersView from "./zt_sliders_view";
 
     import image_display_options_template from '../../templates/image_display_options.template.html?raw';
@@ -590,6 +591,18 @@
             if (old_sb) {
                 old_sb.remove();
             }
+            // show colorbar form for selected panels
+            var old_cb = this.colorbar_form;
+            var $colorbar_form = $("#colorbar_form");
+
+            if (selected.length > 0) {
+                this.colorbar_form = new ColorbarFormView({models: selected});
+                this.colorbar_form.render();
+                $colorbar_form.empty().append(this.colorbar_form.$el);
+            }
+            if (old_cb) {
+                old_cb.remove();
+            }
 
             return this;
         }
diff --git a/src/templates/colorbar.template.html b/src/templates/colorbar.template.html
new file mode 100644
index 000000000..870478887
--- /dev/null
+++ b/src/templates/colorbar.template.html
@@ -0,0 +1,42 @@
+<div class="colorbar" style="<%= inv_position %>: 100%;">
+    <% if (show) { %>
+        <div class="colorbar_<%= position %>"
+             style="margin-<%= inv_position %>: <%= spacing %>px;">
+
+            <div class="colorbar_bg "
+                style="height: <%= thickness + 1 %>px;
+                        background-image: <%= isLUT ? 'url(' + lut_url + ')' : 'linear-gradient(to left, #' + color + ', black)' %>;
+                        <%= isLUT ? 'background-position: ' + lutBgPos : '' %>;
+                        <%= reverseIntensity ? 'transform: scaleX(-1);' : '' %>;">
+            </div>
+        </div>
+
+        <div class="colorbar_ticks_<%= position %>" style="border-<%= inv_position %>: 2px solid #<%= axis_color %>; margin-<%= inv_position %>: <%= thickness + spacing %>px; ">
+            <% for (let i = 0; i < num_ticks; i++) { %>
+                <div class="colorbar_tick_<%= orientation %>">
+                    <% if (position == "right" || position == "bottom") { %>
+                        <div class="colorbar_dash_<%= orientation %>"
+                            style="background-color: #<%= axis_color %>;
+                                   <%= position == 'right' ? 'width' : 'height' %>: <%= tick_len + 1 %>px;
+                                   <%= position %>: 1px">
+                        </div>
+                    <% } %>
+                        <span class="label colorbar_label_<%= orientation %>"
+                              style="color: #<%= axis_color %>;
+                                     font-size: <%= font_size %>px;
+                                     margin-<%= inv_position %>: <%= label_margin %>px;">
+                            <!-- Label is rounded to decimal proportionally to the spacing between each tick.  -->
+                            <%= ((end - start) * i / (num_ticks-1) + start).toFixed(Math.max(0, Math.ceil(-Math.log10((end - start) / num_ticks)))) %>
+                        </span>
+                    <% if (position == "left" || position == "top") { %>
+                        <div class="colorbar_dash_<%= orientation %>"
+                             style="background-color: #<%= axis_color %>;
+                                    <%= position == 'left' ? 'width' : 'height' %>: <%= tick_len + 1 %>px;
+                                    <%= position %>: 1px">
+                        </div>
+                    <% } %>
+                </div>
+            <% } %>
+        </div>
+    <% } %>
+</div>
diff --git a/src/templates/colorbar_form.template.html b/src/templates/colorbar_form.template.html
new file mode 100644
index 000000000..22e5cc309
--- /dev/null
+++ b/src/templates/colorbar_form.template.html
@@ -0,0 +1,115 @@
+<form class="colorbar_form">
+    <div class="row gy-2 gx-3 align-items-center" style="--bs-gutter-x: 0.3rem;">
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="">Thickness</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text colorbar-thickness form-control input-sm"
+            placeholder="Thickness" value="<%= thickness %>" style="width:52px" />
+        </div>
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="">Spacing</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text colorbar-spacing form-control input-sm"
+            placeholder="Height" value="<%= spacing %>" style="width:52px" />
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <button type="button" class="label-position btn btn-outline-secondary btn-sm dropdown-toggle"
+                    title="Position" data-bs-toggle="dropdown">
+                <i data-position="<%= position %>" class="bi-box-arrow-in-<%= position.replace('bottom', 'down').replace('top', 'up') %> dropdown_icon"></i>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="top" class="bi-box-arrow-up dropdown_icon"></i> Top</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="right" class="bi-box-arrow-right dropdown_icon"></i> Right</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="bottom" class="bi-box-arrow-down dropdown_icon"></i> Bottom</a>
+                </li>
+                <li><a class="dropdown-item" href="#">
+                    <i data-position="left" class="bi-box-arrow-left dropdown_icon"></i> Left</a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-auto input-group-sm" style="flex: 1 1 auto; padding-right: 0">
+            <% if (show){ %>
+                <button type="submit" class="show_colorbar btn btn-sm btn-success float-end">Show</button>
+            <% } else { %>
+                <button type="button" class="hide_colorbar btn btn-outline-secondary btn-sm float-end">Hide</button>
+            <% } %>
+        </div>
+    </div>
+    <div class="row gy-2 gx-3 align-items-center" style="margin: 5px 0px">
+        <div class="col-auto btn-group">
+            <label class="col-form-label col-form-label-sm" >Ticks</label>
+        </div>
+        <div class="col-auto btn-group">
+          <input type="number" class="colorbar-num-ticks input-sm form-control"
+            placeholder="Parameter" value="<%= num_ticks %>" style="width:52px"/>
+        </div>
+        <div class="col-auto btn-group">
+            <label class="col-form-label col-form-label-sm" style="">Length</label>
+        </div>
+        <div class="col-auto btn-group">
+          <input type="number" class="colorbar-tick-length input-sm form-control"
+            placeholder="Tick length" value="<%= tick_len %>" style="width:52px"/>
+        </div>
+        <div class="col-auto btn-group" style="padding: 0; width:50px;">
+            <button type="button" class="colorbar_font_size btn btn-outline-secondary btn-sm dropdown-toggle" title="Font Size"
+            data-bs-toggle="dropdown" style="width:33px;">
+                <span class='dropdown_icon'><%= font_size %></span>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu" role="menu">
+            <% _.each([6,8,10,12,14,18,21,24,36,48],function(p){
+                print ("<li><a class='dropdown-item' href='#'><span class='dropdown_icon'>"+p+"</span></a></li>")
+            }); %>
+            </ul>
+        </div>
+        <div class="form-group col-sm-auto btn-group">
+            <button type="button" class="colorbar-axis-color btn btn-outline-secondary btn-sm dropdown-toggle" title="Label Color"
+                data-bs-toggle="dropdown">
+                <span class="dropdown_icon" data-axis-color="<%= axis_color %>" style="background-color:#<%= axis_color %>">&nbsp &nbsp &nbsp</span>
+                <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu colorpicker" role="menu">
+                <!-- NB: dropdown_icon is picked on choosing dropdown, replaces icon in button above -->
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="000000" style="background-color:#000">&nbsp &nbsp &nbsp</span>&nbsp Black
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="0000FF" style="background-color:#00f">&nbsp &nbsp &nbsp</span>&nbsp Blue
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="00FF00" style="background-color:#0f0">&nbsp &nbsp &nbsp</span>&nbsp Green
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="FF0000" style="background-color:#f00">&nbsp &nbsp &nbsp</span>&nbsp Red
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="FFFF00" style="background-color:#ff0">&nbsp &nbsp &nbsp</span>&nbsp Yellow
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="FFFFFF" style="background-color:#fff">&nbsp &nbsp &nbsp</span>&nbsp White
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="FF00FF" style="background-color:#f0f">&nbsp &nbsp &nbsp</span>&nbsp Magenta
+                </a></li>
+                <li><a class="dropdown-item" href="#">
+                    <span class="dropdown_icon" data-axis-color="00FFFF" style="background-color:#0ff">&nbsp &nbsp &nbsp</span>&nbsp Cyan
+                </a></li>
+            </ul>
+        </div>
+        <div class="col-auto input-group-sm">
+            <label class="col-form-label col-form-label-sm" style="">Label margin</label>
+        </div>
+        <div class="form-group col-auto scalebar_length input-group-sm">
+            <input type="number" class="label-text colorbar-label-margin form-control input-sm"
+            placeholder="Label margin" value="<%= label_margin %>" style="width:52px" />
+        </div>
+    </div>
+</form>