diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/input.css b/crates/swc_css_parser/tests/fixture/hex-colors/input.css
index 61c77753e533..2fd80900901b 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/input.css
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/input.css
@@ -10,4 +10,8 @@ a {
   color: #0000;
   color: #ffff;
   color: #FFFF;
+  color: #1;
+  color: #FF;
+  color: #123456789;
+  color: #xyz;
 }
diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/output.json b/crates/swc_css_parser/tests/fixture/hex-colors/output.json
index 4d20231917aa..41e97f262fc1 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/output.json
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/output.json
@@ -2,7 +2,7 @@
   "type": "Stylesheet",
   "span": {
     "start": 0,
-    "end": 193,
+    "end": 256,
     "ctxt": 0
   },
   "rules": [
@@ -10,7 +10,7 @@
       "type": "QualifiedRule",
       "span": {
         "start": 0,
-        "end": 192,
+        "end": 255,
         "ctxt": 0
       },
       "prelude": {
@@ -74,7 +74,7 @@
         "type": "SimpleBlock",
         "span": {
           "start": 2,
-          "end": 192,
+          "end": 255,
           "ctxt": 0
         },
         "name": "{",
@@ -419,6 +419,130 @@
               }
             ],
             "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 193,
+              "end": 202,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 193,
+                "end": 198,
+                "ctxt": 0
+              },
+              "value": "color",
+              "raw": "color"
+            },
+            "value": [
+              {
+                "type": "HexColor",
+                "span": {
+                  "start": 200,
+                  "end": 202,
+                  "ctxt": 0
+                },
+                "value": "1",
+                "raw": "1"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 206,
+              "end": 216,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 206,
+                "end": 211,
+                "ctxt": 0
+              },
+              "value": "color",
+              "raw": "color"
+            },
+            "value": [
+              {
+                "type": "HexColor",
+                "span": {
+                  "start": 213,
+                  "end": 216,
+                  "ctxt": 0
+                },
+                "value": "FF",
+                "raw": "FF"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 220,
+              "end": 237,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 220,
+                "end": 225,
+                "ctxt": 0
+              },
+              "value": "color",
+              "raw": "color"
+            },
+            "value": [
+              {
+                "type": "HexColor",
+                "span": {
+                  "start": 227,
+                  "end": 237,
+                  "ctxt": 0
+                },
+                "value": "123456789",
+                "raw": "123456789"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 241,
+              "end": 252,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 241,
+                "end": 246,
+                "ctxt": 0
+              },
+              "value": "color",
+              "raw": "color"
+            },
+            "value": [
+              {
+                "type": "HexColor",
+                "span": {
+                  "start": 248,
+                  "end": 252,
+                  "ctxt": 0
+                },
+                "value": "xyz",
+                "raw": "xyz"
+              }
+            ],
+            "important": null
           }
         ]
       }
diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/span.rust-debug b/crates/swc_css_parser/tests/fixture/hex-colors/span.rust-debug
index 6014da9de27e..27d108b66ec0 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/span.rust-debug
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/span.rust-debug
@@ -6,8 +6,8 @@ error: Stylesheet
 3  | |   color: #ffffff;
 4  | |   color: #FFFFFF;
 ...  |
-12 | |   color: #FFFF;
-13 | | }
+16 | |   color: #xyz;
+17 | | }
    | |__^
 
 error: Rule
@@ -18,8 +18,8 @@ error: Rule
 3  | |   color: #ffffff;
 4  | |   color: #FFFFFF;
 ...  |
-12 | |   color: #FFFF;
-13 | | }
+16 | |   color: #xyz;
+17 | | }
    | |_^
 
 error: QualifiedRule
@@ -30,8 +30,8 @@ error: QualifiedRule
 3  | |   color: #ffffff;
 4  | |   color: #FFFFFF;
 ...  |
-12 | |   color: #FFFF;
-13 | | }
+16 | |   color: #xyz;
+17 | | }
    | |_^
 
 error: SelectorList
@@ -85,8 +85,8 @@ error: SimpleBlock
 3  | |   color: #ffffff;
 4  | |   color: #FFFFFF;
 ...  |
