[Colors] Create dedicated classes for HSL and HWB colors

This allows us to keep track of clipping/powerless components in these
spaces as well. Before the info was silently dropped when converting to RGB.

Drive-by: Fix a typo and introduce ColorXD utility types to denote "raw" multichannel colors.
Bug: 1073895
Change-Id: Ifbddd0f2ec8c9fafdc3e08429552030f228ddece
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4190009
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>

diff --git a/inspector_overlay/highlight_common.ts b/inspector_overlay/highlight_common.ts
index 29daa82..8bb46d4 100644
--- a/inspector_overlay/highlight_common.ts
+++ b/inspector_overlay/highlight_common.ts

@@ -28,7 +28,12 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import {rgbaToHsla, rgbaToHwba} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es_modules_import
+import {
+  rgbaToHsla,
+  rgbaToHwba,
+  type Color4D,
+} from '../front_end/core/common/ColorUtils.js';
 
 import {type Bounds, type PathCommands, type Quad} from './common.js';
 
@@ -254,11 +259,11 @@
   return buildPath(commands, bounds, emulationScaleFactor);
 }
 
-export function parseHexa(hexa: string): Array<number> {
-  return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(c => parseInt(c, 16) / 255);
+export function parseHexa(hexa: string): Color4D {
+  return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(c => parseInt(c, 16) / 255) as Color4D;
 }
 
-export function formatRgba(rgba: number[], colorFormat: 'rgb'|'hsl'|'hwb'): string {
+export function formatRgba(rgba: Color4D, colorFormat: 'rgb'|'hsl'|'hwb'): string {
   if (colorFormat === 'rgb') {
     const [r, g, b, a] = rgba;
     // rgb(r g b [ / a])
@@ -270,14 +275,14 @@
     const [h, s, l, a] = rgbaToHsla(rgba);
     // hsl(hdeg s l [ / a])
     return `hsl(${Math.round(h * 360)}deg ${Math.round(s * 100)} ${Math.round(l * 100)}${
-        a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
+        a === 1 ? '' : ' / ' + Math.round((a ?? 1) * 100) / 100})`;
   }
 
   if (colorFormat === 'hwb') {
     const [h, w, b, a] = rgbaToHwba(rgba);
     // hwb(hdeg w b [ / a])
     return `hwb(${Math.round(h * 360)}deg ${Math.round(w * 100)} ${Math.round(b * 100)}${
-        a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
+        a === 1 ? '' : ' / ' + Math.round((a ?? 1) * 100) / 100})`;
   }
 
   throw new Error('NOT_REACHED');