Fix demo: grid area naming

src/app/app.component.scss

@@ -35,7 +35,7 @@ aside {
     width: 100%;
     grid-template:
         "lum    .       alpha  " 35px
-        "red    green   blue   " 35px
+        "cred   cgreen  cblue  " 35px
         "hue    sat     value  " 35px
         "color  opacity .      " 35px
         "button button  button " 70px / 1fr 1fr 1fr;
@@ -153,9 +153,9 @@ button {
 .luminosity { grid-area: lum; span::before{ background:linear-gradient(90deg, black, white)}}
 .maskColor { grid-area: color;}
 .maskOpacity{ grid-area: opacity;}
-.red { grid-area: red; span::before{ background: red;}}
-.green { grid-area: green; span::before{ background: green;}}
-.blue { grid-area: blue; span::before{ background: blue;}}
+.red { grid-area: cred; span::before{ background: red;}}
+.green { grid-area: cgreen; span::before{ background: green;}}
+.blue { grid-area: cblue; span::before{ background: blue;}}
 .hue {grid-area: hue; span::before{ background: var(--rainbow-bg);}}
 .saturation { grid-area: sat; span::before{ background:linear-gradient(90deg, #808080, red);}}
 .value{ grid-area: value; span::before{ background:linear-gradient(90deg, black, white);}}