devtools-tracing 1.1.1 → 1.2.0

package/lib/front_end/core/common/Color.ts

@@ -1,2506 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-/*
- * Copyright (C) 2009 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (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 * as Platform from '../platform/platform.js';
-
-import {ColorConverter} from './ColorConverter.js';
-import {
-  blendColors,
-  type Color3D,
-  type Color4D,
-  type Color4DOr3D,
-  contrastRatioAPCA,
-  desiredLuminanceAPCA,
-  luminance,
-  luminanceAPCA,
-  rgbToHsl,
-  rgbToHwb,
-} from './ColorUtils.js';
-
-/**
- * <hue> is defined as a <number> or <angle>
- * and we hold this in degrees. However, after
- * the conversions, these degrees can result in
- * negative values. That's why we normalize the hue to be
- * between [0 - 360].
- **/
-function normalizeHue(hue: number): number {
-  // Even though it is highly unlikely, hue can be
-  // very negative like -400. The initial modulo
-  // operation makes sure that the if the number is
-  // negative, it is between [-360, 0].
-  return ((hue % 360) + 360) % 360;
-}
-
-/**
- * Parses angle in the form of
- * `<angle>deg`, `<angle>turn`, `<angle>grad and `<angle>rad`
- * and returns the canonicalized `degree`.
- **/
-function parseAngle(angleText: string): number|null {
-  const angle = angleText.replace(/(deg|g?rad|turn)$/, '');
-  // @ts-expect-error: isNaN can accept strings
-  if (isNaN(angle) || angleText.match(/\s+(deg|g?rad|turn)/)) {
-    return null;
-  }
-
-  const number = parseFloat(angle);
-  if (angleText.includes('turn')) {
-    // 1turn === 360deg
-    return number * 360;
-  }
-
-  if (angleText.includes('grad')) {
-    // 1grad === 0.9deg
-    return number * 9 / 10;
-  }
-
-  if (angleText.includes('rad')) {
-    // πrad === 180deg
-    return number * 180 / Math.PI;
-  }
-
-  // 1deg === 1deg ^_^
-  return number;
-}
-
-/** Returns the `Format` equivalent from the format text **/
-export function getFormat(formatText: string): Format|null {
-  switch (formatText) {
-    case Format.HEX:
-      return Format.HEX;
-    case Format.HEXA:
-      return Format.HEXA;
-    case Format.RGB:
-      return Format.RGB;
-    case Format.RGBA:
-      return Format.RGBA;
-    case Format.HSL:
-      return Format.HSL;
-    case Format.HSLA:
-      return Format.HSLA;
-    case Format.HWB:
-      return Format.HWB;
-    case Format.HWBA:
-      return Format.HWBA;
-    case Format.LCH:
-      return Format.LCH;
-    case Format.OKLCH:
-      return Format.OKLCH;
-    case Format.LAB:
-      return Format.LAB;
-    case Format.OKLAB:
-      return Format.OKLAB;
-  }
-
-  return getColorSpace(formatText);
-}
-
-// Returns the `ColorSpace` equivalent from the color space text
-type ColorSpace = Format.SRGB|Format.SRGB_LINEAR|Format.DISPLAY_P3|Format.A98_RGB|Format.PROPHOTO_RGB|
-                  Format.REC_2020|Format.XYZ|Format.XYZ_D50|Format.XYZ_D65;
-function getColorSpace(colorSpaceText: string): ColorSpace|null {
-  switch (colorSpaceText) {
-    case Format.SRGB:
-      return Format.SRGB;
-    case Format.SRGB_LINEAR:
-      return Format.SRGB_LINEAR;
-    case Format.DISPLAY_P3:
-      return Format.DISPLAY_P3;
-    case Format.A98_RGB:
-      return Format.A98_RGB;
-    case Format.PROPHOTO_RGB:
-      return Format.PROPHOTO_RGB;
-    case Format.REC_2020:
-      return Format.REC_2020;
-    case Format.XYZ:
-      return Format.XYZ;
-    case Format.XYZ_D50:
-      return Format.XYZ_D50;
-    case Format.XYZ_D65:
-      return Format.XYZ_D65;
-  }
-
-  return null;
-}
-
-export const enum ColorChannel {
-  A = 'a',
-  ALPHA = 'alpha',
-  B = 'b',
-  C = 'c',
-  G = 'g',
-  H = 'h',
-  L = 'l',
-  R = 'r',
-  S = 's',
-  W = 'w',
-  X = 'x',
-  Y = 'y',
-  Z = 'z',
-}
-
-/**
- * Percents in color spaces are mapped to ranges.
- * These ranges change based on the syntax.
- * For example, for 'C' in lch() c: 0% = 0, 100% = 150.
- * See: https://www.w3.org/TR/css-color-4/#funcdef-lch
- * Some percentage values can be negative
- * though their ranges don't change depending on the sign
- * (for now, according to spec).
- * @param percent % value of the number. 42 for 42%.
- * @param range Range of [min, max]. Including `min` and `max`.
- */
-function mapPercentToRange(percent: number, range: [number, number]): number {
-  const sign = Math.sign(percent);
-  const absPercent = Math.abs(percent);
-  const [outMin, outMax] = range;
-
-  return sign * (absPercent * (outMax - outMin) / 100 + outMin);
-}
-
-interface SplitColorFunctionParametersOptions {
-  allowCommas: boolean;
-  convertNoneToZero: boolean;
-}
-
-export function parse(text: string): Color|null {
-  // #hex, nickname
-  if (!text.match(/\s/)) {
-    const match = text.toLowerCase().match(/^(?:#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})|(\w+))$/i);
-    if (match) {
-      if (match[1]) {
-        return Legacy.fromHex(match[1], text);
-      }
-
-      if (match[2]) {
-        return Nickname.fromName(match[2], text);
-      }
-
-      return null;
-    }
-  }
-
-  // rgb/rgba(), hsl/hsla(), hwb/hwba(), lch(), oklch(), lab(), oklab() and color()
-  const match =
-      text.toLowerCase().match(/^\s*(?:(rgba?)|(hsla?)|(hwba?)|(lch)|(oklch)|(lab)|(oklab)|(color))\((.*)\)\s*$/);
-  if (match) {
-    const isRgbaMatch = Boolean(match[1]);   // rgb/rgba()
-    const isHslaMatch = Boolean(match[2]);   // hsl/hsla()
-    const isHwbaMatch = Boolean(match[3]);   // hwb/hwba()
-    const isLchMatch = Boolean(match[4]);    // lch()
-    const isOklchMatch = Boolean(match[5]);  // oklch()
-    const isLabMatch = Boolean(match[6]);    // lab()
-    const isOklabMatch = Boolean(match[7]);  // oklab()
-    const isColorMatch = Boolean(match[8]);  // color()
-    const valuesText = match[9];
-
-    // Parse color function first because extracting values for
-    // this function is not the same as the other ones
-    // so, we're not using any of the logic below.
-    if (isColorMatch) {
-      return ColorFunction.fromSpec(text, valuesText);
-    }
-
-    const isOldSyntax = isRgbaMatch || isHslaMatch || isHwbaMatch;
-    const allowCommas = isRgbaMatch || isHslaMatch;
-    const convertNoneToZero = !isOldSyntax;  // Convert 'none' keyword to zero in new syntaxes
-
-    const values = splitColorFunctionParameters(valuesText, {allowCommas, convertNoneToZero});
-    if (!values) {
-      return null;
-    }
-    const spec: ColorParameterSpec = [values[0], values[1], values[2], values[3]];
-    if (isRgbaMatch) {
-      return Legacy.fromRGBAFunction(values[0], values[1], values[2], values[3], text);
-    }
-
-    if (isHslaMatch) {
-      return HSL.fromSpec(spec, text);
-    }
-
-    if (isHwbaMatch) {
-      return HWB.fromSpec(spec, text);
-    }
-
-    if (isLchMatch) {
-      return LCH.fromSpec(spec, text);
-    }
-
-    if (isOklchMatch) {
-      return Oklch.fromSpec(spec, text);
-    }
-
-    if (isLabMatch) {
-      return Lab.fromSpec(spec, text);
-    }
-
-    if (isOklabMatch) {
-      return Oklab.fromSpec(spec, text);
-    }
-  }
-
-  return null;
-}
-
-/**
- * Split the color parameters of (e.g.) rgb(a), hsl(a), hwb(a) functions.
- */
-function splitColorFunctionParameters(
-    content: string, {allowCommas, convertNoneToZero}: SplitColorFunctionParametersOptions): string[]|null {
-  const components = content.trim();
-  let values: string[] = [];
-
-  if (allowCommas) {
-    values = components.split(/\s*,\s*/);
-  }
-  if (!allowCommas || values.length === 1) {
-    values = components.split(/\s+/);
-    if (values[3] === '/') {
-      values.splice(3, 1);
-      if (values.length !== 4) {
-        return null;
-      }
-    } else if (
-        (values.length > 2 && values[2].indexOf('/') !== -1) || (values.length > 3 && values[3].indexOf('/') !== -1)) {
-      const alpha = values.slice(2, 4).join('');
-      values = values.slice(0, 2).concat(alpha.split(/\//)).concat(values.slice(4));
-    } else if (values.length >= 4) {
-      return null;
-    }
-  }
-  if (values.length !== 3 && values.length !== 4 || values.indexOf('') > -1) {
-    return null;
-  }
-
-  // Question: what should we do with `alpha` being none?
-  if (convertNoneToZero) {
-    return values.map(value => value === 'none' ? '0' : value);
-  }
-
-  return values;
-}
-
-function clamp(value: number, {min, max}: {min?: number, max?: number}): number;
-function clamp(value: null, {min, max}: {min?: number, max?: number}): null;
-function clamp(value: number|null, {min, max}: {min?: number, max?: number}): number|null;
-function clamp(value: number|null, {min, max}: {min?: number, max?: number}): number|null {
-  if (value === null) {
-    return value;
-  }
-  if (min !== undefined) {
-    value = Math.max(value, min);
-  }
-  if (max !== undefined) {
-    value = Math.min(value, max);
-  }
-  return value;
-}
-
-function parsePercentage(value: string, range: [number, number]): number|null {
-  if (!value.endsWith('%')) {
-    return null;
-  }
-  const percentage = parseFloat(value.substr(0, value.length - 1));
-  return isNaN(percentage) ? null : mapPercentToRange(percentage, range);
-}
-
-function parseNumber(value: string): number|null {
-  const number = parseFloat(value);
-  return isNaN(number) ? null : number;
-}
-
-function parseAlpha(value: string|undefined): number|null {
-  if (value === undefined) {
-    return null;
-  }
-  return clamp(parsePercentage(value, [0, 1]) ?? parseNumber(value), {min: 0, max: 1});
-}
-
-/**
- *
- * @param value Text value to be parsed in the form of 'number|percentage'.
- * @param range Range to map the percentage.
- * @returns If it is not percentage, returns number directly; otherwise,
- * maps the percentage to the range. For example:
- * - 30% in range [0, 100] is 30
- * - 20% in range [0, 1] is 0.5
- */
-function parsePercentOrNumber(value: string, range: [number, number] = [0, 1]): number|null {
-  // @ts-expect-error: isNaN can accept strings
-  if (isNaN(value.replace('%', ''))) {
-    return null;
-  }
-  const parsed = parseFloat(value);
-
-  if (value.indexOf('%') !== -1) {
-    if (value.indexOf('%') !== value.length - 1) {
-      return null;
-    }
-    return mapPercentToRange(parsed, range);
-  }
-  return parsed;
-}
-
-function parseRgbNumeric(value: string): number|null {
-  const parsed = parsePercentOrNumber(value);
-  if (parsed === null) {
-    return null;
-  }
-
-  if (value.indexOf('%') !== -1) {
-    return parsed;
-  }
-  return parsed / 255;
-}
-
-export function parseHueNumeric(value: string): number|null {
-  const angle = value.replace(/(deg|g?rad|turn)$/, '');
-  // @ts-expect-error: isNaN can accept strings
-  if (isNaN(angle) || value.match(/\s+(deg|g?rad|turn)/)) {
-    return null;
-  }
-  const number = parseFloat(angle);
-
-  if (value.indexOf('turn') !== -1) {
-    return number % 1;
-  }
-  if (value.indexOf('grad') !== -1) {
-    return (number / 400) % 1;
-  }
-  if (value.indexOf('rad') !== -1) {
-    return (number / (2 * Math.PI)) % 1;
-  }
-  return (number / 360) % 1;
-}
-
-function parseSatLightNumeric(value: string): number|null {
-  // @ts-expect-error: isNaN can accept strings
-  if (value.indexOf('%') !== value.length - 1 || isNaN(value.replace('%', ''))) {
-    return null;
-  }
-  const parsed = parseFloat(value);
-  return parsed / 100;
-}
-
-function parseAlphaNumeric(value: string): number|null {
-  return parsePercentOrNumber(value);
-}
-
-function hsva2hsla(hsva: Color4D): Color4D {
-  const h = hsva[0];
-  let s: 0|number = hsva[1];
-  const v = hsva[2];
-
-  const t = (2 - s) * v;
-  if (v === 0 || s === 0) {
-    s = 0;
-  } else {
-    s *= v / (t < 1 ? t : 2 - t);
-  }
-
-  return [h, s, t / 2, hsva[3]];
-}
-
-export function hsl2rgb(hsl: Color4D): Color4D {
-  const h = hsl[0];
-  let s: 0|number = hsl[1];
-  const l = hsl[2];
-
-  function hue2rgb(p: number, q: number, h: number): number {
-    if (h < 0) {
-      h += 1;
-    } else if (h > 1) {
-      h -= 1;
-    }
-
-    if ((h * 6) < 1) {
-      return p + (q - p) * h * 6;
-    }
-    if ((h * 2) < 1) {
-      return q;
-    }
-    if ((h * 3) < 2) {
-      return p + (q - p) * ((2 / 3) - h) * 6;
-    }
-    return p;
-  }
-
-  if (s < 0) {
-    s = 0;
-  }
-
-  let q;
-  if (l <= 0.5) {
-    q = l * (1 + s);
-  } else {
-    q = l + s - (l * s);
-  }
-
-  const p = 2 * l - q;
-
-  const tr = h + (1 / 3);
-  const tg = h;
-  const tb = h - (1 / 3);
-
-  return [hue2rgb(p, q, tr), hue2rgb(p, q, tg), hue2rgb(p, q, tb), hsl[3]];
-}
-
-function hwb2rgb(hwb: Color4D): Color4D {
-  const h = hwb[0];
-  const w = hwb[1];
-  const b = hwb[2];
-
-  const whiteRatio = w / (w + b);
-  let result: Color4D = [whiteRatio, whiteRatio, whiteRatio, hwb[3]];
-
-  if (w + b < 1) {
-    result = hsl2rgb([h, 1, 0.5, hwb[3]]);
-    for (let i = 0; i < 3; ++i) {
-      result[i] += w - (w + b) * result[i];
-    }
-  }
-
-  return result;
-}
-
-export function hsva2rgba(hsva: Color4D): Color4D {
-  return hsl2rgb(hsva2hsla(hsva));
-}
-
-export function rgb2hsv(rgba: Color3D): Color3D {
-  const hsla = rgbToHsl(rgba);
-  const h = hsla[0];
-  let s = hsla[1];
-  const l = hsla[2];
-
-  s *= l < 0.5 ? l : 1 - l;
-  return [h, s !== 0 ? 2 * s / (l + s) : 0, (l + s)];
-}
-
-/**
- * Compute a desired luminance given a given luminance and a desired contrast
- * ratio.
- */
-export function desiredLuminance(luminance: number, contrast: number, lighter: boolean): number {
-  function computeLuminance(): number {
-    if (lighter) {
-      return (luminance + 0.05) * contrast - 0.05;
-    }
-    return (luminance + 0.05) / contrast - 0.05;
-  }
-  let desiredLuminance = computeLuminance();
-  if (desiredLuminance < 0 || desiredLuminance > 1) {
-    lighter = !lighter;
-    desiredLuminance = computeLuminance();
-  }
-  return desiredLuminance;
-}
-
-/**
- * Approach a value of the given component of `candidateHSVA` such that the
- * calculated luminance of `candidateHSVA` approximates `desiredLuminance`.
- */
-export function approachColorValue(
-    candidateHSVA: Color4D, index: number, desiredLuminance: number,
-    candidateLuminance: (arg0: Color4D) => number): number|null {
-  const epsilon = 0.0002;
-
-  let x = candidateHSVA[index];
-  let multiplier = 1;
-  let dLuminance: number = candidateLuminance(candidateHSVA) - desiredLuminance;
-  let previousSign = Math.sign(dLuminance);
-
-  for (let guard = 100; guard; guard--) {
-    if (Math.abs(dLuminance) < epsilon) {
-      candidateHSVA[index] = x;
-      return x;
-    }
-
-    const sign = Math.sign(dLuminance);
-    if (sign !== previousSign) {
-      // If `x` overshoots the correct value, halve the step size.
-      multiplier /= 2;
-      previousSign = sign;
-    } else if (x < 0 || x > 1) {
-      // If there is no overshoot and `x` is out of bounds, there is no
-      // acceptable value for `x`.
-      return null;
-    }
-
-    // Adjust `x` by a multiple of `dLuminance` to decrease step size as
-    // the computed luminance converges on `desiredLuminance`.
-    x += multiplier * (index === 2 ? -dLuminance : dLuminance);
-
-    candidateHSVA[index] = x;
-
-    dLuminance = candidateLuminance(candidateHSVA) - desiredLuminance;
-  }
-
-  return null;
-}
-
-export function findFgColorForContrast(fgColor: Legacy, bgColor: Legacy, requiredContrast: number): Legacy|null {
-  const candidateHSVA = fgColor.as(Format.HSL).hsva();
-  const bgRGBA = bgColor.rgba();
-
-  const candidateLuminance = (candidateHSVA: Color4D): number => {
-    return luminance(blendColors(Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));
-  };
-
-  const bgLuminance = luminance(bgColor.rgba());
-  const fgLuminance = candidateLuminance(candidateHSVA);
-  const fgIsLighter = fgLuminance > bgLuminance;
-
-  const desired = desiredLuminance(bgLuminance, requiredContrast, fgIsLighter);
-
-  const saturationComponentIndex = 1;
-  const valueComponentIndex = 2;
-
-  if (approachColorValue(candidateHSVA, valueComponentIndex, desired, candidateLuminance)) {
-    return Legacy.fromHSVA(candidateHSVA);
-  }
-
-  candidateHSVA[valueComponentIndex] = 1;
-  if (approachColorValue(candidateHSVA, saturationComponentIndex, desired, candidateLuminance)) {
-    return Legacy.fromHSVA(candidateHSVA);
-  }
-
-  return null;
-}
-
-export function findFgColorForContrastAPCA(fgColor: Legacy, bgColor: Legacy, requiredContrast: number): Legacy|null {
-  const candidateHSVA = fgColor.as(Format.HSL).hsva();
-
-  const candidateLuminance = (candidateHSVA: Color4D): number => {
-    return luminanceAPCA(Legacy.fromHSVA(candidateHSVA).rgba());
-  };
-
-  const bgLuminance = luminanceAPCA(bgColor.rgba());
-  const fgLuminance = candidateLuminance(candidateHSVA);
-  const fgIsLighter = fgLuminance >= bgLuminance;
-  const desiredLuminance = desiredLuminanceAPCA(bgLuminance, requiredContrast, fgIsLighter);
-
-  const saturationComponentIndex = 1;
-  const valueComponentIndex = 2;
-
-  if (approachColorValue(candidateHSVA, valueComponentIndex, desiredLuminance, candidateLuminance)) {
-    const candidate = Legacy.fromHSVA(candidateHSVA);
-    if (Math.abs(contrastRatioAPCA(bgColor.rgba(), candidate.rgba())) >= requiredContrast) {
-      return candidate;
-    }
-  }
-
-  candidateHSVA[valueComponentIndex] = 1;
-  if (approachColorValue(candidateHSVA, saturationComponentIndex, desiredLuminance, candidateLuminance)) {
-    const candidate = Legacy.fromHSVA(candidateHSVA);
-    if (Math.abs(contrastRatioAPCA(bgColor.rgba(), candidate.rgba())) >= requiredContrast) {
-      return candidate;
-    }
-  }
-
-  return null;
-}
-
-type ColorParameterSpec = [string, string, string, string | undefined];
-
-interface ColorConversions<T = void> {
-  [Format.HEX](self: T): Legacy;
-  [Format.HEXA](self: T): Legacy;
-  [Format.RGB](self: T): Legacy;
-  [Format.RGBA](self: T): Legacy;
-  [Format.HSL](self: T): HSL;
-  [Format.HSLA](self: T): HSL;
-  [Format.HWB](self: T): HWB;
-  [Format.HWBA](self: T): HWB;
-  [Format.LCH](self: T): LCH;
-  [Format.OKLCH](self: T): Oklch;
-  [Format.LAB](self: T): Lab;
-  [Format.OKLAB](self: T): Oklab;
-
-  [Format.SRGB](self: T): ColorFunction;
-  [Format.SRGB_LINEAR](self: T): ColorFunction;
-  [Format.DISPLAY_P3](self: T): ColorFunction;
-  [Format.A98_RGB](self: T): ColorFunction;
-  [Format.PROPHOTO_RGB](self: T): ColorFunction;
-  [Format.REC_2020](self: T): ColorFunction;
-  [Format.XYZ](self: T): ColorFunction;
-  [Format.XYZ_D50](self: T): ColorFunction;
-  [Format.XYZ_D65](self: T): ColorFunction;
-}
-
-export interface Color {
-  readonly alpha: number|null;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel];
-
-  equal(color: Color): boolean;
-  asString(format?: Format): string;
-  setAlpha(alpha: number): Color;
-  format(): Format;
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]>;
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]>;
-  asLegacyColor(): Legacy;
-
-  // The authored text is the text that was used to define the color. If set, it may be different from what `asString`
-  // returns, for example if the latter normalizes or clamps color channel values. It is also possible that the authored
-  // text is not a parsable color outside of the context in which the color was produced, e.g., when the color stems
-  // from a custom property, the authored text may look like "var(--color)".
-  getAuthoredText(): string|null;
-
-  getRawParameters(): Color3D;
-  getAsRawString(format?: Format): string;
-  isGamutClipped(): boolean;
-}
-
-const EPSILON = 0.01;
-const WIDE_RANGE_EPSILON = 1;  // For comparisons on channels with a wider range than [0,1]
-function equals(a: number[], b: number[], accuracy?: number): boolean;
-function equals(a: number|null, b: number|null, accuracy?: number): boolean;
-function equals(a: number|null|number[], b: number|null|number[], accuracy = EPSILON): boolean {
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) {
-      return false;
-    }
-    for (const i in a) {
-      if (!equals(a[i], b[i])) {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (Array.isArray(a) || Array.isArray(b)) {
-    return false;
-  }
-  if (a === null || b === null) {
-    return a === b;
-  }
-  return Math.abs(a - b) < accuracy;
-}
-function lessOrEquals(a: number, b: number, accuracy = EPSILON): boolean {
-  return a - b <= accuracy;
-}
-
-export const enum Format {
-  HEX = 'hex',
-  HEXA = 'hexa',
-  RGB = 'rgb',
-  RGBA = 'rgba',
-  HSL = 'hsl',
-  HSLA = 'hsla',
-  HWB = 'hwb',
-  HWBA = 'hwba',
-  LCH = 'lch',
-  OKLCH = 'oklch',
-  LAB = 'lab',
-  OKLAB = 'oklab',
-  SRGB = 'srgb',
-  SRGB_LINEAR = 'srgb-linear',
-  DISPLAY_P3 = 'display-p3',
-  A98_RGB = 'a98-rgb',
-  PROPHOTO_RGB = 'prophoto-rgb',
-  REC_2020 = 'rec2020',
-  XYZ = 'xyz',
-  XYZ_D50 = 'xyz-d50',
-  XYZ_D65 = 'xyz-d65',
-}
-
-export class Lab implements Color {
-  readonly l: number;
-  readonly a: number;
-  readonly b: number;
-  readonly alpha: number|null;
-  readonly #authoredText?: string;
-  readonly #rawParams: Color3D;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.L, ColorChannel.A, ColorChannel.B, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<Lab> = {
-    [Format.HEX]: (self: Lab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: Lab) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: Lab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: Lab) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: Lab) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: Lab) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: Lab) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: Lab) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: Lab) => new LCH(...ColorConverter.labToLch(self.l, self.a, self.b), self.alpha),
-    [Format.OKLCH]: (self: Lab) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: Lab) => self,
-    [Format.OKLAB]: (self: Lab) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-
-    [Format.SRGB]: (self: Lab) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: Lab) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: Lab) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: Lab) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: Lab) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: Lab) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: Lab) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: Lab) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: Lab) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    return ColorConverter.labToXyzd50(this.l, this.a, this.b);
-  }
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color3D|Color4DOr3D {
-    const params = ColorConverter.xyzd50ToSrgb(...this.#toXyzd50());
-    if (withAlpha) {
-      return [...params, this.alpha ?? undefined];
-    }
-    return params;
-  }
-
-  constructor(l: number, a: number, b: number, alpha: number|null, authoredText?: string|undefined) {
-    this.#rawParams = [l, a, b];
-    this.l = clamp(l, {min: 0, max: 100});
-    if (equals(this.l, 0, WIDE_RANGE_EPSILON) || equals(this.l, 100, WIDE_RANGE_EPSILON)) {
-      a = b = 0;
-    }
-    this.a = a;
-    this.b = b;
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-    this.#authoredText = authoredText;
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    return Lab.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  equal(color: Color): boolean {
-    const lab = color.as(Format.LAB);
-    return equals(lab.l, this.l, WIDE_RANGE_EPSILON) && equals(lab.a, this.a) && equals(lab.b, this.b) &&
-        equals(lab.alpha, this.alpha);
-  }
-  format(): Format {
-    return Format.LAB;
-  }
-  setAlpha(alpha: number): Lab {
-    return new Lab(this.l, this.a, this.b, alpha, undefined);
-  }
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.l, this.a, this.b);
-  }
-  #stringify(l: number, a: number, b: number): string {
-    const alpha = this.alpha === null || equals(this.alpha, 1) ?
-        '' :
-        ` / ${Platform.StringUtilities.stringifyWithPrecision(this.alpha)}`;
-    return `lab(${Platform.StringUtilities.stringifyWithPrecision(l, 0)} ${
-        Platform.StringUtilities.stringifyWithPrecision(
-            a)} ${Platform.StringUtilities.stringifyWithPrecision(b)}${alpha})`;
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return false;
-  }
-
-  static fromSpec(spec: ColorParameterSpec, text: string): Lab|null {
-    const L = parsePercentage(spec[0], [0, 100]) ?? parseNumber(spec[0]);
-    if (L === null) {
-      return null;
-    }
-    const a = parsePercentage(spec[1], [0, 125]) ?? parseNumber(spec[1]);
-    if (a === null) {
-      return null;
-    }
-    const b = parsePercentage(spec[2], [0, 125]) ?? parseNumber(spec[2]);
-    if (b === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-
-    return new Lab(L, a, b, alpha, text);
-  }
-}
-
-export class LCH implements Color {
-  readonly #rawParams: Color3D;
-  readonly l: number;
-  readonly c: number;
-  readonly h: number;
-  readonly alpha: number|null;
-  readonly #authoredText?: string;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.L, ColorChannel.C, ColorChannel.H, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<LCH> = {
-    [Format.HEX]: (self: LCH) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: LCH) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: LCH) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: LCH) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: LCH) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: LCH) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: LCH) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: LCH) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: LCH) => self,
-    [Format.OKLCH]: (self: LCH) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: LCH) => new Lab(...ColorConverter.lchToLab(self.l, self.c, self.h), self.alpha),
-    [Format.OKLAB]: (self: LCH) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-
-    [Format.SRGB]: (self: LCH) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: LCH) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: LCH) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: LCH) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: LCH) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: LCH) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: LCH) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: LCH) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: LCH) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    return ColorConverter.labToXyzd50(...ColorConverter.lchToLab(this.l, this.c, this.h));
-  }
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    const params = ColorConverter.xyzd50ToSrgb(...this.#toXyzd50());
-    if (withAlpha) {
-      return [...params, this.alpha ?? undefined];
-    }
-    return params;
-  }
-
-  constructor(l: number, c: number, h: number, alpha: number|null, authoredText?: string|undefined) {
-    this.#rawParams = [l, c, h];
-    this.l = clamp(l, {min: 0, max: 100});
-    c = equals(this.l, 0, WIDE_RANGE_EPSILON) || equals(this.l, 100, WIDE_RANGE_EPSILON) ? 0 : c;
-    this.c = clamp(c, {min: 0});
-    h = equals(c, 0) ? 0 : h;
-    this.h = normalizeHue(h);
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-    this.#authoredText = authoredText;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    return LCH.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  equal(color: Color): boolean {
-    const lch = color.as(Format.LCH);
-    return equals(lch.l, this.l, WIDE_RANGE_EPSILON) && equals(lch.c, this.c) && equals(lch.h, this.h) &&
-        equals(lch.alpha, this.alpha);
-  }
-  format(): Format {
-    return Format.LCH;
-  }
-  setAlpha(alpha: number): Color {
-    return new LCH(this.l, this.c, this.h, alpha);
-  }
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.l, this.c, this.h);
-  }
-  #stringify(l: number, c: number, h: number): string {
-    const alpha = this.alpha === null || equals(this.alpha, 1) ?
-        '' :
-        ` / ${Platform.StringUtilities.stringifyWithPrecision(this.alpha)}`;
-    return `lch(${Platform.StringUtilities.stringifyWithPrecision(l, 0)} ${
-        Platform.StringUtilities.stringifyWithPrecision(
-            c)} ${Platform.StringUtilities.stringifyWithPrecision(h)}${alpha})`;
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return false;
-  }
-  // See "powerless" component definitions in
-  // https://www.w3.org/TR/css-color-4/#specifying-lab-lch
-  isHuePowerless(): boolean {
-    return equals(this.c, 0);
-  }
-  static fromSpec(spec: ColorParameterSpec, text: string): LCH|null {
-    const L = parsePercentage(spec[0], [0, 100]) ?? parseNumber(spec[0]);
-    if (L === null) {
-      return null;
-    }
-    const c = parsePercentage(spec[1], [0, 150]) ?? parseNumber(spec[1]);
-    if (c === null) {
-      return null;
-    }
-    const h = parseAngle(spec[2]);
-    if (h === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-
-    return new LCH(L, c, h, alpha, text);
-  }
-}
-
-export class Oklab implements Color {
-  readonly #rawParams: Color3D;
-  readonly l: number;
-  readonly a: number;
-  readonly b: number;
-  readonly alpha: number|null;
-  readonly #authoredText?: string;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.L, ColorChannel.A, ColorChannel.B, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<Oklab> = {
-    [Format.HEX]: (self: Oklab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: Oklab) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: Oklab) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: Oklab) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: Oklab) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: Oklab) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: Oklab) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: Oklab) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: Oklab) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: Oklab) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: Oklab) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: Oklab) => self,
-
-    [Format.SRGB]: (self: Oklab) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: Oklab) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: Oklab) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: Oklab) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: Oklab) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: Oklab) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: Oklab) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: Oklab) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: Oklab) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    return ColorConverter.xyzd65ToD50(...ColorConverter.oklabToXyzd65(this.l, this.a, this.b));
-  }
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    const params = ColorConverter.xyzd50ToSrgb(...this.#toXyzd50());
-    if (withAlpha) {
-      return [...params, this.alpha ?? undefined];
-    }
-    return params;
-  }
-
-  constructor(l: number, a: number, b: number, alpha: number|null, authoredText?: string|undefined) {
-    this.#rawParams = [l, a, b];
-    this.l = clamp(l, {min: 0, max: 1});
-    if (equals(this.l, 0) || equals(this.l, 1)) {
-      a = b = 0;
-    }
-    this.a = a;
-    this.b = b;
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-    this.#authoredText = authoredText;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    return Oklab.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  equal(color: Color): boolean {
-    const oklab = color.as(Format.OKLAB);
-    return equals(oklab.l, this.l) && equals(oklab.a, this.a) && equals(oklab.b, this.b) &&
-        equals(oklab.alpha, this.alpha);
-  }
-  format(): Format {
-    return Format.OKLAB;
-  }
-  setAlpha(alpha: number): Color {
-    return new Oklab(this.l, this.a, this.b, alpha);
-  }
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.l, this.a, this.b);
-  }
-  #stringify(l: number, a: number, b: number): string {
-    const alpha = this.alpha === null || equals(this.alpha, 1) ?
-        '' :
-        ` / ${Platform.StringUtilities.stringifyWithPrecision(this.alpha)}`;
-    return `oklab(${Platform.StringUtilities.stringifyWithPrecision(l)} ${
-        Platform.StringUtilities.stringifyWithPrecision(
-            a)} ${Platform.StringUtilities.stringifyWithPrecision(b)}${alpha})`;
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return false;
-  }
-
-  static fromSpec(spec: ColorParameterSpec, text: string): Oklab|null {
-    const L = parsePercentage(spec[0], [0, 1]) ?? parseNumber(spec[0]);
-    if (L === null) {
-      return null;
-    }
-    const a = parsePercentage(spec[1], [0, 0.4]) ?? parseNumber(spec[1]);
-    if (a === null) {
-      return null;
-    }
-    const b = parsePercentage(spec[2], [0, 0.4]) ?? parseNumber(spec[2]);
-    if (b === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-
-    return new Oklab(L, a, b, alpha, text);
-  }
-}
-
-export class Oklch implements Color {
-  readonly #rawParams: Color3D;
-  readonly l: number;
-  readonly c: number;
-  readonly h: number;
-  readonly alpha: number|null;
-  readonly #authoredText?: string;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.L, ColorChannel.C, ColorChannel.H, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<Oklch> = {
-    [Format.HEX]: (self: Oklch) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: Oklch) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: Oklch) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: Oklch) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: Oklch) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: Oklch) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: Oklch) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: Oklch) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: Oklch) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: Oklch) => self,
-    [Format.LAB]: (self: Oklch) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: Oklch) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-    [Format.SRGB]: (self: Oklch) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: Oklch) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: Oklch) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: Oklch) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: Oklch) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: Oklch) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: Oklch) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: Oklch) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: Oklch) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    return ColorConverter.oklchToXyzd50(this.l, this.c, this.h);
-  }
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    const params = ColorConverter.xyzd50ToSrgb(...this.#toXyzd50());
-    if (withAlpha) {
-      return [...params, this.alpha ?? undefined];
-    }
-    return params;
-  }
-
-  constructor(l: number, c: number, h: number, alpha: number|null, authoredText?: string|undefined) {
-    this.#rawParams = [l, c, h];
-    this.l = clamp(l, {min: 0, max: 1});
-    c = equals(this.l, 0) || equals(this.l, 1) ? 0 : c;
-    this.c = clamp(c, {min: 0});
-    h = equals(c, 0) ? 0 : h;
-    this.h = normalizeHue(h);
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-    this.#authoredText = authoredText;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    return Oklch.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  equal(color: Color): boolean {
-    const oklch = color.as(Format.OKLCH);
-    return equals(oklch.l, this.l) && equals(oklch.c, this.c) && equals(oklch.h, this.h) &&
-        equals(oklch.alpha, this.alpha);
-  }
-  format(): Format {
-    return Format.OKLCH;
-  }
-  setAlpha(alpha: number): Color {
-    return new Oklch(this.l, this.c, this.h, alpha);
-  }
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.l, this.c, this.h);
-  }
-  #stringify(l: number, c: number, h: number): string {
-    const alpha = this.alpha === null || equals(this.alpha, 1) ?
-        '' :
-        ` / ${Platform.StringUtilities.stringifyWithPrecision(this.alpha)}`;
-    return `oklch(${Platform.StringUtilities.stringifyWithPrecision(l)} ${
-        Platform.StringUtilities.stringifyWithPrecision(
-            c)} ${Platform.StringUtilities.stringifyWithPrecision(h)}${alpha})`;
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return false;
-  }
-
-  static fromSpec(spec: ColorParameterSpec, text: string): Oklch|null {
-    const L = parsePercentage(spec[0], [0, 1]) ?? parseNumber(spec[0]);
-    if (L === null) {
-      return null;
-    }
-    const c = parsePercentage(spec[1], [0, 0.4]) ?? parseNumber(spec[1]);
-    if (c === null) {
-      return null;
-    }
-    const h = parseAngle(spec[2]);
-    if (h === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-
-    return new Oklch(L, c, h, alpha, text);
-  }
-}
-
-export class ColorFunction implements Color {
-  readonly #rawParams: Color3D;
-  readonly p0: number;
-  readonly p1: number;
-  readonly p2: number;
-  readonly alpha: number|null;
-  readonly colorSpace: ColorSpace;
-  readonly #authoredText?: string;
-  get channels(): [ColorChannel, ColorChannel, ColorChannel, ColorChannel] {
-    return this.isXYZ() ? [ColorChannel.X, ColorChannel.Y, ColorChannel.Z, ColorChannel.ALPHA] :
-                          [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
-  }
-
-  static readonly #conversions: ColorConversions<ColorFunction> = {
-    [Format.HEX]: (self: ColorFunction) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: ColorFunction) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: ColorFunction) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: ColorFunction) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: ColorFunction) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: ColorFunction) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: ColorFunction) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: ColorFunction) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: ColorFunction) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: ColorFunction) =>
-        new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: ColorFunction) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: ColorFunction) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-
-    [Format.SRGB]: (self: ColorFunction) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: ColorFunction) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: ColorFunction) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: ColorFunction) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: ColorFunction) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: ColorFunction) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: ColorFunction) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: ColorFunction) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: ColorFunction) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    // With color(), out-of-gamut inputs are to be used for intermediate computations
-    const [p0, p1, p2] = this.#rawParams;
-    switch (this.colorSpace) {
-      case Format.SRGB:
-        return ColorConverter.srgbToXyzd50(p0, p1, p2);
-      case Format.SRGB_LINEAR:
-        return ColorConverter.srgbLinearToXyzd50(p0, p1, p2);
-      case Format.DISPLAY_P3:
-        return ColorConverter.displayP3ToXyzd50(p0, p1, p2);
-      case Format.A98_RGB:
-        return ColorConverter.adobeRGBToXyzd50(p0, p1, p2);
-      case Format.PROPHOTO_RGB:
-        return ColorConverter.proPhotoToXyzd50(p0, p1, p2);
-      case Format.REC_2020:
-        return ColorConverter.rec2020ToXyzd50(p0, p1, p2);
-      case Format.XYZ_D50:
-        return [p0, p1, p2];
-      case Format.XYZ:
-      case Format.XYZ_D65:
-        return ColorConverter.xyzd65ToD50(p0, p1, p2);
-    }
-    throw new Error('Invalid color space');
-  }
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    // With color(), out-of-gamut inputs are to be used for intermediate computations
-    const [p0, p1, p2] = this.#rawParams;
-    const params: Color3D =
-        this.colorSpace === Format.SRGB ? [p0, p1, p2] : [...ColorConverter.xyzd50ToSrgb(...this.#toXyzd50())];
-    if (withAlpha) {
-      return [...params, this.alpha ?? undefined];
-    }
-    return params;
-  }
-
-  constructor(
-      colorSpace: ColorSpace, p0: number, p1: number, p2: number, alpha: number|null, authoredText?: string|undefined) {
-    this.#rawParams = [p0, p1, p2];
-    this.colorSpace = colorSpace;
-    this.#authoredText = authoredText;
-    if (this.colorSpace !== Format.XYZ_D50 && this.colorSpace !== Format.XYZ_D65 && this.colorSpace !== Format.XYZ) {
-      p0 = clamp(p0, {min: 0, max: 1});
-      p1 = clamp(p1, {min: 0, max: 1});
-      p2 = clamp(p2, {min: 0, max: 1});
-    }
-
-    this.p0 = p0;
-    this.p1 = p1;
-    this.p2 = p2;
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    if (this.colorSpace === format) {
-      return this as ReturnType<ColorConversions[T]>;
-    }
-    return ColorFunction.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  equal(color: Color): boolean {
-    const space = color.as(this.colorSpace);
-    return equals(this.p0, space.p0) && equals(this.p1, space.p1) && equals(this.p2, space.p2) &&
-        equals(this.alpha, space.alpha);
-  }
-  format(): Format {
-    return this.colorSpace;
-  }
-  setAlpha(alpha: number): Color {
-    return new ColorFunction(this.colorSpace, this.p0, this.p1, this.p2, alpha);
-  }
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.p0, this.p1, this.p2);
-  }
-  #stringify(p0: number, p1: number, p2: number): string {
-    const alpha = this.alpha === null || equals(this.alpha, 1) ?
-        '' :
-        ` / ${Platform.StringUtilities.stringifyWithPrecision(this.alpha)}`;
-    return `color(${this.colorSpace} ${Platform.StringUtilities.stringifyWithPrecision(p0)} ${
-        Platform.StringUtilities.stringifyWithPrecision(
-            p1)} ${Platform.StringUtilities.stringifyWithPrecision(p2)}${alpha})`;
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    if (this.colorSpace !== Format.XYZ_D50 && this.colorSpace !== Format.XYZ_D65 && this.colorSpace !== Format.XYZ) {
-      return !equals(this.#rawParams, [this.p0, this.p1, this.p2]);
-    }
-    return false;
-  }
-
-  isXYZ(): boolean {
-    switch (this.colorSpace) {
-      case Format.XYZ:
-      case Format.XYZ_D50:
-      case Format.XYZ_D65:
-        return true;
-    }
-    return false;
-  }
-
-  /**
-   * Parses given `color()` function definition and returns the `Color` object.
-   * We want to special case its parsing here because it's a bit different
-   * than other color functions: rgb, lch etc. accepts 3 arguments with
-   * optional alpha. This accepts 4 arguments with optional alpha.
-   *
-   * Instead of making `splitColorFunctionParameters` work for this case too
-   * I've decided to implement it specifically.
-   * @param authoredText Original definition of the color with `color`
-   * @param parametersText Inside of the `color()` function. ex, `display-p3 0.1 0.2 0.3 / 0%`
-   * @returns `Color` object
-   */
-  static fromSpec(authoredText: string, parametersWithAlphaText: string): ColorFunction|null {
-    const [parametersText, alphaText] = parametersWithAlphaText.split('/', 2);
-    const parameters = parametersText.trim().split(/\s+/);
-    const [colorSpaceText, ...remainingParams] = parameters;
-    const colorSpace = getColorSpace(colorSpaceText);
-    // Color space is not known to us, do not parse the Color.
-    if (!colorSpace) {
-      return null;
-    }
-
-    // `color(<color-space>)` is a valid syntax
-    if (remainingParams.length === 0 && alphaText === undefined) {
-      return new ColorFunction(colorSpace, 0, 0, 0, null, authoredText);
-    }
-
-    // Check if it contains `/ <alpha>` part, if so, it should be at the end
-    if (remainingParams.length === 0 && alphaText !== undefined && alphaText.trim().split(/\s+/).length > 1) {
-      // Invalid syntax: like `color(<space> / <alpha> <number>)`
-      return null;
-    }
-
-    // `color` cannot contain more than 3 parameters without alpha
-    if (remainingParams.length > 3) {
-      return null;
-    }
-
-    // Replace `none`s with 0s
-    const nonesReplacedParams = remainingParams.map(param => param === 'none' ? '0' : param);
-
-    // At this point, we know that all the values are there so we can
-    // safely try to parse all the values as number or percentage
-    const values = nonesReplacedParams.map(param => parsePercentOrNumber(param, [0, 1]));
-    const containsNull = values.includes(null);
-    // At least one value is malformatted (not a number or percentage)
-    if (containsNull) {
-      return null;
-    }
-
-    const alphaValue = alphaText ? parsePercentOrNumber(alphaText, [0, 1]) ?? 1 : 1;
-
-    // Depending on the color space
-    // this either reflects `rgb` parameters in that color space
-    // or `xyz` parameters in the given `xyz` space.
-    const rgbOrXyza: Color4D = [
-      values[0] ?? 0,
-      values[1] ?? 0,
-      values[2] ?? 0,
-      alphaValue,
-    ];
-
-    return new ColorFunction(colorSpace, ...rgbOrXyza, authoredText);
-  }
-}
-
-export class HSL implements Color {
-  readonly h: number;
-  readonly s: number;
-  readonly l: number;
-  readonly alpha: number|null;
-  readonly #rawParams: Color3D;
-  #authoredText: string|undefined;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.H, ColorChannel.S, ColorChannel.L, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<HSL> = {
-    [Format.HEX]: (self: HSL) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: HSL) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: HSL) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: HSL) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: HSL) => self,
-    [Format.HSLA]: (self: HSL) => self,
-    [Format.HWB]: (self: HSL) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWBA]: (self: HSL) => new HWB(...rgbToHwb(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.LCH]: (self: HSL) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: HSL) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: HSL) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: HSL) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-
-    [Format.SRGB]: (self: HSL) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: HSL) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: HSL) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: HSL) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: HSL) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: HSL) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: HSL) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: HSL) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: HSL) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    const rgb = hsl2rgb([this.h, this.s, this.l, 0]);
-    if (withAlpha) {
-      return [rgb[0], rgb[1], rgb[2], this.alpha ?? undefined];
-    }
-    return [rgb[0], rgb[1], rgb[2]];
-  }
-
-  #toXyzd50(): Color3D {
-    const rgb = this.#getRGBArray(false);
-    return ColorConverter.srgbToXyzd50(rgb[0], rgb[1], rgb[2]);
-  }
-
-  constructor(h: number, s: number, l: number, alpha: number|null|undefined, authoredText?: string) {
-    this.#rawParams = [h, s, l];
-    this.l = clamp(l, {min: 0, max: 1});
-    s = equals(this.l, 0) || equals(this.l, 1) ? 0 : s;
-    this.s = clamp(s, {min: 0, max: 1});
-    h = equals(this.s, 0) ? 0 : h;
-    this.h = normalizeHue(h * 360) / 360;
-    this.alpha = clamp(alpha ?? null, {min: 0, max: 1});
-    this.#authoredText = authoredText;
-  }
-
-  equal(color: Color): boolean {
-    const hsl = color.as(Format.HSL);
-    return equals(this.h, hsl.h) && equals(this.s, hsl.s) && equals(this.l, hsl.l) && equals(this.alpha, hsl.alpha);
-  }
-  asString(format?: Format|undefined): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.h, this.s, this.l);
-  }
-  #stringify(h: number, s: number, l: number): string {
-    const start = Platform.StringUtilities.sprintf(
-        'hsl(%sdeg %s% %s%', Platform.StringUtilities.stringifyWithPrecision(h * 360),
-        Platform.StringUtilities.stringifyWithPrecision(s * 100),
-        Platform.StringUtilities.stringifyWithPrecision(l * 100));
-    if (this.alpha !== null && this.alpha !== 1) {
-      return start +
-          Platform.StringUtilities.sprintf(
-              ' / %s%)', Platform.StringUtilities.stringifyWithPrecision(this.alpha * 100));
-    }
-    return start + ')';
-  }
-  setAlpha(alpha: number): HSL {
-    return new HSL(this.h, this.s, this.l, alpha);
-  }
-  format(): Format {
-    return this.alpha === null || this.alpha === 1 ? Format.HSL : Format.HSLA;
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    if (format === this.format()) {
-      return this as ReturnType<ColorConversions[T]>;
-    }
-    return HSL.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return !lessOrEquals(this.#rawParams[1], 1) || !lessOrEquals(0, this.#rawParams[1]);
-  }
-
-  static fromSpec(spec: ColorParameterSpec, text: string): HSL|null {
-    const h = parseHueNumeric(spec[0]);
-    if (h === null) {
-      return null;
-    }
-    const s = parseSatLightNumeric(spec[1]);
-    if (s === null) {
-      return null;
-    }
-    const l = parseSatLightNumeric(spec[2]);
-    if (l === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-
-    return new HSL(h, s, l, alpha, text);
-  }
-
-  hsva(): Color4D {
-    const s = this.s * (this.l < 0.5 ? this.l : 1 - this.l);
-    return [this.h, s !== 0 ? 2 * s / (this.l + s) : 0, (this.l + s), this.alpha ?? 1];
-  }
-  canonicalHSLA(): number[] {
-    return [Math.round(this.h * 360), Math.round(this.s * 100), Math.round(this.l * 100), this.alpha ?? 1];
-  }
-}
-
-export class HWB implements Color {
-  readonly h: number;
-  readonly w: number;
-  readonly b: number;
-  readonly alpha: number|null;
-  readonly #rawParams: Color3D;
-  #authoredText: string|undefined;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.H, ColorChannel.W, ColorChannel.B, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<HWB> = {
-    [Format.HEX]: (self: HWB) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.HEX),
-    [Format.HEXA]: (self: HWB) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.HEXA),
-    [Format.RGB]: (self: HWB) => new Legacy(self.#getRGBArray(/* withAlpha= */ false), Format.RGB),
-    [Format.RGBA]: (self: HWB) => new Legacy(self.#getRGBArray(/* withAlpha= */ true), Format.RGBA),
-    [Format.HSL]: (self: HWB) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HSLA]: (self: HWB) => new HSL(...rgbToHsl(self.#getRGBArray(/* withAlpha= */ false)), self.alpha),
-    [Format.HWB]: (self: HWB) => self,
-    [Format.HWBA]: (self: HWB) => self,
-    [Format.LCH]: (self: HWB) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: HWB) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: HWB) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: HWB) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-
-    [Format.SRGB]: (self: HWB) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: HWB) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: HWB) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: HWB) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: HWB) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: HWB) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: HWB) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: HWB) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: HWB) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #getRGBArray(withAlpha: true): Color4DOr3D;
-  #getRGBArray(withAlpha: false): Color3D;
-  #getRGBArray(withAlpha = true): Color4DOr3D|Color3D {
-    const rgb = hwb2rgb([this.h, this.w, this.b, 0]);
-    if (withAlpha) {
-      return [rgb[0], rgb[1], rgb[2], this.alpha ?? undefined];
-    }
-    return [rgb[0], rgb[1], rgb[2]];
-  }
-
-  #toXyzd50(): Color3D {
-    const rgb = this.#getRGBArray(false);
-    return ColorConverter.srgbToXyzd50(rgb[0], rgb[1], rgb[2]);
-  }
-  constructor(h: number, w: number, b: number, alpha: number|null, authoredText?: string) {
-    this.#rawParams = [h, w, b];
-    this.w = clamp(w, {min: 0, max: 1});
-    this.b = clamp(b, {min: 0, max: 1});
-    h = lessOrEquals(1, this.w + this.b) ? 0 : h;
-    this.h = normalizeHue(h * 360) / 360;
-    this.alpha = clamp(alpha, {min: 0, max: 1});
-    if (lessOrEquals(1, this.w + this.b)) {
-      // normalize to a sum of 100% respecting the ratio, see https://www.w3.org/TR/css-color-4/#the-hwb-notation
-      const ratio = this.w / this.b;
-      this.b = 1 / (1 + ratio);
-      this.w = 1 - this.b;
-    }
-    this.#authoredText = authoredText;
-  }
-  equal(color: Color): boolean {
-    const hwb = color.as(Format.HWB);
-    return equals(this.h, hwb.h) && equals(this.w, hwb.w) && equals(this.b, hwb.b) && equals(this.alpha, hwb.alpha);
-  }
-  asString(format?: Format|undefined): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(this.h, this.w, this.b);
-  }
-  #stringify(h: number, w: number, b: number): string {
-    const start = Platform.StringUtilities.sprintf(
-        'hwb(%sdeg %s% %s%', Platform.StringUtilities.stringifyWithPrecision(h * 360),
-        Platform.StringUtilities.stringifyWithPrecision(w * 100),
-        Platform.StringUtilities.stringifyWithPrecision(b * 100));
-    if (this.alpha !== null && this.alpha !== 1) {
-      return start +
-          Platform.StringUtilities.sprintf(
-              ' / %s%)', Platform.StringUtilities.stringifyWithPrecision(this.alpha * 100));
-    }
-    return start + ')';
-  }
-  setAlpha(alpha: number): HWB {
-    return new HWB(this.h, this.w, this.b, alpha, this.#authoredText);
-  }
-  format(): Format {
-    return this.alpha !== null && !equals(this.alpha, 1) ? Format.HWBA : Format.HWB;
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    if (format === this.format()) {
-      return this as ReturnType<ColorConversions[T]>;
-    }
-    return HWB.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-  asLegacyColor(): Legacy {
-    return this.as(Format.RGBA);
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  canonicalHWBA(): number[] {
-    return [
-      Math.round(this.h * 360),
-      Math.round(this.w * 100),
-      Math.round(this.b * 100),
-      this.alpha ?? 1,
-    ];
-  }
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return !lessOrEquals(this.#rawParams[1], 1) || !lessOrEquals(0, this.#rawParams[1]) ||
-        !lessOrEquals(this.#rawParams[2], 1) || !lessOrEquals(0, this.#rawParams[2]);
-  }
-
-  static fromSpec(spec: ColorParameterSpec, text: string): HWB|null {
-    const h = parseHueNumeric(spec[0]);
-    if (h === null) {
-      return null;
-    }
-    const w = parseSatLightNumeric(spec[1]);
-    if (w === null) {
-      return null;
-    }
-    const b = parseSatLightNumeric(spec[2]);
-    if (b === null) {
-      return null;
-    }
-    const alpha = parseAlpha(spec[3]);
-    return new HWB(h, w, b, alpha, text);
-  }
-}
-
-type LegacyColor = Format.HEX|Format.HEXA|Format.RGB|Format.RGBA;
-
-function toRgbValue(value: number): number {
-  return Math.round(value * 255);
-}
-
-abstract class ShortFormatColorBase implements Color {
-  protected readonly color: Legacy;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
-  constructor(color: Legacy) {
-    this.color = color;
-  }
-  get alpha(): number|null {
-    return this.color.alpha;
-  }
-  rgba(): Color4D {
-    return this.color.rgba();
-  }
-  equal(color: Color): boolean {
-    return this.color.equal(color);
-  }
-  setAlpha(alpha: number): Color {
-    return this.color.setAlpha(alpha);
-  }
-  format(): Format {
-    return (this.alpha ?? 1) !== 1 ? Format.HEXA : Format.HEX;
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions<void>[T]> {
-    return this.color.as(format);
-  }
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions<void>[T]> {
-    return this.color.is(format);
-  }
-  asLegacyColor(): Legacy {
-    return this.color.asLegacyColor();
-  }
-  getAuthoredText(): string|null {
-    return this.color.getAuthoredText();
-  }
-  getRawParameters(): Color3D {
-    return this.color.getRawParameters();
-  }
-  isGamutClipped(): boolean {
-    return this.color.isGamutClipped();
-  }
-  asString(format?: Format|undefined): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    const [r, g, b] = this.color.rgba();
-    return this.stringify(r, g, b);
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    const [r, g, b] = this.getRawParameters();
-    return this.stringify(r, g, b);
-  }
-
-  protected abstract stringify(r: number, g: number, b: number): string;
-}
-
-export class ShortHex extends ShortFormatColorBase {
-  override setAlpha(alpha: number): Color {
-    return new ShortHex(this.color.setAlpha(alpha));
-  }
-
-  override asString(format?: Format|undefined): string {
-    return format && format !== this.format() ? super.as(format).asString() : super.asString();
-  }
-
-  protected override stringify(r: number, g: number, b: number): string {
-    function toShortHexValue(value: number): string {
-      return (Math.round(value * 255) / 17).toString(16);
-    }
-
-    if (this.color.hasAlpha()) {
-      return Platform.StringUtilities
-          .sprintf(
-              '#%s%s%s%s', toShortHexValue(r), toShortHexValue(g), toShortHexValue(b), toShortHexValue(this.alpha ?? 1))
-          .toLowerCase();
-    }
-    return Platform.StringUtilities.sprintf('#%s%s%s', toShortHexValue(r), toShortHexValue(g), toShortHexValue(b))
-        .toLowerCase();
-  }
-}
-
-export class Nickname extends ShortFormatColorBase {
-  readonly nickname: string;
-  constructor(nickname: string, color: Legacy) {
-    super(color);
-    this.nickname = nickname;
-  }
-
-  static fromName(name: string, text: string): Nickname|null {
-    const nickname = name.toLowerCase();
-    const rgba = Nicknames.get(nickname);
-    if (rgba !== undefined) {
-      return new Nickname(nickname, Legacy.fromRGBA(rgba, text));
-    }
-    return null;
-  }
-
-  protected override stringify(): string {
-    return this.nickname;
-  }
-
-  override getAsRawString(format?: Format|undefined): string {
-    return this.color.getAsRawString(format);
-  }
-}
-
-export class Legacy implements Color {
-  readonly #rawParams: Color3D;
-  #rgba: Color4D;
-  readonly #authoredText: string|null;
-  #format: LegacyColor;
-  readonly channels: [ColorChannel, ColorChannel, ColorChannel, ColorChannel] =
-      [ColorChannel.R, ColorChannel.G, ColorChannel.B, ColorChannel.ALPHA];
-
-  static readonly #conversions: ColorConversions<Legacy> = {
-    [Format.HEX]: (self: Legacy) => new Legacy(self.#rgba, Format.HEX),
-    [Format.HEXA]: (self: Legacy) => new Legacy(self.#rgba, Format.HEXA),
-    [Format.RGB]: (self: Legacy) => new Legacy(self.#rgba, Format.RGB),
-    [Format.RGBA]: (self: Legacy) => new Legacy(self.#rgba, Format.RGBA),
-    [Format.HSL]: (self: Legacy) => new HSL(...rgbToHsl([self.#rgba[0], self.#rgba[1], self.#rgba[2]]), self.alpha),
-    [Format.HSLA]: (self: Legacy) => new HSL(...rgbToHsl([self.#rgba[0], self.#rgba[1], self.#rgba[2]]), self.alpha),
-    [Format.HWB]: (self: Legacy) => new HWB(...rgbToHwb([self.#rgba[0], self.#rgba[1], self.#rgba[2]]), self.alpha),
-    [Format.HWBA]: (self: Legacy) => new HWB(...rgbToHwb([self.#rgba[0], self.#rgba[1], self.#rgba[2]]), self.alpha),
-    [Format.LCH]: (self: Legacy) =>
-        new LCH(...ColorConverter.labToLch(...ColorConverter.xyzd50ToLab(...self.#toXyzd50())), self.alpha),
-    [Format.OKLCH]: (self: Legacy) => new Oklch(...ColorConverter.xyzd50ToOklch(...self.#toXyzd50()), self.alpha),
-    [Format.LAB]: (self: Legacy) => new Lab(...ColorConverter.xyzd50ToLab(...self.#toXyzd50()), self.alpha),
-    [Format.OKLAB]: (self: Legacy) =>
-        new Oklab(...ColorConverter.xyzd65ToOklab(...ColorConverter.xyzd50ToD65(...self.#toXyzd50())), self.alpha),
-    [Format.SRGB]: (self: Legacy) =>
-        new ColorFunction(Format.SRGB, ...ColorConverter.xyzd50ToSrgb(...self.#toXyzd50()), self.alpha),
-    [Format.SRGB_LINEAR]: (self: Legacy) =>
-        new ColorFunction(Format.SRGB_LINEAR, ...ColorConverter.xyzd50TosRGBLinear(...self.#toXyzd50()), self.alpha),
-    [Format.DISPLAY_P3]: (self: Legacy) =>
-        new ColorFunction(Format.DISPLAY_P3, ...ColorConverter.xyzd50ToDisplayP3(...self.#toXyzd50()), self.alpha),
-    [Format.A98_RGB]: (self: Legacy) =>
-        new ColorFunction(Format.A98_RGB, ...ColorConverter.xyzd50ToAdobeRGB(...self.#toXyzd50()), self.alpha),
-    [Format.PROPHOTO_RGB]: (self: Legacy) =>
-        new ColorFunction(Format.PROPHOTO_RGB, ...ColorConverter.xyzd50ToProPhoto(...self.#toXyzd50()), self.alpha),
-    [Format.REC_2020]: (self: Legacy) =>
-        new ColorFunction(Format.REC_2020, ...ColorConverter.xyzd50ToRec2020(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ]: (self: Legacy) =>
-        new ColorFunction(Format.XYZ, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-    [Format.XYZ_D50]: (self: Legacy) => new ColorFunction(Format.XYZ_D50, ...self.#toXyzd50(), self.alpha),
-    [Format.XYZ_D65]: (self: Legacy) =>
-        new ColorFunction(Format.XYZ_D65, ...ColorConverter.xyzd50ToD65(...self.#toXyzd50()), self.alpha),
-  };
-
-  #toXyzd50(): Color3D {
-    const [r, g, b] = this.#rgba;
-    return ColorConverter.srgbToXyzd50(r, g, b);
-  }
-
-  get alpha(): number|null {
-    switch (this.format()) {
-      case Format.HEXA:
-      case Format.RGBA:
-        return this.#rgba[3];
-      default:
-        return null;
-    }
-  }
-
-  asLegacyColor(): Legacy {
-    return this;
-  }
-
-  nickname(): Nickname|null {
-    const nickname = RGBAToNickname.get(String(this.canonicalRGBA()));
-    return nickname ? new Nickname(nickname, this) : null;
-  }
-
-  shortHex(): ShortHex|null {
-    for (let i = 0; i < 4; ++i) {
-      const c = Math.round(this.#rgba[i] * 255);
-      // Check if the two digits of each are identical: #aabbcc => #abc
-      if (c % 0x11) {
-        return null;
-      }
-    }
-    return new ShortHex(this);
-  }
-
-  constructor(rgba: Color3D|Color4DOr3D, format: LegacyColor, authoredText?: string) {
-    this.#authoredText = authoredText || null;
-    this.#format = format;
-    this.#rawParams = [rgba[0], rgba[1], rgba[2]];
-
-    this.#rgba = [
-      clamp(rgba[0], {min: 0, max: 1}),
-      clamp(rgba[1], {min: 0, max: 1}),
-      clamp(rgba[2], {min: 0, max: 1}),
-      clamp(rgba[3] ?? 1, {min: 0, max: 1}),
-    ];
-  }
-
-  static fromHex(hex: string, text: string): Legacy|ShortHex {
-    hex = hex.toLowerCase();
-    // Possible hex representations with alpha are fffA and ffffffAA
-    const hasAlpha = hex.length === 4 || hex.length === 8;
-    const format = hasAlpha ? Format.HEXA : Format.HEX;
-    const isShort = hex.length <= 4;
-    if (isShort) {
-      hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2) +
-          hex.charAt(3) + hex.charAt(3);
-    }
-    const r = parseInt(hex.substring(0, 2), 16);
-    const g = parseInt(hex.substring(2, 4), 16);
-    const b = parseInt(hex.substring(4, 6), 16);
-    let a = 1;
-    if (hex.length === 8) {
-      a = parseInt(hex.substring(6, 8), 16) / 255;
-    }
-    const color = new Legacy([r / 255, g / 255, b / 255, a], format, text);
-    return isShort ? new ShortHex(color) : color;
-  }
-
-  static fromRGBAFunction(r: string, g: string, b: string, alpha: string|undefined, text: string): Legacy|null {
-    const rgba = [
-      parseRgbNumeric(r),
-      parseRgbNumeric(g),
-      parseRgbNumeric(b),
-      alpha ? parseAlphaNumeric(alpha) : 1,
-    ];
-
-    if (!Platform.ArrayUtilities.arrayDoesNotContainNullOrUndefined(rgba)) {
-      return null;
-    }
-    return new Legacy(rgba as Color4D, alpha ? Format.RGBA : Format.RGB, text);
-  }
-
-  static fromRGBA(rgba: number[], authoredText?: string): Legacy {
-    return new Legacy([rgba[0] / 255, rgba[1] / 255, rgba[2] / 255, rgba[3]], Format.RGBA, authoredText);
-  }
-
-  static fromHSVA(hsva: Color4D): Legacy {
-    const rgba = hsva2rgba(hsva);
-    return new Legacy(rgba, Format.RGBA);
-  }
-
-  is<T extends Format>(format: T): this is ReturnType<ColorConversions[T]> {
-    return format === this.format();
-  }
-  as<T extends Format>(format: T): ReturnType<ColorConversions[T]> {
-    if (format === this.format()) {
-      return this as ReturnType<ColorConversions[T]>;
-    }
-    return Legacy.#conversions[format](this) as ReturnType<ColorConversions[T]>;
-  }
-
-  format(): LegacyColor {
-    return this.#format;
-  }
-
-  hasAlpha(): boolean {
-    return this.#rgba[3] !== 1;
-  }
-
-  detectHEXFormat(): Format {
-    const hasAlpha = this.hasAlpha();
-    return hasAlpha ? Format.HEXA : Format.HEX;
-  }
-
-  asString(format?: Format): string {
-    if (format) {
-      return this.as(format).asString();
-    }
-    return this.#stringify(format, this.#rgba[0], this.#rgba[1], this.#rgba[2]);
-  }
-  #stringify(format: LegacyColor|undefined, r: number, g: number, b: number): string {
-    if (!format) {
-      format = this.#format;
-    }
-
-    function toHexValue(value: number): string {
-      const hex = Math.round(value * 255).toString(16);
-      return hex.length === 1 ? '0' + hex : hex;
-    }
-
-    switch (format) {
-      case Format.RGB:
-      case Format.RGBA: {
-        const start = Platform.StringUtilities.sprintf('rgb(%d %d %d', toRgbValue(r), toRgbValue(g), toRgbValue(b));
-        if (this.hasAlpha()) {
-          return start + Platform.StringUtilities.sprintf(' / %d%)', Math.round(this.#rgba[3] * 100));
-        }
-        return start + ')';
-      }
-      case Format.HEX:
-      case Format.HEXA: {
-        if (this.hasAlpha()) {
-          return Platform.StringUtilities
-              .sprintf('#%s%s%s%s', toHexValue(r), toHexValue(g), toHexValue(b), toHexValue(this.#rgba[3]))
-              .toLowerCase();
-        }
-        return Platform.StringUtilities.sprintf('#%s%s%s', toHexValue(r), toHexValue(g), toHexValue(b)).toLowerCase();
-      }
-    }
-  }
-  getAuthoredText(): string|null {
-    return this.#authoredText ?? null;
-  }
-
-  getRawParameters(): Color3D {
-    return [...this.#rawParams];
-  }
-  getAsRawString(format?: Format): string {
-    if (format) {
-      return this.as(format).getAsRawString();
-    }
-    return this.#stringify(format, ...this.#rawParams);
-  }
-  isGamutClipped(): boolean {
-    return !equals(
-        this.#rawParams.map(toRgbValue), [this.#rgba[0], this.#rgba[1], this.#rgba[2]].map(toRgbValue),
-        WIDE_RANGE_EPSILON);
-  }
-
-  rgba(): Color4D {
-    return [...this.#rgba];
-  }
-
-  canonicalRGBA(): Color4D {
-    const rgba = new Array(4);
-    for (let i = 0; i < 3; ++i) {
-      rgba[i] = Math.round(this.#rgba[i] * 255);
-    }
-    rgba[3] = this.#rgba[3];
-    return rgba as Color4D;
-  }
-
-  toProtocolRGBA(): {
-    r: number,
-    g: number,
-    b: number,
-    a: (number|undefined),
-  } {
-    const rgba = this.canonicalRGBA();
-    const result: {
-      r: number,
-      g: number,
-      b: number,
-      a: number|undefined,
-    } = {r: rgba[0], g: rgba[1], b: rgba[2], a: undefined};
-    if (rgba[3] !== 1) {
-      result.a = rgba[3];
-    }
-    return result;
-  }
-
-  invert(): Legacy {
-    const rgba: Color4D = [0, 0, 0, 0];
-    rgba[0] = 1 - this.#rgba[0];
-    rgba[1] = 1 - this.#rgba[1];
-    rgba[2] = 1 - this.#rgba[2];
-    rgba[3] = this.#rgba[3];
-    return new Legacy(rgba, Format.RGBA);
-  }
-
-  /**
-   * Returns a new color using the NTSC formula for making a RGB color grayscale.
-   * Note: We override with an alpha of 50% to enhance the dimming effect.
-   */
-  grayscale(): Legacy {
-    const [r, g, b] = this.#rgba;
-    const gray = r * 0.299 + g * 0.587 + b * 0.114;
-    return new Legacy([gray, gray, gray, 0.5], Format.RGBA);
-  }
-
-  setAlpha(alpha: number): Legacy {
-    const rgba: Color4D = [...this.#rgba];
-    rgba[3] = alpha;
-    return new Legacy(rgba, Format.RGBA);
-  }
-
-  blendWith(fgColor: Legacy): Legacy {
-    const rgba: Color4D = blendColors(fgColor.#rgba, this.#rgba);
-    return new Legacy(rgba, Format.RGBA);
-  }
-
-  blendWithAlpha(alpha: number): Legacy {
-    const rgba: Color4D = [...this.#rgba];
-    rgba[3] *= alpha;
-    return new Legacy(rgba, Format.RGBA);
-  }
-
-  setFormat(format: LegacyColor): void {
-    this.#format = format;
-  }
-
-  equal(other: Color): boolean {
-    const legacy = other.as(this.#format);
-    return equals(toRgbValue(this.#rgba[0]), toRgbValue(legacy.#rgba[0]), WIDE_RANGE_EPSILON) &&
-        equals(toRgbValue(this.#rgba[1]), toRgbValue(legacy.#rgba[1]), WIDE_RANGE_EPSILON) &&
-        equals(toRgbValue(this.#rgba[2]), toRgbValue(legacy.#rgba[2]), WIDE_RANGE_EPSILON) &&
-        equals(this.#rgba[3], legacy.#rgba[3]);
-  }
-}
-
-export const Regex =
-    /((?:rgba?|hsla?|hwba?|lab|lch|oklab|oklch|color)\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
-export const ColorMixRegex = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;
-
-const COLOR_TO_RGBA_ENTRIES: Array<readonly[string, number[]]> = [
-  ['aliceblue', [240, 248, 255]],
-  ['antiquewhite', [250, 235, 215]],
-  ['aqua', [0, 255, 255]],
-  ['aquamarine', [127, 255, 212]],
-  ['azure', [240, 255, 255]],
-  ['beige', [245, 245, 220]],
-  ['bisque', [255, 228, 196]],
-  ['black', [0, 0, 0]],
-  ['blanchedalmond', [255, 235, 205]],
-  ['blue', [0, 0, 255]],
-  ['blueviolet', [138, 43, 226]],
-  ['brown', [165, 42, 42]],
-  ['burlywood', [222, 184, 135]],
-  ['cadetblue', [95, 158, 160]],
-  ['chartreuse', [127, 255, 0]],
-  ['chocolate', [210, 105, 30]],
-  ['coral', [255, 127, 80]],
-  ['cornflowerblue', [100, 149, 237]],
-  ['cornsilk', [255, 248, 220]],
-  ['crimson', [237, 20, 61]],
-  ['cyan', [0, 255, 255]],
-  ['darkblue', [0, 0, 139]],
-  ['darkcyan', [0, 139, 139]],
-  ['darkgoldenrod', [184, 134, 11]],
-  ['darkgray', [169, 169, 169]],
-  ['darkgrey', [169, 169, 169]],
-  ['darkgreen', [0, 100, 0]],
-  ['darkkhaki', [189, 183, 107]],
-  ['darkmagenta', [139, 0, 139]],
-  ['darkolivegreen', [85, 107, 47]],
-  ['darkorange', [255, 140, 0]],
-  ['darkorchid', [153, 50, 204]],
-  ['darkred', [139, 0, 0]],
-  ['darksalmon', [233, 150, 122]],
-  ['darkseagreen', [143, 188, 143]],
-  ['darkslateblue', [72, 61, 139]],
-  ['darkslategray', [47, 79, 79]],
-  ['darkslategrey', [47, 79, 79]],
-  ['darkturquoise', [0, 206, 209]],
-  ['darkviolet', [148, 0, 211]],
-  ['deeppink', [255, 20, 147]],
-  ['deepskyblue', [0, 191, 255]],
-  ['dimgray', [105, 105, 105]],
-  ['dimgrey', [105, 105, 105]],
-  ['dodgerblue', [30, 144, 255]],
-  ['firebrick', [178, 34, 34]],
-  ['floralwhite', [255, 250, 240]],
-  ['forestgreen', [34, 139, 34]],
-  ['fuchsia', [255, 0, 255]],
-  ['gainsboro', [220, 220, 220]],
-  ['ghostwhite', [248, 248, 255]],
-  ['gold', [255, 215, 0]],
-  ['goldenrod', [218, 165, 32]],
-  ['gray', [128, 128, 128]],
-  ['grey', [128, 128, 128]],
-  ['green', [0, 128, 0]],
-  ['greenyellow', [173, 255, 47]],
-  ['honeydew', [240, 255, 240]],
-  ['hotpink', [255, 105, 180]],
-  ['indianred', [205, 92, 92]],
-  ['indigo', [75, 0, 130]],
-  ['ivory', [255, 255, 240]],
-  ['khaki', [240, 230, 140]],
-  ['lavender', [230, 230, 250]],
-  ['lavenderblush', [255, 240, 245]],
-  ['lawngreen', [124, 252, 0]],
-  ['lemonchiffon', [255, 250, 205]],
-  ['lightblue', [173, 216, 230]],
-  ['lightcoral', [240, 128, 128]],
-  ['lightcyan', [224, 255, 255]],
-  ['lightgoldenrodyellow', [250, 250, 210]],
-  ['lightgreen', [144, 238, 144]],
-  ['lightgray', [211, 211, 211]],
-  ['lightgrey', [211, 211, 211]],
-  ['lightpink', [255, 182, 193]],
-  ['lightsalmon', [255, 160, 122]],
-  ['lightseagreen', [32, 178, 170]],
-  ['lightskyblue', [135, 206, 250]],
-  ['lightslategray', [119, 136, 153]],
-  ['lightslategrey', [119, 136, 153]],
-  ['lightsteelblue', [176, 196, 222]],
-  ['lightyellow', [255, 255, 224]],
-  ['lime', [0, 255, 0]],
-  ['limegreen', [50, 205, 50]],
-  ['linen', [250, 240, 230]],
-  ['magenta', [255, 0, 255]],
-  ['maroon', [128, 0, 0]],
-  ['mediumaquamarine', [102, 205, 170]],
-  ['mediumblue', [0, 0, 205]],
-  ['mediumorchid', [186, 85, 211]],
-  ['mediumpurple', [147, 112, 219]],
-  ['mediumseagreen', [60, 179, 113]],
-  ['mediumslateblue', [123, 104, 238]],
-  ['mediumspringgreen', [0, 250, 154]],
-  ['mediumturquoise', [72, 209, 204]],
-  ['mediumvioletred', [199, 21, 133]],
-  ['midnightblue', [25, 25, 112]],
-  ['mintcream', [245, 255, 250]],
-  ['mistyrose', [255, 228, 225]],
-  ['moccasin', [255, 228, 181]],
-  ['navajowhite', [255, 222, 173]],
-  ['navy', [0, 0, 128]],
-  ['oldlace', [253, 245, 230]],
-  ['olive', [128, 128, 0]],
-  ['olivedrab', [107, 142, 35]],
-  ['orange', [255, 165, 0]],
-  ['orangered', [255, 69, 0]],
-  ['orchid', [218, 112, 214]],
-  ['palegoldenrod', [238, 232, 170]],
-  ['palegreen', [152, 251, 152]],
-  ['paleturquoise', [175, 238, 238]],
-  ['palevioletred', [219, 112, 147]],
-  ['papayawhip', [255, 239, 213]],
-  ['peachpuff', [255, 218, 185]],
-  ['peru', [205, 133, 63]],
-  ['pink', [255, 192, 203]],
-  ['plum', [221, 160, 221]],
-  ['powderblue', [176, 224, 230]],
-  ['purple', [128, 0, 128]],
-  ['rebeccapurple', [102, 51, 153]],
-  ['red', [255, 0, 0]],
-  ['rosybrown', [188, 143, 143]],
-  ['royalblue', [65, 105, 225]],
-  ['saddlebrown', [139, 69, 19]],
-  ['salmon', [250, 128, 114]],
-  ['sandybrown', [244, 164, 96]],
-  ['seagreen', [46, 139, 87]],
-  ['seashell', [255, 245, 238]],
-  ['sienna', [160, 82, 45]],
-  ['silver', [192, 192, 192]],
-  ['skyblue', [135, 206, 235]],
-  ['slateblue', [106, 90, 205]],
-  ['slategray', [112, 128, 144]],
-  ['slategrey', [112, 128, 144]],
-  ['snow', [255, 250, 250]],
-  ['springgreen', [0, 255, 127]],
-  ['steelblue', [70, 130, 180]],
-  ['tan', [210, 180, 140]],
-  ['teal', [0, 128, 128]],
-  ['thistle', [216, 191, 216]],
-  ['tomato', [255, 99, 71]],
-  ['turquoise', [64, 224, 208]],
-  ['violet', [238, 130, 238]],
-  ['wheat', [245, 222, 179]],
-  ['white', [255, 255, 255]],
-  ['whitesmoke', [245, 245, 245]],
-  ['yellow', [255, 255, 0]],
-  ['yellowgreen', [154, 205, 50]],
-  ['transparent', [0, 0, 0, 0]],
-];
-
-console.assert(
-    COLOR_TO_RGBA_ENTRIES.every(([nickname]) => nickname.toLowerCase() === nickname),
-    'All color nicknames must be lowercase.');
-
-export const Nicknames = new Map(COLOR_TO_RGBA_ENTRIES);
-
-const RGBAToNickname = new Map(
-    // Default opacity to 1 if the color only specified 3 channels
-    COLOR_TO_RGBA_ENTRIES.map(([nickname, [r, g, b, a = 1]]) => {
-      return [String([r, g, b, a]), nickname];
-    }),
-);
-
-const LAYOUT_LINES_HIGHLIGHT_COLOR = [127, 32, 210];
-
-export const PageHighlight = {
-  Content: Legacy.fromRGBA([111, 168, 220, .66]),
-  ContentLight: Legacy.fromRGBA([111, 168, 220, .5]),
-  ContentOutline: Legacy.fromRGBA([9, 83, 148]),
-  Padding: Legacy.fromRGBA([147, 196, 125, .55]),
-  PaddingLight: Legacy.fromRGBA([147, 196, 125, .4]),
-  Border: Legacy.fromRGBA([255, 229, 153, .66]),
-  BorderLight: Legacy.fromRGBA([255, 229, 153, .5]),
-  Margin: Legacy.fromRGBA([246, 178, 107, .66]),
-  MarginLight: Legacy.fromRGBA([246, 178, 107, .5]),
-  EventTarget: Legacy.fromRGBA([255, 196, 196, .66]),
-  Shape: Legacy.fromRGBA([96, 82, 177, 0.8]),
-  ShapeMargin: Legacy.fromRGBA([96, 82, 127, .6]),
-  CssGrid: Legacy.fromRGBA([0x4b, 0, 0x82, 1]),
-  LayoutLine: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, 1]),
-  GridBorder: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, 1]),
-  GapBackground: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .3]),
-  GapHatch: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .8]),
-  GridAreaBorder: Legacy.fromRGBA([26, 115, 232, 1]),
-};
-
-export const SourceOrderHighlight = {
-  ParentOutline: Legacy.fromRGBA([224, 90, 183, 1]),
-  ChildOutline: Legacy.fromRGBA([0, 120, 212, 1]),
-};
-
-export const IsolationModeHighlight = {
-  Resizer: Legacy.fromRGBA([222, 225, 230, 1]),  // --color-background-elevation-2
-  ResizerHandle: Legacy.fromRGBA([166, 166, 166, 1]),
-  Mask: Legacy.fromRGBA([248, 249, 249, 1]),
-};
-
-type Space = number|{
-  min: number,
-  max: number,
-  count: (number|undefined),
-};
-
-export class Generator {
-  readonly #hueSpace: Space;
-  readonly #satSpace: Space;
-  readonly #lightnessSpace: Space;
-  readonly #alphaSpace: Space;
-  readonly #colors = new Map<string, string>();
-  constructor(hueSpace?: Space, satSpace?: Space, lightnessSpace?: Space, alphaSpace?: Space) {
-    this.#hueSpace = hueSpace || {min: 0, max: 360, count: undefined};
-    this.#satSpace = satSpace || 67;
-    this.#lightnessSpace = lightnessSpace || 80;
-    this.#alphaSpace = alphaSpace || 1;
-  }
-
-  setColorForID(id: string, color: string): void {
-    this.#colors.set(id, color);
-  }
-
-  colorForID(id: string): string {
-    let color = this.#colors.get(id);
-    if (!color) {
-      color = this.generateColorForID(id);
-      this.#colors.set(id, color);
-    }
-    return color;
-  }
-
-  private generateColorForID(id: string): string {
-    const hash = Platform.StringUtilities.hashCode(id);
-    const h = this.indexToValueInSpace(hash, this.#hueSpace);
-    const s = this.indexToValueInSpace(hash >> 8, this.#satSpace);
-    const l = this.indexToValueInSpace(hash >> 16, this.#lightnessSpace);
-    const a = this.indexToValueInSpace(hash >> 24, this.#alphaSpace);
-    const start = `hsl(${h}deg ${s}% ${l}%`;
-    if (a !== 1) {
-      return `${start} / ${Math.floor(a * 100)}%)`;
-    }
-    return `${start})`;
-  }
-
-  private indexToValueInSpace(index: number, space: Space): number {
-    if (typeof space === 'number') {
-      return space;
-    }
-    const count = space.count || space.max - space.min;
-    index %= count;
-    return space.min + Math.floor(index / (count - 1) * (space.max - space.min));
-  }
-}