diff --git a/src/lib.rs b/src/lib.rs
index 5ec89820..20267bda 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -16376,6 +16376,7 @@ mod tests {
         --g: rgb(0 var(--x) 0 / var(--alpha));
         --h: rgb(0 0 var(--x) / var(--alpha));
         --i: rgb(none 0 0 / var(--alpha));
+        --j: rgb(from yellow r g b / var(--alpha));
       }
       "#,
       indoc! { r#"
@@ -16389,6 +16390,7 @@ mod tests {
           --g: rgb(0 var(--x) 0 / var(--alpha));
           --h: rgb(0 0 var(--x) / var(--alpha));
           --i: rgb(none 0 0 / var(--alpha));
+          --j: rgba(255, 255, 0, var(--alpha));
         }
       "#},
       Browsers {
@@ -16409,6 +16411,7 @@ mod tests {
         --g: rgb(0 var(--x) 0 / var(--alpha));
         --h: rgb(0 0 var(--x) / var(--alpha));
         --i: rgb(none 0 0 / var(--alpha));
+        --j: rgb(from yellow r g b / var(--alpha));
       }
       "#,
       indoc! { r#"
@@ -16422,6 +16425,7 @@ mod tests {
           --g: rgb(0 var(--x) 0 / var(--alpha));
           --h: rgb(0 0 var(--x) / var(--alpha));
           --i: rgb(none 0 0 / var(--alpha));
+          --j: rgb(255 255 0 / var(--alpha));
         }
       "#},
       Browsers {
@@ -16442,6 +16446,7 @@ mod tests {
         --g: hsl(0 0 var(--x) / var(--alpha));
         --h: hsl(270 100% 50% / calc(var(--alpha) / 2));
         --i: hsl(none 100% 50% / var(--alpha));
+        --j: hsl(from yellow h s l / var(--alpha));
       }
       "#,
       indoc! { r#"
@@ -16455,6 +16460,7 @@ mod tests {
           --g: hsl(0 0 var(--x) / var(--alpha));
           --h: hsla(270, 100%, 50%, calc(var(--alpha) / 2));
           --i: hsl(none 100% 50% / var(--alpha));
+          --j: hsla(60, 100%, 50%, var(--alpha));
         }
       "#},
       Browsers {
diff --git a/src/properties/custom.rs b/src/properties/custom.rs
index 0f03af00..5ca2c4b7 100644
--- a/src/properties/custom.rs
+++ b/src/properties/custom.rs
@@ -11,7 +11,7 @@ use crate::targets::{should_compile, Targets};
 use crate::traits::{Parse, ParseWithOptions, ToCss};
 use crate::values::angle::Angle;
 use crate::values::color::{
-  parse_hsl_hwb_components, parse_rgb_components, ColorFallbackKind, ComponentParser, CssColor, RGBA,
+  parse_hsl_hwb_components, parse_rgb_components, ColorFallbackKind, ComponentParser, CssColor, HSL, RGBA,
 };
 use crate::values::ident::{CustomIdent, DashedIdent, DashedIdentReference, Ident};
 use crate::values::length::{serialize_dimension, LengthValue};
@@ -1526,11 +1526,11 @@ impl<'i> UnresolvedColor<'i> {
     input: &mut Parser<'i, 't>,
     options: &ParserOptions<'_, 'i>,
   ) -> Result<Self, ParseError<'i, ParserError<'i>>> {
-    let parser = ComponentParser::new(false);
+    let mut parser = ComponentParser::new(false);
     match_ignore_ascii_case! { &*f,
       "rgb" => {
         input.parse_nested_block(|input| {
-          let (r, g, b, is_legacy) = parse_rgb_components(input, &parser)?;
+          let (r, g, b, is_legacy) = parse_rgb_components(input, &mut parser)?;
           if is_legacy {
             return Err(input.new_custom_error(ParserError::InvalidValue))
           }
@@ -1541,7 +1541,7 @@ impl<'i> UnresolvedColor<'i> {
       },
       "hsl" => {
         input.parse_nested_block(|input| {
-          let (h, s, l, is_legacy) = parse_hsl_hwb_components(input, &parser, false)?;
+          let (h, s, l, is_legacy) = parse_hsl_hwb_components::<HSL>(input, &mut parser, false)?;
           if is_legacy {
             return Err(input.new_custom_error(ParserError::InvalidValue))
           }
diff --git a/src/values/color.rs b/src/values/color.rs
index 5efab0b6..f1e2669d 100644
--- a/src/values/color.rs
+++ b/src/values/color.rs
@@ -1040,8 +1040,7 @@ fn parse_hsl_hwb<'i, 't, T: TryFrom<CssColor> + ColorSpace>(
 ) -> Result<(f32, f32, f32, f32), ParseError<'i, ParserError<'i>>> {
   // https://drafts.csswg.org/css-color-4/#the-hsl-notation
   let res = input.parse_nested_block(|input| {
-    parser.parse_relative::<T>(input)?;
-    let (h, a, b, is_legacy) = parse_hsl_hwb_components(input, parser, allows_legacy)?;
+    let (h, a, b, is_legacy) = parse_hsl_hwb_components::<T>(input, parser, allows_legacy)?;
     let alpha = if is_legacy {
       parse_legacy_alpha(input, parser)?
     } else {
@@ -1055,11 +1054,12 @@ fn parse_hsl_hwb<'i, 't, T: TryFrom<CssColor> + ColorSpace>(
 }
 
 #[inline]
-pub(crate) fn parse_hsl_hwb_components<'i, 't>(
+pub(crate) fn parse_hsl_hwb_components<'i, 't, T: TryFrom<CssColor> + ColorSpace>(
   input: &mut Parser<'i, 't>,
-  parser: &ComponentParser,
+  parser: &mut ComponentParser,
   allows_legacy: bool,
 ) -> Result<(f32, f32, f32, bool), ParseError<'i, ParserError<'i>>> {
+  parser.parse_relative::<T>(input)?;
   let h = parse_angle_or_number(input, parser)?;
   let is_legacy_syntax =
     allows_legacy && parser.from.is_none() && !h.is_nan() && input.try_parse(|p| p.expect_comma()).is_ok();
@@ -1081,7 +1081,6 @@ fn parse_rgb<'i, 't>(
 ) -> Result<CssColor, ParseError<'i, ParserError<'i>>> {
   // https://drafts.csswg.org/css-color-4/#rgb-functions
   let res = input.parse_nested_block(|input| {
-    parser.parse_relative::<SRGB>(input)?;
     let (r, g, b, is_legacy) = parse_rgb_components(input, parser)?;
     let alpha = if is_legacy {
       parse_legacy_alpha(input, parser)?
@@ -1106,8 +1105,9 @@ fn parse_rgb<'i, 't>(
 #[inline]
 pub(crate) fn parse_rgb_components<'i, 't>(
   input: &mut Parser<'i, 't>,
-  parser: &ComponentParser,
+  parser: &mut ComponentParser,
 ) -> Result<(f32, f32, f32, bool), ParseError<'i, ParserError<'i>>> {
+  parser.parse_relative::<SRGB>(input)?;
   let red = parser.parse_number_or_percentage(input)?;
   let is_legacy_syntax =
     parser.from.is_none() && !red.unit_value().is_nan() && input.try_parse(|p| p.expect_comma()).is_ok();