Support KDL color type mapping to rgb and rgba based on length

 src/config.rs                         |  4 +++-
 src/widget/container/parameters_bg.rs | 14 +++++++-------
 src/widget/container/treelist.rs      |  7 ++++++-
 src/widget/json_layout.rs             |  6 +++---
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/config.rs b/src/config.rs
index 8e9960e..6aff71c 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -174,7 +174,9 @@ pub fn update_kdl_in_memory(doc: &mut kdl::KdlDocument, key: &str, value: &str,
     let (kdl_val, kdl_ty) = if let Ok(b) = value.parse::<bool>() {
         (kdl::KdlValue::Bool(b), Some("bool"))
     } else if value.starts_with('#') {
-        (kdl::KdlValue::String(value.to_string()), Some("color"))
+        let s_clean = value.trim_start_matches('#');
+        let ty = if s_clean.len() == 8 { "rgba" } else { "rgb" };
+        (kdl::KdlValue::String(value.to_string()), Some(ty))
     } else if value.contains('.') {
         if let Ok(f) = value.parse::<f64>() {
             (kdl::KdlValue::Base10Float(f), Some("f64"))
diff --git a/src/widget/container/parameters_bg.rs b/src/widget/container/parameters_bg.rs
index 9198417..67b5019 100644
--- a/src/widget/container/parameters_bg.rs
+++ b/src/widget/container/parameters_bg.rs
@@ -71,7 +71,7 @@ impl ParametersBg {
                 38.0
             } else if p.2 == "text" || p.2.starts_with("spinbox") || p.2.starts_with("choice") {
                 42.0
-            } else if p.2.starts_with("color") {
+            } else if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                 40.0
             } else if p.2 == "button" || p.2 == "toggle" || p.2 == "checkbox" {
                 24.0
@@ -201,7 +201,7 @@ impl ParametersBg {
                 if let Some(cb) = &self.checkboxes[i] {
                     labels.extend(cb.text_labels());
                 }
-            } else if ptype.starts_with("color") {
+            } else if ptype.starts_with("color") || ptype == "rgb" || ptype == "rgba" {
                 if let Some(c) = &self.colors[i] {
                     labels.extend(c.text_labels());
                 }
@@ -394,7 +394,7 @@ impl Element for ParametersBg {
                             p.1 = val;
                         }
                     }
-                } else if p.2.starts_with("color") {
+                } else if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                     if let Some(c) = &mut self.colors[idx] {
                         c.unfocus();
                         if let Some(val) = c.get_value_string() {
@@ -701,7 +701,7 @@ impl Element for ParametersBg {
                         return true;
                     }
                 }
-            } else if p.2.starts_with("color") {
+            } else if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                 if let Some(c) = &mut self.colors[i] {
                     if c.mouse_input(button, state, px, py, ctx) {
                         if let Some(val) = c.get_value_string() {
@@ -974,7 +974,7 @@ impl Element for ParametersBg {
                             return true;
                         }
                     }
-                } else if p.2.starts_with("color") {
+                } else if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                     if let Some(c) = &mut self.colors[idx] {
                         if c.keyboard_input(event, ctx) {
                             if let Some(val) = c.get_value_string() {
@@ -1213,7 +1213,7 @@ impl Element for ParametersBg {
                 if let Some(cb) = &self.checkboxes[i] {
                     quads.extend(cb.extra_quads());
                 }
-            } else if p.2.starts_with("color") {
+            } else if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                 if let Some(c) = &self.colors[i] {
                     quads.extend(c.extra_quads());
                 }
@@ -1450,7 +1450,7 @@ impl ParamController for ParametersBg {
                 }
             }).collect();
             self.colors = self.display_params.iter().map(|p| {
-                if p.2.starts_with("color") {
+                if p.2.starts_with("color") || p.2 == "rgb" || p.2 == "rgba" {
                     let col = parse_hex_to_rgb(&p.1).unwrap_or([255, 255, 255]);
                     Some(ColorSelector::new(col).with_label(&p.0))
                 } else {
diff --git a/src/widget/container/treelist.rs b/src/widget/container/treelist.rs
index 3af08a0..9d9974b 100644
--- a/src/widget/container/treelist.rs
+++ b/src/widget/container/treelist.rs
@@ -429,7 +429,12 @@ impl Element for TreeList {
                         }
                         serde_json::Value::String(s) => {
                             if s.starts_with('#') {
-                                Some("color")
+                                let s_clean = s.trim_start_matches('#');
+                                if s_clean.len() == 8 {
+                                    Some("rgba")
+                                } else {
+                                    Some("rgb")
+                                }
                             } else if name == "font" || name.ends_with("_font") || name.ends_with(".font") {
                                 Some("font")
                             } else {
diff --git a/src/widget/json_layout.rs b/src/widget/json_layout.rs
index 2ae7b8c..0f29c55 100644
--- a/src/widget/json_layout.rs
+++ b/src/widget/json_layout.rs
@@ -113,7 +113,7 @@ impl JsonLayoutWidget {
                             }
                             Box::new(sb)
                         }
-                        "color" => {
+                        "color" | "rgb" | "rgba" => {
                             let col = w_conf.color.unwrap_or([255, 255, 255]);
                             let cs = ColorSelector::new(col).with_label(&text);
                             Box::new(cs)
@@ -185,7 +185,7 @@ impl JsonLayoutWidget {
                         }
                         Box::new(sb)
                     }
-                    "color" => {
+                    "color" | "rgb" | "rgba" => {
                         let col = w_conf.color.unwrap_or([255, 255, 255]);
                         let cs = ColorSelector::new(col).with_label(&text);
                         Box::new(cs)
@@ -272,7 +272,7 @@ impl JsonLayoutWidget {
                     "button" => 24.0 + top_room,
                     "label" => 18.0 + top_room,
                     "spinbox" => crate::layout::spinbox_height() + top_room,
-                    "color" => crate::layout::color_selector_height() + top_room,
+                    "color" | "rgb" | "rgba" => crate::layout::color_selector_height() + top_room,
                     "slider" => 22.0 + top_room,
                     _ => 24.0,
                 };