diff --git a/circuitpython/utils/devices.py b/circuitpython/utils/devices.py
index 3e27f12..9620d58 100644
--- a/circuitpython/utils/devices.py
+++ b/circuitpython/utils/devices.py
@@ -108,7 +108,7 @@ def color(self, color:tuple) -> None:
     def update_colors(self) -> None:
         """ update the backgroundcolor and color based on type
         """
-        if self.type in ["blank", "group"]:
+        if self.type in [None, "group"]:
             self._label.background_color = 0x000000
             self._label.color = 0xffffff
         else:
@@ -117,12 +117,14 @@ def update_colors(self) -> None:
 
         self._set_led(self.color)
 
-    def _set_led(self, color:tuple[int, int, int]) -> None:
+    def _set_led(self, color:list[int, int, int] | str) -> None:
         """ set and update the led color
 
         Args:
-            color (tuple): the led color (R, G, B)
+            color (list | string): the led color (R, G, B) | rrggbb
         """
+        if isinstance(color, str): 
+            color = (int(color[0:2], 16), int(color[2:4], 16), int(color[4:6], 16))
         self._macropad.pixels[self._index] = color
         self._macropad.pixels.show()
 
@@ -131,7 +133,7 @@ def clear_props(self) -> None:
         """
         self._label.text = ""
         self._type = None
-        self._color = (0, 0, 0)
+        self._color = '000000'
         self._func = None
         self._func_args = None
 
@@ -158,7 +160,7 @@ def _on_pressed(self) -> None:
         """ Action that triggered when Key is pressed
         """
         if self._func:
-            self._set_led((255, 255, 255))
+            self._set_led('ffffff')
             self.call_func()
     
     def _on_released(self) -> None:
diff --git a/webui/js/modules/classes/Dialogs.js b/webui/js/modules/classes/Dialogs.js
index dc230fd..708aaaa 100644
--- a/webui/js/modules/classes/Dialogs.js
+++ b/webui/js/modules/classes/Dialogs.js
@@ -919,7 +919,7 @@ export class EditDialog extends BaseDialog {
 
         if (values.type !== 'blank') {
             values.label = this.inputs.label.value;
-            values.color = utils.hexToRGB(this.inputs.colorPicker.value);
+            values.color = this.inputs.colorPicker.value.slice(1);
             values.content = this.keyInstance.content.length === 0 ? undefined : this.keyInstance.content;
         }
 
@@ -956,9 +956,9 @@ export class EditDialog extends BaseDialog {
         this.inputs.container.classList.add(key.type);
 
         this.inputs.label.value = key.label;
-
-        this.inputs.colorPicker.value = utils.rgbToHex(key.color);
-        this.inputs.colorText.value = utils.rgbToHex(key.color).toUpperCase();
+        
+        this.inputs.colorPicker.value = `#${utils.validateHex(key.color)}`;
+        this.inputs.colorText.value = `#${utils.validateHex(key.color).toUpperCase()}`;
 
         switch (key.type) {
             case 'macro':
diff --git a/webui/js/modules/classes/KeyContainer.js b/webui/js/modules/classes/KeyContainer.js
index fe0dc72..c88e27d 100644
--- a/webui/js/modules/classes/KeyContainer.js
+++ b/webui/js/modules/classes/KeyContainer.js
@@ -53,13 +53,10 @@ export default class KeyContainer {
     _initDOM() {
         let DOM = {};
 
-        const [r, g, b] = this.color;
-        const style = `background-color: rgb(${r},${g},${b})`;
-
         DOM.container = utils.create({
             attributes: {
                 class: 'key-container',
-                style: style,
+                style: `background-color: #${utils.validateHex(this.color)}`,
             },
             children: [
                 (DOM.type = utils.create({
@@ -281,13 +278,12 @@ export default class KeyContainer {
 
     /**
      * Sets the color for the KeyContainer.
-     * @param {number[]} [color=[255, 255, 255]] - The color to set for the KeyContainer.
+     * @param {string} [color='ffffff'] - The color to set for the KeyContainer.
      */
-    setColor(color = [255, 255, 255]) {
-        this.color = color;
-        const [r, g, b] = this.color;
+    setColor(color = 'ffffff') {
+        this.color = utils.validateHex(color);
         utils.style(this.DOM.container, {
-            'background-color': `rgb(${r},${g},${b})`,
+            'background-color': `#${this.color}`,
         });
     }
 
diff --git a/webui/js/modules/utils.js b/webui/js/modules/utils.js
index 678b852..afd0533 100644
--- a/webui/js/modules/utils.js
+++ b/webui/js/modules/utils.js
@@ -92,23 +92,32 @@ export function capitalize(s) {
  * @returns {Array} - An array representing the RGB color values [R, G, B].
  */
 export function hexToRGB(hexcolor) {
-    const r = parseInt(hexcolor.substr(1, 2), 16);
-    const g = parseInt(hexcolor.substr(3, 2), 16);
-    const b = parseInt(hexcolor.substr(5, 2), 16);
+    const r = parseInt(hexcolor.substring(1, 3), 16);
+    const g = parseInt(hexcolor.substring(3, 5), 16);
+    const b = parseInt(hexcolor.substring(5, 7), 16);
     return [r, g, b];
 }
 
 /**
  * Converts an RGB color array to a hexadecimal color string.
  * @param {Array} rgb - An array representing the RGB color values [R, G, B].
- * @returns {string} - The hexadecimal color string (e.g., '#RRGGBB').
+ * @returns {string} - The hexadecimal color string (e.g. 'RRGGBB').
  */
 export function rgbToHex([r, g, b]) {
     const intToHex = (c) => {
         const hex = c.toString(16);
         return hex.length == 1 ? '0' + hex : hex;
     };
-    return '#' + intToHex(r) + intToHex(g) + intToHex(b);
+    return intToHex(r) + intToHex(g) + intToHex(b);
+}
+
+/**
+ * Validates and converts RGB color objects to hex format if needed.
+ * @param {string|object} color - The color in hex format or RGB object.
+ * @returns {string} - The color in hex format (e.g. 'RRGGBB').
+ */
+export function validateHex(color) {
+    return typeof color === 'object' ? rgbToHex(color) : color;
 }
 
 /**
@@ -190,7 +199,7 @@ export function convertJsonToFileIds(baseData) {
                 dataStore[keyId] = {
                     type: "group",
                     label: item.label,
-                    color: item.color,
+                    color: validateHex(item.color),
                     content: processContent(item.content),
                     encoder: {
                         switch: item.encoder.switch,
@@ -205,7 +214,7 @@ export function convertJsonToFileIds(baseData) {
                 dataStore[fileId] = {
                     type: "macro",
                     label: item.label,
-                    color: item.color,
+                    color: validateHex(item.color),
                     content: item.content
                 };
                 processedContent.push(fileId);
@@ -248,7 +257,7 @@ export function restoreJsonFromFileIds(dataStore) {
                     let groupData = {
                         type: "group",
                         label: data.label,
-                        color: data.color,
+                        color: validateHex(data.color),
                         content: loadContent(data.content),
                         encoder: {
                             switch: data.encoder.switch,
@@ -261,7 +270,7 @@ export function restoreJsonFromFileIds(dataStore) {
                     let macroData = {
                         type: "macro",
                         label: data.label,
-                        color: data.color,
+                        color: validateHex(data.color),
                         content: data.content
                     };
                     content.push(macroData);
@@ -295,13 +304,13 @@ export const defaultKeys = {
     macro: {
         type: 'macro',
         label: 'unkown',
-        color: [255, 255, 255],
+        color: 'ffffff',
         content: []
     },
     group: {
         type: 'group',
         label: 'unkown',
-        color: [255, 255, 255],
+        color: 'ffffff',
         content: [],
         encoder: {
             switch: [],
@@ -312,7 +321,7 @@ export const defaultKeys = {
     close: {
         type: 'macro',
         label: '<-',
-        color: [18, 18, 18],
+        color: '121212',
         content: [{ sys: 'close_group' }],
     }
 };
\ No newline at end of file