-12 | |   color: #FFFF;
-13 | | }
+16 | |   color: #xyz;
+17 | | }
    | |_^
 
 error: StyleBlock
@@ -551,3 +551,171 @@ error: HexColor
 12 |   color: #FFFF;
    |          ^^^^^
 
+error: StyleBlock
+  --> $DIR/tests/fixture/hex-colors/input.css:13:3
+   |
+13 |   color: #1;
+   |   ^^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/hex-colors/input.css:13:3
+   |
+13 |   color: #1;
+   |   ^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/hex-colors/input.css:13:3
+   |
+13 |   color: #1;
+   |   ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/hex-colors/input.css:13:3
+   |
+13 |   color: #1;
+   |   ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/hex-colors/input.css:13:10
+   |
+13 |   color: #1;
+   |          ^^
+
+error: Color
+  --> $DIR/tests/fixture/hex-colors/input.css:13:10
+   |
+13 |   color: #1;
+   |          ^^
+
+error: HexColor
+  --> $DIR/tests/fixture/hex-colors/input.css:13:10
+   |
+13 |   color: #1;
+   |          ^^
+
+error: StyleBlock
+  --> $DIR/tests/fixture/hex-colors/input.css:14:3
+   |
+14 |   color: #FF;
+   |   ^^^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/hex-colors/input.css:14:3
+   |
+14 |   color: #FF;
+   |   ^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/hex-colors/input.css:14:3
+   |
+14 |   color: #FF;
+   |   ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/hex-colors/input.css:14:3
+   |
+14 |   color: #FF;
+   |   ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/hex-colors/input.css:14:10
+   |
+14 |   color: #FF;
+   |          ^^^
+
+error: Color
+  --> $DIR/tests/fixture/hex-colors/input.css:14:10
+   |
+14 |   color: #FF;
+   |          ^^^
+
+error: HexColor
+  --> $DIR/tests/fixture/hex-colors/input.css:14:10
+   |
+14 |   color: #FF;
+   |          ^^^
+
+error: StyleBlock
+  --> $DIR/tests/fixture/hex-colors/input.css:15:3
+   |
+15 |   color: #123456789;
+   |   ^^^^^^^^^^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/hex-colors/input.css:15:3
+   |
+15 |   color: #123456789;
+   |   ^^^^^^^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/hex-colors/input.css:15:3
+   |
+15 |   color: #123456789;
+   |   ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/hex-colors/input.css:15:3
+   |
+15 |   color: #123456789;
+   |   ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/hex-colors/input.css:15:10
+   |
+15 |   color: #123456789;
+   |          ^^^^^^^^^^
+
+error: Color
+  --> $DIR/tests/fixture/hex-colors/input.css:15:10
+   |
+15 |   color: #123456789;
+   |          ^^^^^^^^^^
+
+error: HexColor
+  --> $DIR/tests/fixture/hex-colors/input.css:15:10
+   |
+15 |   color: #123456789;
+   |          ^^^^^^^^^^
+
+error: StyleBlock
+  --> $DIR/tests/fixture/hex-colors/input.css:16:3
+   |
+16 |   color: #xyz;
+   |   ^^^^^^^^^^^
+
+error: Declaration
+  --> $DIR/tests/fixture/hex-colors/input.css:16:3
+   |
+16 |   color: #xyz;
+   |   ^^^^^^^^^^^
+
+error: DeclarationName
+  --> $DIR/tests/fixture/hex-colors/input.css:16:3
+   |
+16 |   color: #xyz;
+   |   ^^^^^
+
+error: Ident
+  --> $DIR/tests/fixture/hex-colors/input.css:16:3
+   |
+16 |   color: #xyz;
+   |   ^^^^^
+
+error: Value
+  --> $DIR/tests/fixture/hex-colors/input.css:16:10
+   |
+16 |   color: #xyz;
+   |          ^^^^
+
+error: Color
+  --> $DIR/tests/fixture/hex-colors/input.css:16:10
+   |
+16 |   color: #xyz;
+   |          ^^^^
+
+error: HexColor
+  --> $DIR/tests/fixture/hex-colors/input.css:16:10
+   |
+16 |   color: #xyz;
+   |          ^^^^
+