No entiendo que esta mal, solo el verde me falla

Español HTML-CSS
1

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.

  **Tu código hasta el momento**


<style>
body {
  background-color: #FFFFFF;
}

.green {
  background-color: hsl(120, 100 %, 50 %);
}

.cyan {
  background-color: hsl(180, 100 %, 50 %);
}

.blue {
  background-color: hsl(240, 100 %, 50 %);
}

div {
  display: inline-block;
  height: 100px;
  width: 100px;
}
</style>

<div class="green" style="background-color: green"></div>
<div class="cyan" style="background-color: cyan"></div>
<div class="blue" style="background-color: blue"></div>

  **Información de tu navegador:**

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0

Desafío: Ajusta el matiz de un color

Enlaza al desafío:

2

Bro, yo tenía el mismo problema, lo supuse pero no lo hice, hasta que vi a spenalozazelaya, es quitar el espacios entre números y porcentajes.

Ejemplo: background-color: hsl(240, 100%, 50%);