diff --git a/src/builtin/color/hsl.rs b/src/builtin/color/hsl.rs
index 8575890..7581457 100644
--- a/src/builtin/color/hsl.rs
+++ b/src/builtin/color/hsl.rs
@@ -2,6 +2,7 @@ use std::collections::BTreeMap;
 
 use super::Builtin;
 use crate::color::Color;
+use crate::common::QuoteKind;
 use crate::units::Unit;
 use crate::value::{Number, Value};
 
@@ -133,6 +134,7 @@ pub(crate) fn register(f: &mut BTreeMap<String, Builtin>) {
         max_args!(args, 1);
         let color = match arg!(args, 0, "color").eval() {
             Value::Color(c) => c,
+            Value::Dimension(n, u) => return Ok(Value::Ident(format!("grayscale({}{})", n, u), QuoteKind::None)),
             v => return Err(format!("$color: {} is not a color.", v).into()),
         };
         Ok(Value::Color(color.desaturate(Number::from(1))))
diff --git a/tests/color.rs b/tests/color.rs
index 52aea8b..7b63bd8 100644
--- a/tests/color.rs
+++ b/tests/color.rs
@@ -391,6 +391,14 @@ test!(
     "a {\n  color: grayscale(red);\n}\n",
     "a {\n  color: gray;\n}\n"
 );
+test!(
+    grayscale_number,
+    "a {\n  color: grayscale(15%);\n}\n"
+);
+// test!(
+//     grayscale_number_casing,
+//     "a {\n  color: grAyscaLe(15%);\n}\n"
+// );
 test!(
     complement,
     "a {\n  color: complement(red);\n}\n",