diff --git a/color-module/src/schemes/material_design_3/mod.rs b/color-module/src/schemes/material_design_3/mod.rs
index 2f9aba3..c0fac24 100644
--- a/color-module/src/schemes/material_design_3/mod.rs
+++ b/color-module/src/schemes/material_design_3/mod.rs
@@ -153,7 +153,7 @@ impl SchemeExport for MaterialDesign3Scheme {
                 swatch
                     .to_javascript_object_fields(name)
                     .into_iter()
-                    .map(|s| format!("  {}", s)),
+                    .map(|s| format!("    {}", s)),
             );
         }
         js_object.push("  }".to_string());
diff --git a/color-module/src/schemes/material_design_3/swatch.rs b/color-module/src/schemes/material_design_3/swatch.rs
index 2489d49..340aedc 100644
--- a/color-module/src/schemes/material_design_3/swatch.rs
+++ b/color-module/src/schemes/material_design_3/swatch.rs
@@ -25,6 +25,7 @@ impl M3PaletteSwatch {
 
     pub fn to_css_variables(&self, name: &str) -> Vec<String> {
         let mut variable_lines = Vec::new();
+        let name = name.replace('_', "-").to_lowercase();
 
         for &tone in SWATCH_TONES.iter() {
             let color = self.0.get(&tone).unwrap();
@@ -36,6 +37,7 @@ impl M3PaletteSwatch {
 
     pub fn to_scss_variables(&self, name: &str) -> Vec<String> {
         let mut variable_lines = Vec::new();
+        let name = name.replace('_', "-").to_lowercase();
 
         for &tone in SWATCH_TONES.iter() {
             let color = self.0.get(&tone).unwrap();