sculpted 0.3.5 → 0.3.6

package/dist/ui.mjs

@@ -2450,7 +2450,7 @@ const oppositeSideMap = {
 	bottom: "top",
 	top: "bottom"
 };
-function clamp(start, value, end) {
+function clamp$1(start, value, end) {
 	return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -2886,14 +2886,14 @@ const shift$1 = function(options) {
 				const maxSide = mainAxis === "y" ? "bottom" : "right";
 				const min = mainAxisCoord + overflow[minSide];
 				const max = mainAxisCoord - overflow[maxSide];
-				mainAxisCoord = clamp(min, mainAxisCoord, max);
+				mainAxisCoord = clamp$1(min, mainAxisCoord, max);
 			}
 			if (checkCrossAxis) {
 				const minSide = crossAxis === "y" ? "top" : "left";
 				const maxSide = crossAxis === "y" ? "bottom" : "right";
 				const min = crossAxisCoord + overflow[minSide];
 				const max = crossAxisCoord - overflow[maxSide];
-				crossAxisCoord = clamp(min, crossAxisCoord, max);
+				crossAxisCoord = clamp$1(min, crossAxisCoord, max);
 			}
 			const limitedCoords = limiter.fn({
 				...state,
@@ -4606,10 +4606,6 @@ function tokenPathToCssVariableSuffix(value) {
 function previewChangeKey(editId, path) {
 	return `${editId}\u0000${path.join(".")}`;
 }
-function styleEditResponseMessage(response) {
-	if (response.error) return response.error.message;
-	return "Save failed.";
-}
 function errorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
@@ -4627,6 +4623,2559 @@ function previewChangeMapsEqual(left, right) {
 	return true;
 }
 //#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/detectFormat.js
+/** Shared with `src/conversions/hex.ts`. Capture group is used there; .test() ignores it here. */
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGBA_STR_RE = /^rgba\s*\(/i;
+const RGB_STR_RE = /^rgb\s*\(/i;
+const HSL_STR_RE = /^hsl\s*\(/i;
+const HSV_STR_RE = /^hsv\s*\(/i;
+/**
+* Classify a color input by shape, returning the {@link ColorFormat}
+* key used to dispatch format-specific converters. Returns the
+* sentinel `'UNKNOWN'` when the input doesn't match any recognized
+* shape; callers that only need a boolean guard should prefer
+* {@link isColor} instead.
+*
+* Pure shape detection; no value validation. `detectFormat('#zzz')`
+* still returns `'UNKNOWN'` because the hex regex rejects it, but
+* `detectFormat({ r: 999, g: -1, b: 'nope' })` returns `'RGB'` (the
+* shape matches; the values are the converter's problem).
+*
+* @example
+* detectFormat('#ff0000');              // 'HEX'
+* detectFormat('rgb(255, 0, 0)');       // 'RGB'
+* detectFormat([255, 0, 0]);            // 'RGB'
+* detectFormat([255, 0, 0, 0.5]);       // 'RGBA'
+* detectFormat({ h: 0, s: 100, l: 50 });// 'HSL'
+* detectFormat('banana');               // 'UNKNOWN'
+*/
+function detectFormat(input) {
+	if (typeof input === "string") {
+		if (input.length === 0) return "UNKNOWN";
+		if (HEX_RE.test(input)) return "HEX";
+		if (RGBA_STR_RE.test(input)) return "RGBA";
+		if (RGB_STR_RE.test(input)) return "RGB";
+		if (HSL_STR_RE.test(input)) return "HSL";
+		if (HSV_STR_RE.test(input)) return "HSV";
+		return "UNKNOWN";
+	}
+	if (Array.isArray(input)) {
+		if (input.length === 4) return "RGBA";
+		if (input.length === 3) return "RGB";
+		return "UNKNOWN";
+	}
+	if (input !== null && typeof input === "object") {
+		const has = Object.hasOwn;
+		if (has(input, "h") && has(input, "v")) return "HSV";
+		if (has(input, "h") && has(input, "l")) return "HSL";
+		if (has(input, "r") && has(input, "a")) return "RGBA";
+		if (has(input, "r")) return "RGB";
+		return "UNKNOWN";
+	}
+	return "UNKNOWN";
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/math/clamp.js
+/**
+* Clamp n to [lo, hi]. Caller must ensure n is a finite number.
+*/
+function clamp(n, lo, hi) {
+	return Math.max(lo, Math.min(hi, n));
+}
+/**
+* Require a finite number at an API boundary; throws otherwise.
+* Used by converter entry points to reject NaN, Infinity, and non-numeric
+* values before they propagate through color math.
+*/
+function requireFinite(n, label) {
+	if (typeof n !== "number" || !Number.isFinite(n)) throw new Error(`Expected finite number for ${label}, got ${typeof n}: ${String(n)}`);
+	return n;
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/conversions/hex.js
+/**
+* Parse a hex color string into the canonical Rgba representation.
+* Accepts 3-digit (`#rgb`), 6-digit (`#rrggbb`), and 8-digit (`#rrggbbaa`).
+* Throws on any other input shape.
+*/
+function hexToRgba(hex) {
+	const body = HEX_RE.exec(hex)?.[1];
+	if (!body) throw new Error(`Invalid hex color: ${hex}`);
+	if (body.length === 3) {
+		const r = body.charAt(0);
+		const g = body.charAt(1);
+		const b = body.charAt(2);
+		return {
+			r: parseInt(r + r, 16),
+			g: parseInt(g + g, 16),
+			b: parseInt(b + b, 16),
+			a: 1
+		};
+	}
+	return {
+		r: parseInt(body.slice(0, 2), 16),
+		g: parseInt(body.slice(2, 4), 16),
+		b: parseInt(body.slice(4, 6), 16),
+		a: body.length === 8 ? parseInt(body.slice(6, 8), 16) / 255 : 1
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/math/hueSector.js
+/**
+* Map a normalized hue sector value (range [0, 6)) plus chroma and its
+* secondary into the primary-color tuple `[r', g', b']` used by the
+* standard HSL→RGB and HSV→RGB algorithms. Each component is in [0, chroma].
+*
+* Shared by `hslToRgba` and `hsvToRgba`: same six-sector table, different
+* formulas for chroma and the offset. The caller adds the offset and
+* scales by 255.
+*
+*   hueSector = h / 60 (h wrapped to [0, 360))
+*   chroma    = HSL: (1 − |2l − 1|)·s ; HSV: v·s
+*   secondary = chroma · (1 − |hueSector mod 2 − 1|)
+*/
+function hueSectorToPrime(hueSector, chroma, secondary) {
+	if (hueSector < 1) return [
+		chroma,
+		secondary,
+		0
+	];
+	if (hueSector < 2) return [
+		secondary,
+		chroma,
+		0
+	];
+	if (hueSector < 3) return [
+		0,
+		chroma,
+		secondary
+	];
+	if (hueSector < 4) return [
+		0,
+		secondary,
+		chroma
+	];
+	if (hueSector < 5) return [
+		secondary,
+		0,
+		chroma
+	];
+	return [
+		chroma,
+		0,
+		secondary
+	];
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/conversions/hsl.js
+const HSL_RE = /^hsl\s*\(\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)%?\s*,\s*(-?\d+(?:\.\d+)?)%?\s*\)$/i;
+/**
+* Parse HSL input (string or object) into canonical Rgba.
+* Hue wraps modulo 360; saturation and lightness are 0..100 percent.
+*/
+function hslToRgba(input) {
+	let h;
+	let s;
+	let l;
+	if (typeof input === "string") {
+		const match = HSL_RE.exec(input);
+		if (!match) throw new Error(`Invalid hsl string: ${input}`);
+		h = Number(match[1]);
+		s = Number(match[2]);
+		l = Number(match[3]);
+	} else {
+		h = requireFinite(input.h, "h");
+		s = requireFinite(input.s, "s");
+		l = requireFinite(input.l, "l");
+	}
+	const saturation = s / 100;
+	const lightness = l / 100;
+	if (saturation === 0) {
+		const gray = Math.round(lightness * 255);
+		return {
+			r: gray,
+			g: gray,
+			b: gray,
+			a: 1
+		};
+	}
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const hueSector = (h % 360 + 360) % 360 / 60;
+	const secondary = chroma * (1 - Math.abs(hueSector % 2 - 1));
+	const lightnessOffset = lightness - chroma / 2;
+	const [rPrime, gPrime, bPrime] = hueSectorToPrime(hueSector, chroma, secondary);
+	return {
+		r: Math.round((rPrime + lightnessOffset) * 255),
+		g: Math.round((gPrime + lightnessOffset) * 255),
+		b: Math.round((bPrime + lightnessOffset) * 255),
+		a: 1
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/conversions/hsv.js
+const HSV_RE = /^hsv\s*\(\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)%?\s*,\s*(-?\d+(?:\.\d+)?)%?\s*\)$/i;
+/**
+* Parse HSV input (string or object) into canonical Rgba.
+* Hue wraps modulo 360; saturation and value are 0..100 percent.
+*/
+function hsvToRgba(input) {
+	let h;
+	let s;
+	let v;
+	if (typeof input === "string") {
+		const match = HSV_RE.exec(input);
+		if (!match) throw new Error(`Invalid hsv string: ${input}`);
+		h = Number(match[1]);
+		s = Number(match[2]);
+		v = Number(match[3]);
+	} else {
+		h = requireFinite(input.h, "h");
+		s = requireFinite(input.s, "s");
+		v = requireFinite(input.v, "v");
+	}
+	const saturation = s / 100;
+	const value = v / 100;
+	const chroma = value * saturation;
+	const hueSector = (h % 360 + 360) % 360 / 60;
+	const secondary = chroma * (1 - Math.abs(hueSector % 2 - 1));
+	const valueOffset = value - chroma;
+	const [rPrime, gPrime, bPrime] = hueSectorToPrime(hueSector, chroma, secondary);
+	return {
+		r: Math.round((rPrime + valueOffset) * 255),
+		g: Math.round((gPrime + valueOffset) * 255),
+		b: Math.round((bPrime + valueOffset) * 255),
+		a: 1
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/math/colorSpace.js
+/**
+* Color-space conversions needed by the perceptual distance metrics.
+*
+* Two pipelines:
+*   CIELAB:  sRGB (0..255)  →  linear RGB  →  XYZ (D65)  →  Lab
+*   OKLAB:   sRGB (0..255)  →  linear RGB  →  LMS (cbrt)  →  OKLAB
+*
+* References:
+*   sRGB EOTF / companding:      IEC 61966-2-1
+*   sRGB → XYZ (D65):            Bruce Lindbloom, http://www.brucelindbloom.com/
+*   XYZ → Lab:                   CIE 15:2004
+*   OKLAB:                       Ottosson, https://bottosson.github.io/posts/oklab/
+*/
+/** sRGB → linear for a single channel in [0, 255]. Returns [0, 1]. */
+function srgbToLinear(channel) {
+	const s = channel / 255;
+	return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+}
+/** Rgba → linear RGB triple in [0, 1] (alpha dropped). */
+function rgbaToLinearRgb(rgba) {
+	return [
+		srgbToLinear(rgba.r),
+		srgbToLinear(rgba.g),
+		srgbToLinear(rgba.b)
+	];
+}
+/**
+* Linear RGB (D65) → CIE XYZ (D65), using the standard sRGB matrix.
+* Input and output both in [0, 1] on each axis (approximately; Y = 1 is white).
+*/
+function linearRgbToXyz(r, g, b) {
+	return [
+		r * .4124564 + g * .3575761 + b * .1804375,
+		r * .2126729 + g * .7151522 + b * .072175,
+		r * .0193339 + g * .119192 + b * .9503041
+	];
+}
+const XN = .95047;
+const YN = 1;
+const ZN = 1.08883;
+function labF(t) {
+	const DELTA = 6 / 29;
+	return t > DELTA ** 3 ? Math.cbrt(t) : t / (3 * DELTA ** 2) + 4 / 29;
+}
+/** CIE XYZ (D65) → CIE Lab. L ∈ [0, 100] approx; a,b unbounded but typically [-128, 127]. */
+function xyzToLab(x, y, z) {
+	const fx = labF(x / XN);
+	const fy = labF(y / YN);
+	const fz = labF(z / ZN);
+	return [
+		116 * fy - 16,
+		500 * (fx - fy),
+		200 * (fy - fz)
+	];
+}
+/** Rgba (sRGB, 0..255) → CIE Lab. Canonical pipeline for perceptual distance. */
+function rgbaToLab(rgba) {
+	const [r, g, b] = rgbaToLinearRgb(rgba);
+	const [x, y, z] = linearRgbToXyz(r, g, b);
+	return xyzToLab(x, y, z);
+}
+/**
+* Linear sRGB → OKLAB (Björn Ottosson, 2020). OKLAB is strictly more
+* perceptually uniform than CIELAB, especially in the blue/purple region
+* where even CIEDE2000 has residual error. Distance in OKLAB is plain
+* Euclidean — no weighting formula needed, because the space itself is
+* designed around uniformity.
+*
+* Reference: https://bottosson.github.io/posts/oklab/
+*/
+function linearRgbToOklab(r, g, b) {
+	const l = .4122214708 * r + .5363325363 * g + .0514459929 * b;
+	const m = .2119034982 * r + .6806995451 * g + .1073969566 * b;
+	const s = .0883024619 * r + .2817188376 * g + .6299787005 * b;
+	const l_ = Math.cbrt(l);
+	const m_ = Math.cbrt(m);
+	const s_ = Math.cbrt(s);
+	return [
+		.2104542553 * l_ + .793617785 * m_ - .0040720468 * s_,
+		1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_,
+		.0259040371 * l_ + .7827717662 * m_ - .808675766 * s_
+	];
+}
+/** Rgba (sRGB, 0..255) → OKLAB. */
+function rgbaToOklab(rgba) {
+	const [r, g, b] = rgbaToLinearRgb(rgba);
+	return linearRgbToOklab(r, g, b);
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/math/deltaE.js
+/**
+* Color-difference metrics. Inputs are `Lab` triples (L, a, b). The
+* CIELAB family (ΔE*76 / ΔE*94 / ΔE*00) takes coordinates from
+* `rgbaToLab`; ΔE*ok takes coordinates from `rgbaToOklab`. Both spaces
+* share the `Lab` tuple shape but are not interchangeable — see
+* `deltaEokSquared` below.
+*
+* Within the CIELAB family, the metrics differ in how each region of
+* Lab space is weighted:
+*   ΔE*76  — simple Euclidean in Lab (CIE 1976). Fast, decent.
+*   ΔE*94  — adds chroma/hue weighting (CIE 1994). Better saturation handling.
+*   ΔE00  — also adjusts L/C/h + rotation correction in blue-purple region
+*            (CIE 2000, aka CIEDE2000). Current industry standard.
+*
+* References:
+*   CIE 15:2004 (Colorimetry), CIE TC1-29 (ΔE2000).
+*   G. Sharma, W. Wu, E.N. Dalal, "The CIEDE2000 Color-Difference Formula"
+*   (Color Research & Application, 2005) — canonical test vectors.
+*/
+/**
+* ΔE*ab (CIE 1976). Simple Euclidean distance in Lab.
+* Returns the *square* for speed — identify loops only need argmin, and
+* sqrt is monotonic. Use `deltaE76` if you need the actual distance.
+*/
+function deltaE76Squared(p, q) {
+	const dl = p[0] - q[0];
+	const da = p[1] - q[1];
+	const db = p[2] - q[2];
+	return dl * dl + da * da + db * db;
+}
+/**
+* ΔE*94 (CIE 1994). Weights the chroma and hue contributions relative to
+* Lab Euclidean distance — fixes the "saturated colors feel too far apart"
+* problem of ΔE*76. Uses graphic-arts constants (kL=1, K1=0.045, K2=0.015).
+*
+* Not symmetric in the strict sense (reference vs sample), but we treat
+* both inputs as graphic-arts samples — the formula reduces to a
+* symmetric form below.
+*/
+function deltaE94(p, q) {
+	const [l1, a1, b1] = p;
+	const [l2, a2, b2] = q;
+	const dL = l1 - l2;
+	const c1 = Math.hypot(a1, b1);
+	const dC = c1 - Math.hypot(a2, b2);
+	const da = a1 - a2;
+	const db = b1 - b2;
+	const dH2 = da * da + db * db - dC * dC;
+	const dH2Safe = dH2 < 0 ? 0 : dH2;
+	const K1 = .045;
+	const K2 = .015;
+	const sL = 1;
+	const sC = 1 + K1 * c1;
+	const sH = 1 + K2 * c1;
+	const termL = dL / sL;
+	const termC = dC / sC;
+	const termH = Math.sqrt(dH2Safe) / sH;
+	return Math.sqrt(termL * termL + termC * termC + termH * termH);
+}
+const DEG = Math.PI / 180;
+const RAD = 180 / Math.PI;
+function hueDeg(b, a) {
+	if (b === 0 && a === 0) return 0;
+	return (Math.atan2(b, a) * RAD + 360) % 360;
+}
+/**
+* ΔE*00 (CIE 2000 / CIEDE2000). Current industry-standard perceptual
+* color-difference formula. Fixes the saturated-blue failure of ΔE76/94
+* with a rotation term in the blue-purple region (h ≈ 275°).
+*
+* kL / kC / kH are parametric factors (default 1/1/1 = graphic arts).
+* Reference: G. Sharma, W. Wu, E.N. Dalal, "The CIEDE2000 Color-Difference
+* Formula" (Color Research & Application, 2005).
+*/
+const POW_25_7 = 6103515625;
+function pow7(x) {
+	const x2 = x * x;
+	return x2 * x2 * x2 * x;
+}
+function deltaE2000(p, q, kL = 1, kC = 1, kH = 1) {
+	const l1 = p[0];
+	const a1 = p[1];
+	const b1 = p[2];
+	const l2 = q[0];
+	const a2 = q[1];
+	const b2 = q[2];
+	const cBar7 = pow7((Math.sqrt(a1 * a1 + b1 * b1) + Math.sqrt(a2 * a2 + b2 * b2)) / 2);
+	const g = .5 * (1 - Math.sqrt(cBar7 / (cBar7 + POW_25_7)));
+	const a1p = (1 + g) * a1;
+	const a2p = (1 + g) * a2;
+	const c1p = Math.sqrt(a1p * a1p + b1 * b1);
+	const c2p = Math.sqrt(a2p * a2p + b2 * b2);
+	const h1p = hueDeg(b1, a1p);
+	const h2p = hueDeg(b2, a2p);
+	const dLp = l2 - l1;
+	const dCp = c2p - c1p;
+	let dhp;
+	if (c1p * c2p === 0) dhp = 0;
+	else {
+		const raw = h2p - h1p;
+		if (Math.abs(raw) <= 180) dhp = raw;
+		else if (raw > 180) dhp = raw - 360;
+		else dhp = raw + 360;
+	}
+	const dHp = 2 * Math.sqrt(c1p * c2p) * Math.sin(dhp * DEG / 2);
+	const lBarP = (l1 + l2) / 2;
+	const cBarP = (c1p + c2p) / 2;
+	let hBarP;
+	if (c1p * c2p === 0) hBarP = h1p + h2p;
+	else if (Math.abs(h1p - h2p) <= 180) hBarP = (h1p + h2p) / 2;
+	else if (h1p + h2p < 360) hBarP = (h1p + h2p + 360) / 2;
+	else hBarP = (h1p + h2p - 360) / 2;
+	const hBarRad = hBarP * DEG;
+	const t = 1 - .17 * Math.cos(hBarRad - 30 * DEG) + .24 * Math.cos(2 * hBarRad) + .32 * Math.cos(3 * hBarRad + 6 * DEG) - .2 * Math.cos(4 * hBarRad - 63 * DEG);
+	const lBarMinus50Sq = (lBarP - 50) ** 2;
+	const sL = 1 + .015 * lBarMinus50Sq / Math.sqrt(20 + lBarMinus50Sq);
+	const sC = 1 + .045 * cBarP;
+	const sH = 1 + .015 * cBarP * t;
+	const hShift = (hBarP - 275) / 25;
+	const dTheta = 30 * Math.exp(-(hShift * hShift));
+	const cBarP7 = pow7(cBarP);
+	const rC = 2 * Math.sqrt(cBarP7 / (cBarP7 + POW_25_7));
+	const rT = -Math.sin(2 * dTheta * DEG) * rC;
+	const termL = dLp / (kL * sL);
+	const termC = dCp / (kC * sC);
+	const termH = dHp / (kH * sH);
+	return Math.sqrt(termL * termL + termC * termC + termH * termH + rT * termC * termH);
+}
+/**
+* Squared Euclidean distance in OKLAB space (Björn Ottosson, 2020).
+* OKLAB is perceptually uniform by construction — plain Euclidean IS the
+* perceptual distance, no weighting needed. Returns the square for
+* argmin speed; `deltaEok` returns the actual distance.
+*
+* Often gives more visually-accurate nearest-matches than CIEDE2000 in
+* the saturated blue/purple region.
+*
+* NOTE: the body is byte-identical to `deltaE76Squared` — both compute
+* `dl² + da² + db²`. The semantic difference is entirely in *which* space
+* the caller passes coordinates from: CIELAB (for ΔE*76) vs OKLAB (for this).
+* Kept separate so callers and tests can't cross-wire the indexes.
+*/
+function deltaEokSquared(p, q) {
+	const dl = p[0] - q[0];
+	const da = p[1] - q[1];
+	const db = p[2] - q[2];
+	return dl * dl + da * da + db * db;
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/math/euclideanDistance.js
+/**
+* Squared Euclidean distance between two colors in RGB space.
+* Alpha channel is ignored. Faster than `euclideanDistance` — use this
+* when you only need to compare or minimize (sqrt is monotonic, so
+* argmin(d) === argmin(d²)).
+*/
+function squaredDistanceRgb(a, b) {
+	const dr = a.r - b.r;
+	const dg = a.g - b.g;
+	const db = a.b - b.b;
+	return dr * dr + dg * dg + db * db;
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/indexing.js
+const nameIndexCache = /* @__PURE__ */ new WeakMap();
+const rgbaIndexCache = /* @__PURE__ */ new WeakMap();
+/**
+* Normalized-name → canonical-key map for a given palette. Built once
+* per palette using its own `normalize` function.
+*/
+function getNameIndex(space) {
+	let idx = nameIndexCache.get(space);
+	if (idx === void 0) {
+		idx = /* @__PURE__ */ new Map();
+		const { normalize } = space;
+		for (const key of Object.keys(space.colors)) idx.set(normalize(key), key);
+		nameIndexCache.set(space, idx);
+	}
+	return idx;
+}
+/**
+* Canonical-key → Rgba entries for a given palette, built by parsing
+* each hex value once. Used by nearest-match lookups (identify, rgbaToPantone).
+*/
+function getRgbaIndex(space) {
+	let idx = rgbaIndexCache.get(space);
+	if (idx === void 0) {
+		idx = Object.entries(space.colors).map(([name, hex]) => [name, hexToRgba(hex)]);
+		rgbaIndexCache.set(space, idx);
+	}
+	return idx;
+}
+/**
+* Find the nearest-named entry in a palette to the given Rgba, using
+* squared Euclidean distance in sRGB (alpha ignored). Used by `identify`
+* and `rgbaToPantone` when metric === 'euclidean-srgb'.
+*/
+function nearestByRgb(target, space) {
+	const entries = getRgbaIndex(space);
+	let bestName = entries[0]?.[0] ?? "";
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (const [name, candidate] of entries) {
+		const d = squaredDistanceRgb(target, candidate);
+		if (d < bestDistance) {
+			bestDistance = d;
+			bestName = name;
+		}
+	}
+	return bestName;
+}
+const labIndexCache = /* @__PURE__ */ new WeakMap();
+function getLabIndex(space) {
+	let idx = labIndexCache.get(space);
+	if (idx === void 0) {
+		idx = getRgbaIndex(space).map(([name, rgba]) => [name, rgbaToLab(rgba)]);
+		labIndexCache.set(space, idx);
+	}
+	return idx;
+}
+const linearIndexCache = /* @__PURE__ */ new WeakMap();
+function getLinearIndex(space) {
+	let idx = linearIndexCache.get(space);
+	if (idx === void 0) {
+		idx = getRgbaIndex(space).map(([name, rgba]) => [name, rgbaToLinearRgb(rgba)]);
+		linearIndexCache.set(space, idx);
+	}
+	return idx;
+}
+const oklabIndexCache = /* @__PURE__ */ new WeakMap();
+function getOklabIndex(space) {
+	let idx = oklabIndexCache.get(space);
+	if (idx === void 0) {
+		idx = getRgbaIndex(space).map(([name, rgba]) => [name, rgbaToOklab(rgba)]);
+		oklabIndexCache.set(space, idx);
+	}
+	return idx;
+}
+/**
+* Generic argmin over an `[name, value]` entries array with a custom
+* distance function. Factored so the three metric branches in `nearest`
+* share one loop body instead of duplicating it three times.
+*/
+function argminBy(entries, target, dist) {
+	let bestName = entries[0]?.[0] ?? "";
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (const [name, candidate] of entries) {
+		const d = dist(target, candidate);
+		if (d < bestDistance) {
+			bestDistance = d;
+			bestName = name;
+		}
+	}
+	return bestName;
+}
+function squaredDistanceTriple(a, b) {
+	const d0 = a[0] - b[0];
+	const d1 = a[1] - b[1];
+	const d2 = a[2] - b[2];
+	return d0 * d0 + d1 * d1 + d2 * d2;
+}
+/**
+* Find the nearest-named entry in a palette under the specified distance
+* metric. Dispatches to the right index (rgba / linear-rgb / Lab) and
+* the right distance function. See `DistanceMetric` in types.ts for how
+* to pick a metric.
+*
+* `metric` is required — callers should pass `space.defaultMetric` if
+* they want the palette's declared preference. A silent default would
+* hide the distance-metric choice from the hot path.
+*/
+function nearest(target, space, metric) {
+	if (metric === "euclidean-srgb") return nearestByRgb(target, space);
+	if (metric === "euclidean-linear") return argminBy(getLinearIndex(space), rgbaToLinearRgb(target), squaredDistanceTriple);
+	if (metric === "deltaEok") return argminBy(getOklabIndex(space), rgbaToOklab(target), deltaEokSquared);
+	const labTarget = rgbaToLab(target);
+	const labIndex = getLabIndex(space);
+	if (metric === "deltaE76") return argminBy(labIndex, labTarget, deltaE76Squared);
+	if (metric === "deltaE94") return argminBy(labIndex, labTarget, deltaE94);
+	return argminBy(labIndex, labTarget, deltaE2000);
+}
+/**
+* Rank every palette entry by distance to `target`. Returns an array of
+* `{ name, distance }` sorted ascending (nearest first). Optional `k`
+* truncates to the top-k matches.
+*
+* Distances are **real** metric values (not squared) — ΔE76 / ΔE94 /
+* ΔE2000 / ΔE-OK are in standard ΔE units (≈1 = just-noticeable for
+* most of the gamut on ΔE76/2000); `euclidean-srgb` / `euclidean-linear`
+* are in their respective channel-unit Euclidean distances.
+*
+* Cost:
+* - `k < n`: O(n · k) via bounded insertion-sort; much faster than a
+*   full sort for small k on cheap metrics where allocation dominates.
+* - `k >= n` or `k === undefined`: O(n log n) via full push-and-sort,
+*   returning every entry ranked.
+*
+* Tie-breaking: on exact-distance ties, the first-declared entry in
+* the palette's `colors` object wins. Matches the single-match
+* `nearest` contract.
+*
+* `k` normalization is forgiving: fractional values are rounded,
+* negatives clamp to 0, and `NaN` / `±Infinity` collapse to 0
+* (empty result). No throws.
+*/
+function nearestAll(target, space, metric, k) {
+	const rgbaIndex = getRgbaIndex(space);
+	const n = rgbaIndex.length;
+	const safeK = k === void 0 ? n : Number.isFinite(k) ? Math.max(0, Math.round(k)) : 0;
+	if (safeK === 0) return [];
+	const useBounded = safeK < n;
+	const best = [];
+	const offer = useBounded ? (name, dist) => {
+		if (best.length < safeK) {
+			let j = best.length;
+			while (j > 0 && best[j - 1].distance > dist) j--;
+			best.splice(j, 0, {
+				name,
+				distance: dist
+			});
+		} else if (dist < best[safeK - 1].distance) {
+			let j = safeK - 1;
+			while (j > 0 && best[j - 1].distance > dist) j--;
+			best.splice(j, 0, {
+				name,
+				distance: dist
+			});
+			best.pop();
+		}
+	} : (name, dist) => {
+		best.push({
+			name,
+			distance: dist
+		});
+	};
+	if (metric === "euclidean-srgb") for (const [name, candidate] of rgbaIndex) offer(name, Math.sqrt(squaredDistanceRgb(target, candidate)));
+	else if (metric === "euclidean-linear") {
+		const tgt = rgbaToLinearRgb(target);
+		for (const [name, candidate] of getLinearIndex(space)) offer(name, Math.sqrt(squaredDistanceTriple(tgt, candidate)));
+	} else if (metric === "deltaEok") {
+		const tgt = rgbaToOklab(target);
+		for (const [name, candidate] of getOklabIndex(space)) offer(name, Math.sqrt(deltaEokSquared(tgt, candidate)));
+	} else {
+		const tgt = rgbaToLab(target);
+		const labIndex = getLabIndex(space);
+		if (metric === "deltaE76") for (const [name, candidate] of labIndex) offer(name, Math.sqrt(deltaE76Squared(tgt, candidate)));
+		else if (metric === "deltaE94") for (const [name, candidate] of labIndex) offer(name, deltaE94(tgt, candidate));
+		else for (const [name, candidate] of labIndex) offer(name, deltaE2000(tgt, candidate));
+	}
+	if (!useBounded) best.sort((a, b) => a.distance - b.distance);
+	return best;
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/palettes/normalize.js
+/**
+* Name normalizers used by palettes.
+*
+* Tree-shake note: this module has zero imports beyond a type. Palette
+* modules (`web`, `x11`, `pantone`, or user BYO palettes) can reference
+* these without dragging in the full `indexing.ts` graph, which pulls
+* math modules needed only when `identify` / `resolve` actually runs.
+*/
+/** Lowercase + strip non-alphanumeric. Works for web, x11, and most BYO. */
+const standardNormalize = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/conversions/rgb.js
+const RGB_RE = /^rgba?\s*\(\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*,\s*(-?\d+(?:\.\d+)?)\s*(?:,\s*(\d+(?:\.\d+)?|\.\d+)\s*)?\)$/i;
+function sanitizeChannel(n, label) {
+	return clamp(requireFinite(n, label), 0, 255);
+}
+function sanitizeAlpha(n) {
+	return clamp(requireFinite(n, "alpha"), 0, 1);
+}
+/**
+* Normalize any RGB/RGBA input shape (string, tuple, or object) into
+* the canonical Rgba representation. Alpha defaults to 1 when absent.
+* Rejects non-finite numeric inputs; clamps r/g/b to [0,255] and a to [0,1].
+* Throws on malformed strings. String parsing is linear-time; no polynomial
+* backtracking on pathological input. Leading-dot alpha (e.g. `.5`) is
+* accepted per the CSS Color spec.
+*
+* @example
+* rgbToRgba('rgba(255, 0, 0, .5)');
+* // => { r: 255, g: 0, b: 0, a: 0.5 }
+*/
+function rgbToRgba(input) {
+	if (Array.isArray(input)) {
+		const rawA = input.length === 4 ? input[3] : 1;
+		return {
+			r: sanitizeChannel(input[0], "r"),
+			g: sanitizeChannel(input[1], "g"),
+			b: sanitizeChannel(input[2], "b"),
+			a: sanitizeAlpha(rawA)
+		};
+	}
+	if (typeof input === "string") {
+		const match = RGB_RE.exec(input);
+		if (!match) throw new Error(`Invalid rgb(a) string: ${input}`);
+		return {
+			r: sanitizeChannel(Number(match[1]), "r"),
+			g: sanitizeChannel(Number(match[2]), "g"),
+			b: sanitizeChannel(Number(match[3]), "b"),
+			a: sanitizeAlpha(match[4] !== void 0 ? Number(match[4]) : 1)
+		};
+	}
+	const obj = input;
+	return {
+		r: sanitizeChannel(obj.r, "r"),
+		g: sanitizeChannel(obj.g, "g"),
+		b: sanitizeChannel(obj.b, "b"),
+		a: sanitizeAlpha("a" in obj ? obj.a : 1)
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/convert.js
+function safeStringify(x) {
+	if (x === void 0) return "undefined";
+	try {
+		const s = JSON.stringify(x);
+		return s === void 0 ? String(x) : s;
+	} catch {
+		return Object.prototype.toString.call(x);
+	}
+}
+/**
+* Normalize any recognized color input to canonical `Rgba`.
+* Pass `knownFormat` when the caller has already run `detectFormat` to skip
+* the redundant detection. Throws on `UNKNOWN` input.
+*
+* Palette names (Pantone codes, BYO keys) are not accepted here; they
+* require palette data to parse. Use `convert(name, { palette })` or
+* `resolve(name, { palette })` at the higher level.
+*
+* @example
+* toRgba('#ff0000');               // { r: 255, g: 0, b: 0, a: 1 }
+* toRgba('rgb(255, 0, 0)');        // { r: 255, g: 0, b: 0, a: 1 }
+* toRgba([255, 0, 0]);             // { r: 255, g: 0, b: 0, a: 1 }
+* toRgba({ h: 0, s: 100, l: 50 }); // { r: 255, g: 0, b: 0, a: 1 }
+*/
+function toRgba(input, knownFormat) {
+	switch (knownFormat ?? detectFormat(input)) {
+		case "HEX": return hexToRgba(input);
+		case "RGB": return rgbToRgba(input);
+		case "RGBA": return rgbToRgba(input);
+		case "HSL": return hslToRgba(input);
+		case "HSV": return hsvToRgba(input);
+		default: throw new Error(`Unrecognized color input: ${safeStringify(input)}`);
+	}
+}
+/**
+* The CSS / SVG named-color palette. Default target of `identify`,
+* `resolve`, and `convert` when no `palette` option is provided.
+*
+* @example
+* identify('#ff8080');                          // 'lightcoral'
+* resolve('rebeccapurple');                     // '#663399'
+* convert('rebeccapurple', { palette: web });   // '#663399'
+* web.colors.crimson;                           // '#dc143c'
+*/
+const web = {
+	name: "web",
+	colors: {
+		aliceblue: "#f0f8ff",
+		antiquewhite: "#faebd7",
+		aqua: "#00ffff",
+		aquamarine: "#7fffd4",
+		azure: "#f0ffff",
+		beige: "#f5f5dc",
+		bisque: "#ffe4c4",
+		black: "#000000",
+		blanchedalmond: "#ffebcd",
+		blue: "#0000ff",
+		blueviolet: "#8a2be2",
+		brown: "#a52a2a",
+		burlywood: "#deb887",
+		cadetblue: "#5f9ea0",
+		chartreuse: "#7fff00",
+		chocolate: "#d2691e",
+		coral: "#ff7f50",
+		cornflowerblue: "#6495ed",
+		cornsilk: "#fff8dc",
+		crimson: "#dc143c",
+		cyan: "#00ffff",
+		darkblue: "#00008b",
+		darkcyan: "#008b8b",
+		darkgoldenrod: "#b8860b",
+		darkgray: "#a9a9a9",
+		darkgreen: "#006400",
+		darkgrey: "#a9a9a9",
+		darkkhaki: "#bdb76b",
+		darkmagenta: "#8b008b",
+		darkolivegreen: "#556b2f",
+		darkorange: "#ff8c00",
+		darkorchid: "#9932cc",
+		darkred: "#8b0000",
+		darksalmon: "#e9967a",
+		darkseagreen: "#8fbc8f",
+		darkslateblue: "#483d8b",
+		darkslategray: "#2f4f4f",
+		darkslategrey: "#2f4f4f",
+		darkturquoise: "#00ced1",
+		darkviolet: "#9400d3",
+		deeppink: "#ff1493",
+		deepskyblue: "#00bfff",
+		dimgray: "#696969",
+		dimgrey: "#696969",
+		dodgerblue: "#1e90ff",
+		firebrick: "#b22222",
+		floralwhite: "#fffaf0",
+		forestgreen: "#228b22",
+		fuchsia: "#ff00ff",
+		gainsboro: "#dcdcdc",
+		ghostwhite: "#f8f8ff",
+		goldenrod: "#daa520",
+		gold: "#ffd700",
+		gray: "#808080",
+		green: "#008000",
+		greenyellow: "#adff2f",
+		grey: "#808080",
+		honeydew: "#f0fff0",
+		hotpink: "#ff69b4",
+		indianred: "#cd5c5c",
+		indigo: "#4b0082",
+		ivory: "#fffff0",
+		khaki: "#f0e68c",
+		lavenderblush: "#fff0f5",
+		lavender: "#e6e6fa",
+		lawngreen: "#7cfc00",
+		lemonchiffon: "#fffacd",
+		lightblue: "#add8e6",
+		lightcoral: "#f08080",
+		lightcyan: "#e0ffff",
+		lightgoldenrodyellow: "#fafad2",
+		lightgray: "#d3d3d3",
+		lightgreen: "#90ee90",
+		lightgrey: "#d3d3d3",
+		lightpink: "#ffb6c1",
+		lightsalmon: "#ffa07a",
+		lightseagreen: "#20b2aa",
+		lightskyblue: "#87cefa",
+		lightslategray: "#778899",
+		lightslategrey: "#778899",
+		lightsteelblue: "#b0c4de",
+		lightyellow: "#ffffe0",
+		lime: "#00ff00",
+		limegreen: "#32cd32",
+		linen: "#faf0e6",
+		magenta: "#ff00ff",
+		maroon: "#800000",
+		mediumaquamarine: "#66cdaa",
+		mediumblue: "#0000cd",
+		mediumorchid: "#ba55d3",
+		mediumpurple: "#9370db",
+		mediumseagreen: "#3cb371",
+		mediumslateblue: "#7b68ee",
+		mediumspringgreen: "#00fa9a",
+		mediumturquoise: "#48d1cc",
+		mediumvioletred: "#c71585",
+		midnightblue: "#191970",
+		mintcream: "#f5fffa",
+		mistyrose: "#ffe4e1",
+		moccasin: "#ffe4b5",
+		navajowhite: "#ffdead",
+		navy: "#000080",
+		oldlace: "#fdf5e6",
+		olive: "#808000",
+		olivedrab: "#6b8e23",
+		orange: "#ffa500",
+		orangered: "#ff4500",
+		orchid: "#da70d6",
+		palegoldenrod: "#eee8aa",
+		palegreen: "#98fb98",
+		paleturquoise: "#afeeee",
+		palevioletred: "#db7093",
+		papayawhip: "#ffefd5",
+		peachpuff: "#ffdab9",
+		peru: "#cd853f",
+		pink: "#ffc0cb",
+		plum: "#dda0dd",
+		powderblue: "#b0e0e6",
+		purple: "#800080",
+		rebeccapurple: "#663399",
+		red: "#ff0000",
+		rosybrown: "#bc8f8f",
+		royalblue: "#4169e1",
+		saddlebrown: "#8b4513",
+		salmon: "#fa8072",
+		sandybrown: "#f4a460",
+		seagreen: "#2e8b57",
+		seashell: "#fff5ee",
+		sienna: "#a0522d",
+		silver: "#c0c0c0",
+		skyblue: "#87ceeb",
+		slateblue: "#6a5acd",
+		slategray: "#708090",
+		slategrey: "#708090",
+		snow: "#fffafa",
+		springgreen: "#00ff7f",
+		steelblue: "#4682b4",
+		tan: "#d2b48c",
+		teal: "#008080",
+		thistle: "#d8bfd8",
+		tomato: "#ff6347",
+		turquoise: "#40e0d0",
+		violet: "#ee82ee",
+		wheat: "#f5deb3",
+		white: "#ffffff",
+		whitesmoke: "#f5f5f5",
+		yellow: "#ffff00",
+		yellowgreen: "#9acd32"
+	},
+	normalize: standardNormalize,
+	defaultMetric: "deltaE76"
+};
+//#endregion
+//#region node_modules/.pnpm/chromonym@3.5.0/node_modules/chromonym/dist/identify.js
+/**
+* Parse a string input that may be a color literal or a palette name.
+* Returns the canonical Rgba, or `null` if nothing matches.
+*/
+function parseInput(input, source) {
+	const detected = detectFormat(input);
+	if (detected !== "UNKNOWN") return toRgba(input, detected);
+	if (source !== void 0 && typeof input === "string") {
+		const canonical = getNameIndex(source).get(source.normalize(input));
+		if (canonical === void 0) return null;
+		const hex = source.colors[canonical];
+		if (hex === void 0) return null;
+		return hexToRgba(hex);
+	}
+	return null;
+}
+function identify(input, opts = {}) {
+	const palette = opts.palette ?? web;
+	const metric = opts.metric ?? palette.defaultMetric;
+	const rgba = parseInput(input, opts.source);
+	if (opts.k !== void 0) {
+		if (rgba === null) return [];
+		return nearestAll(rgba, palette, metric, opts.k).map((m) => {
+			const value = palette.colors[m.name];
+			return {
+				name: m.name,
+				value,
+				distance: m.distance
+			};
+		});
+	}
+	if (rgba === null) return null;
+	return nearest(rgba, palette, metric) || null;
+}
+/**
+* Name That Color (NTC): Chirag Mehta's broad color-name dataset.
+* 1566 entries covering design, fashion, and common
+* hardware / UI colors that CSS and X11 don't name. Default metric
+* is CIEDE2000 for best ranking across the dense saturated regions;
+* override per call with `'deltaEok'` for a cheaper perceptual
+* metric when scrubbing many colors per second.
+*
+* @example
+* identify('#bada55', { palette: ntc });                   // 'Conifer'
+* resolve('International Klein Blue', { palette: ntc });   // '#002fa7'
+* ntc.colors.Stratos;                                      // '#000741'
+*/
+const ntc = {
+	name: "ntc",
+	colors: {
+		Abbey: "#4c4f56",
+		Acadia: "#1b1404",
+		Acapulco: "#7cb0a1",
+		"Aero Blue": "#c9ffe5",
+		Affair: "#714693",
+		Akaroa: "#d4c4a8",
+		Alabaster: "#fafafa",
+		"Albescent White": "#f5e9d3",
+		"Algae Green": "#93dfb8",
+		"Alice Blue": "#f0f8ff",
+		"Alizarin Crimson": "#e32636",
+		Allports: "#0076a3",
+		Almond: "#eed9c4",
+		"Almond Frost": "#907b71",
+		Alpine: "#af8f2c",
+		Alto: "#dbdbdb",
+		Aluminium: "#a9acb6",
+		Amaranth: "#e52b50",
+		Amazon: "#3b7a57",
+		Amber: "#ffbf00",
+		Americano: "#87756e",
+		Amethyst: "#9966cc",
+		"Amethyst Smoke": "#a397b4",
+		Amour: "#f9eaf3",
+		Amulet: "#7b9f80",
+		Anakiwa: "#9de5ff",
+		"Antique Brass": "#c88a65",
+		"Antique Bronze": "#704a07",
+		Anzac: "#e0b646",
+		Apache: "#dfbe6f",
+		Apple: "#4fa83d",
+		"Apple Blossom": "#af4d43",
+		"Apple Green": "#e2f3ec",
+		Apricot: "#eb9373",
+		"Apricot Peach": "#fbceb1",
+		"Apricot White": "#fffeec",
+		"Aqua Deep": "#014b43",
+		"Aqua Forest": "#5fa777",
+		"Aqua Haze": "#edf5f5",
+		"Aqua Island": "#a1dad7",
+		"Aqua Spring": "#eaf9f5",
+		"Aqua Squeeze": "#e8f5f2",
+		Aquamarine: "#7fffd4",
+		"Aquamarine Blue": "#71d9e2",
+		Arapawa: "#110c6c",
+		Armadillo: "#433e37",
+		Arrowtown: "#948771",
+		Ash: "#c6c3b5",
+		Asparagus: "#7ba05b",
+		Asphalt: "#130a06",
+		Astra: "#faeab9",
+		Astral: "#327da0",
+		Astronaut: "#283a77",
+		"Astronaut Blue": "#013e62",
+		"Athens Gray": "#eef0f3",
+		"Aths Special": "#ecebce",
+		Atlantis: "#97cd2d",
+		Atoll: "#0a6f75",
+		"Atomic Tangerine": "#ff9966",
+		"Au Chico": "#97605d",
+		Aubergine: "#3b0910",
+		"Australian Mint": "#f5ffbe",
+		Avocado: "#888d65",
+		Axolotl: "#4e6649",
+		Azalea: "#f7c8da",
+		Aztec: "#0d1c19",
+		Azure: "#315ba1",
+		"Azure Radiance": "#007fff",
+		"Baby Blue": "#e0ffff",
+		"Bahama Blue": "#026395",
+		Bahia: "#a5cb0c",
+		"Baja White": "#fff8d1",
+		"Bali Hai": "#859faf",
+		"Baltic Sea": "#2a2630",
+		Bamboo: "#da6304",
+		"Banana Mania": "#fbe7b2",
+		Bandicoot: "#858470",
+		Barberry: "#ded717",
+		"Barley Corn": "#a68b5b",
+		"Barley White": "#fff4ce",
+		Barossa: "#44012d",
+		Bastille: "#292130",
+		"Battleship Gray": "#828f72",
+		"Bay Leaf": "#7da98d",
+		"Bay of Many": "#273a81",
+		Bazaar: "#98777b",
+		Bean: "#3d0c02",
+		"Beauty Bush": "#eec1be",
+		Beaver: "#926f5b",
+		Beeswax: "#fef2c7",
+		Beige: "#f5f5dc",
+		Bermuda: "#7dd8c6",
+		"Bermuda Gray": "#6b8ba2",
+		"Beryl Green": "#dee5c0",
+		Bianca: "#fcfbf3",
+		"Big Stone": "#162a40",
+		Bilbao: "#327c14",
+		"Biloba Flower": "#b2a1ea",
+		Birch: "#373021",
+		"Bird Flower": "#d4cd16",
+		Biscay: "#1b3162",
+		Bismark: "#497183",
+		"Bison Hide": "#c1b7a4",
+		Bistre: "#3d2b1f",
+		Bitter: "#868974",
+		"Bitter Lemon": "#cae00d",
+		Bittersweet: "#fe6f5e",
+		Bizarre: "#eededa",
+		Black: "#000000",
+		"Black Bean": "#081910",
+		"Black Forest": "#0b1304",
+		"Black Haze": "#f6f7f7",
+		"Black Marlin": "#3e2c1c",
+		"Black Olive": "#242e16",
+		"Black Pearl": "#041322",
+		"Black Rock": "#0d0332",
+		"Black Rose": "#67032d",
+		"Black Russian": "#0a001c",
+		"Black Squeeze": "#f2fafa",
+		"Black White": "#fffef6",
+		Blackberry: "#4d0135",
+		Blackcurrant: "#32293a",
+		"Blaze Orange": "#ff6600",
+		"Bleach White": "#fef3d8",
+		"Bleached Cedar": "#2c2133",
+		"Blizzard Blue": "#a3e3ed",
+		Blossom: "#dcb4bc",
+		Blue: "#0000ff",
+		"Blue Bayoux": "#496679",
+		"Blue Bell": "#9999cc",
+		"Blue Chalk": "#f1e9ff",
+		"Blue Charcoal": "#010d1a",
+		"Blue Chill": "#0c8990",
+		"Blue Diamond": "#380474",
+		"Blue Dianne": "#204852",
+		"Blue Gem": "#2c0e8c",
+		"Blue Haze": "#bfbed8",
+		"Blue Lagoon": "#017987",
+		"Blue Marguerite": "#7666c6",
+		"Blue Ribbon": "#0066ff",
+		"Blue Romance": "#d2f6de",
+		"Blue Smoke": "#748881",
+		"Blue Stone": "#016162",
+		"Blue Violet": "#6456b7",
+		"Blue Whale": "#042e4c",
+		"Blue Zodiac": "#13264d",
+		Blumine: "#18587a",
+		Blush: "#b44668",
+		"Blush Pink": "#ff6fff",
+		Bombay: "#afb1b8",
+		"Bon Jour": "#e5e0e1",
+		"Bondi Blue": "#0095b6",
+		Bone: "#e4d1c0",
+		Bordeaux: "#5c0120",
+		Bossanova: "#4e2a5a",
+		"Boston Blue": "#3b91b4",
+		Botticelli: "#c7dde5",
+		"Bottle Green": "#093624",
+		Boulder: "#7a7a7a",
+		Bouquet: "#ae809e",
+		Bourbon: "#ba6f1e",
+		Bracken: "#4a2a04",
+		Brandy: "#dec196",
+		"Brandy Punch": "#cd8429",
+		"Brandy Rose": "#bb8983",
+		"Breaker Bay": "#5da19f",
+		"Brick Red": "#c62d42",
+		"Bridal Heath": "#fffaf4",
+		Bridesmaid: "#fef0ec",
+		"Bright Gray": "#3c4151",
+		"Bright Green": "#66ff00",
+		"Bright Red": "#b10000",
+		"Bright Sun": "#fed33c",
+		"Bright Turquoise": "#08e8de",
+		"Brilliant Rose": "#f653a6",
+		"Brink Pink": "#fb607f",
+		Bronco: "#aba196",
+		Bronze: "#3f2109",
+		"Bronze Olive": "#4e420c",
+		Bronzetone: "#4d400f",
+		Broom: "#ffec13",
+		Brown: "#964b00",
+		"Brown Bramble": "#592804",
+		"Brown Derby": "#492615",
+		"Brown Pod": "#401801",
+		"Brown Rust": "#af593e",
+		"Brown Tumbleweed": "#37290e",
+		Bubbles: "#e7feff",
+		Buccaneer: "#622f30",
+		Bud: "#a8ae9c",
+		"Buddha Gold": "#c1a004",
+		Buff: "#f0dc82",
+		"Bulgarian Rose": "#480607",
+		"Bull Shot": "#864d1e",
+		Bunker: "#0d1117",
+		Bunting: "#151f4c",
+		Burgundy: "#900020",
+		Burnham: "#002e20",
+		"Burning Orange": "#ff7034",
+		"Burning Sand": "#d99376",
+		"Burnt Maroon": "#420303",
+		"Burnt Orange": "#cc5500",
+		"Burnt Sienna": "#e97451",
+		"Burnt Umber": "#8a3324",
+		Bush: "#0d2e1c",
+		Buttercup: "#f3ad16",
+		"Buttered Rum": "#a1750d",
+		"Butterfly Bush": "#624e9a",
+		Buttermilk: "#fff1b5",
+		"Buttery White": "#fffcea",
+		"Cab Sav": "#4d0a18",
+		Cabaret: "#d94972",
+		"Cabbage Pont": "#3f4c3a",
+		Cactus: "#587156",
+		"Cadet Blue": "#a9b2c3",
+		Cadillac: "#b04c6a",
+		"Cafe Royale": "#6f440c",
+		Calico: "#e0c095",
+		California: "#fe9d04",
+		Calypso: "#31728d",
+		Camarone: "#00581a",
+		Camelot: "#893456",
+		Cameo: "#d9b99b",
+		Camouflage: "#3c3910",
+		"Camouflage Green": "#78866b",
+		"Can Can": "#d591a4",
+		Canary: "#f3fb62",
+		Candlelight: "#fcd917",
+		"Candy Corn": "#fbec5d",
+		"Cannon Black": "#251706",
+		"Cannon Pink": "#894367",
+		"Cape Cod": "#3c4443",
+		"Cape Honey": "#fee5ac",
+		"Cape Palliser": "#a26645",
+		Caper: "#dcedb4",
+		Caramel: "#ffddaf",
+		Cararra: "#eeeee8",
+		"Cardin Green": "#01361c",
+		Cardinal: "#c41e3a",
+		"Cardinal Pink": "#8c055e",
+		"Careys Pink": "#d29eaa",
+		"Caribbean Green": "#00cc99",
+		Carissma: "#ea88a8",
+		Carla: "#f3ffd8",
+		Carmine: "#960018",
+		"Carnaby Tan": "#5c2e01",
+		Carnation: "#f95a61",
+		"Carnation Pink": "#ffa6c9",
+		"Carousel Pink": "#f9e0ed",
+		"Carrot Orange": "#ed9121",
+		Casablanca: "#f8b853",
+		Casal: "#2f6168",
+		Cascade: "#8ba9a5",
+		Cashmere: "#e6bea5",
+		Casper: "#adbed1",
+		Castro: "#52001f",
+		"Catalina Blue": "#062a78",
+		"Catskill White": "#eef6f7",
+		"Cavern Pink": "#e3bebe",
+		Cedar: "#3e1c14",
+		"Cedar Wood Finish": "#711a00",
+		Celadon: "#ace1af",
+		Celery: "#b8c25d",
+		Celeste: "#d1d2ca",
+		Cello: "#1e385b",
+		Celtic: "#163222",
+		Cement: "#8d7662",
+		Ceramic: "#fcfff9",
+		Cerise: "#da3287",
+		"Cerise Red": "#de3163",
+		Cerulean: "#02a4d3",
+		"Cerulean Blue": "#2a52be",
+		Chablis: "#fff4f3",
+		"Chalet Green": "#516e3d",
+		Chalky: "#eed794",
+		Chambray: "#354e8c",
+		Chamois: "#eddcb1",
+		Champagne: "#faeccc",
+		Chantilly: "#f8c3df",
+		Charade: "#292937",
+		Chardon: "#fff3f1",
+		Chardonnay: "#ffcd8c",
+		Charlotte: "#baeef9",
+		Charm: "#d47494",
+		Chartreuse: "#7fff00",
+		"Chartreuse Yellow": "#dfff00",
+		"Chateau Green": "#40a860",
+		Chatelle: "#bdb3c7",
+		"Chathams Blue": "#175579",
+		"Chelsea Cucumber": "#83aa5d",
+		"Chelsea Gem": "#9e5302",
+		Chenin: "#dfcd6f",
+		Cherokee: "#fcda98",
+		"Cherry Pie": "#2a0359",
+		Cherrywood: "#651a14",
+		Cherub: "#f8d9e9",
+		Chestnut: "#b94e48",
+		"Chestnut Rose": "#cd5c5c",
+		"Chetwode Blue": "#8581d9",
+		Chicago: "#5d5c58",
+		Chiffon: "#f1ffc8",
+		"Chilean Fire": "#f77703",
+		"Chilean Heath": "#fffde6",
+		"China Ivory": "#fcffe7",
+		Chino: "#cec7a7",
+		Chinook: "#a8e3bd",
+		Chocolate: "#370202",
+		Christalle: "#33036b",
+		Christi: "#67a712",
+		Christine: "#e7730a",
+		"Chrome White": "#e8f1d4",
+		Cinder: "#0e0e18",
+		Cinderella: "#fde1dc",
+		Cinnabar: "#e34234",
+		Cinnamon: "#7b3f00",
+		Cioccolato: "#55280c",
+		"Citrine White": "#faf7d6",
+		Citron: "#9ea91f",
+		Citrus: "#a1c50a",
+		Clairvoyant: "#480656",
+		"Clam Shell": "#d4b6af",
+		Claret: "#7f1734",
+		"Classic Rose": "#fbcce7",
+		"Clay Ash": "#bdc8b3",
+		"Clay Creek": "#8a8360",
+		"Clear Day": "#e9fffd",
+		Clementine: "#e96e00",
+		Clinker: "#371d09",
+		Cloud: "#c7c4bf",
+		"Cloud Burst": "#202e54",
+		Cloudy: "#aca59f",
+		Clover: "#384910",
+		Cobalt: "#0047ab",
+		"Cocoa Bean": "#481c1c",
+		"Cocoa Brown": "#301f1e",
+		"Coconut Cream": "#f8f7dc",
+		"Cod Gray": "#0b0b0b",
+		Coffee: "#706555",
+		"Coffee Bean": "#2a140e",
+		Cognac: "#9f381d",
+		Cola: "#3f2500",
+		"Cold Purple": "#aba0d9",
+		"Cold Turkey": "#cebaba",
+		"Colonial White": "#ffedbc",
+		Comet: "#5c5d75",
+		Como: "#517c66",
+		Conch: "#c9d9d2",
+		Concord: "#7c7b7a",
+		Concrete: "#f2f2f2",
+		Confetti: "#e9d75a",
+		"Congo Brown": "#593737",
+		"Congress Blue": "#02478e",
+		Conifer: "#acdd4d",
+		Contessa: "#c6726b",
+		Copper: "#b87333",
+		"Copper Canyon": "#7e3a15",
+		"Copper Rose": "#996666",
+		"Copper Rust": "#944747",
+		Copperfield: "#da8a67",
+		Coral: "#ff7f50",
+		"Coral Red": "#ff4040",
+		"Coral Reef": "#c7bca2",
+		"Coral Tree": "#a86b6b",
+		Corduroy: "#606e68",
+		Coriander: "#c4d0b0",
+		Cork: "#40291d",
+		Corn: "#e7bf05",
+		"Corn Field": "#f8facd",
+		"Corn Harvest": "#8b6b0b",
+		Cornflower: "#93ccea",
+		"Cornflower Blue": "#6495ed",
+		"Cornflower Lilac": "#ffb0ac",
+		Corvette: "#fad3a2",
+		Cosmic: "#76395d",
+		Cosmos: "#ffd8d9",
+		"Costa Del Sol": "#615d30",
+		"Cotton Candy": "#ffb7d5",
+		"Cotton Seed": "#c2bdb6",
+		"County Green": "#01371a",
+		Cowboy: "#4d282d",
+		Crail: "#b95140",
+		Cranberry: "#db5079",
+		"Crater Brown": "#462425",
+		Cream: "#fffdd0",
+		"Cream Brulee": "#ffe5a0",
+		"Cream Can": "#f5c85c",
+		Creole: "#1e0f04",
+		Crete: "#737829",
+		Crimson: "#dc143c",
+		Crocodile: "#736d58",
+		"Crown of Thorns": "#771f1f",
+		Crowshead: "#1c1208",
+		Cruise: "#b5ecdf",
+		Crusoe: "#004816",
+		Crusta: "#fd7b33",
+		Cumin: "#924321",
+		Cumulus: "#fdffd5",
+		Cupid: "#fbbeda",
+		"Curious Blue": "#2596d1",
+		"Cutty Sark": "#507672",
+		"Cyan / Aqua": "#00ffff",
+		Cyprus: "#003e40",
+		Daintree: "#012731",
+		"Dairy Cream": "#f9e4bc",
+		"Daisy Bush": "#4f2398",
+		Dallas: "#6e4b26",
+		Dandelion: "#fed85d",
+		Danube: "#6093d1",
+		"Dark Blue": "#0000c8",
+		"Dark Burgundy": "#770f05",
+		"Dark Ebony": "#3c2005",
+		"Dark Fern": "#0a480d",
+		"Dark Tan": "#661010",
+		Dawn: "#a6a29a",
+		"Dawn Pink": "#f3e9e5",
+		"De York": "#7ac488",
+		Deco: "#d2da97",
+		"Deep Blue": "#220878",
+		"Deep Blush": "#e47698",
+		"Deep Bronze": "#4a3004",
+		"Deep Cerulean": "#007ba7",
+		"Deep Cove": "#051040",
+		"Deep Fir": "#002900",
+		"Deep Forest Green": "#182d09",
+		"Deep Koamaru": "#1b127b",
+		"Deep Oak": "#412010",
+		"Deep Sapphire": "#082567",
+		"Deep Sea": "#01826b",
+		"Deep Sea Green": "#095859",
+		"Deep Teal": "#003532",
+		"Del Rio": "#b09a95",
+		Dell: "#396413",
+		Delta: "#a4a49d",
+		Deluge: "#7563a8",
+		Denim: "#1560bd",
+		Derby: "#ffeed8",
+		Desert: "#ae6020",
+		"Desert Sand": "#edc9af",
+		"Desert Storm": "#f8f8f7",
+		Dew: "#eafffe",
+		"Di Serria": "#db995e",
+		Diesel: "#130000",
+		Dingley: "#5d7747",
+		Disco: "#871550",
+		Dixie: "#e29418",
+		"Dodger Blue": "#1e90ff",
+		Dolly: "#f9ff8b",
+		Dolphin: "#646077",
+		Domino: "#8e775e",
+		"Don Juan": "#5d4c51",
+		"Donkey Brown": "#a69279",
+		Dorado: "#6b5755",
+		"Double Colonial White": "#eee3ad",
+		"Double Pearl Lusta": "#fcf4d0",
+		"Double Spanish White": "#e6d7b9",
+		"Dove Gray": "#6d6c6c",
+		Downriver: "#092256",
+		Downy: "#6fd0c5",
+		Driftwood: "#af8751",
+		Drover: "#fdf7ad",
+		"Dull Lavender": "#a899e6",
+		Dune: "#383533",
+		"Dust Storm": "#e5ccc9",
+		"Dusty Gray": "#a8989b",
+		Eagle: "#b6baa4",
+		"Earls Green": "#c9b93b",
+		"Early Dawn": "#fff9e6",
+		"East Bay": "#414c7d",
+		"East Side": "#ac91ce",
+		"Eastern Blue": "#1e9ab0",
+		Ebb: "#e9e3e3",
+		Ebony: "#0c0b1d",
+		"Ebony Clay": "#26283b",
+		Eclipse: "#311c17",
+		"Ecru White": "#f5f3e5",
+		Ecstasy: "#fa7814",
+		Eden: "#105852",
+		Edgewater: "#c8e3d7",
+		Edward: "#a2aeab",
+		"Egg Sour": "#fff4dd",
+		"Egg White": "#ffefc1",
+		Eggplant: "#614051",
+		"El Paso": "#1e1708",
+		"El Salva": "#8f3e33",
+		"Electric Lime": "#ccff00",
+		"Electric Violet": "#8b00ff",
+		Elephant: "#123447",
+		"Elf Green": "#088370",
+		Elm: "#1c7c7d",
+		Emerald: "#50c878",
+		Eminence: "#6c3082",
+		Emperor: "#514649",
+		Empress: "#817377",
+		Endeavour: "#0056a7",
+		"Energy Yellow": "#f8dd5c",
+		"English Holly": "#022d15",
+		"English Walnut": "#3e2b23",
+		Envy: "#8ba690",
+		Equator: "#e1bc64",
+		Espresso: "#612718",
+		Eternity: "#211a0e",
+		Eucalyptus: "#278a5b",
+		Eunry: "#cfa39d",
+		"Evening Sea": "#024e46",
+		Everglade: "#1c402e",
+		"Faded Jade": "#427977",
+		"Fair Pink": "#ffefec",
+		Falcon: "#7f626d",
+		"Fall Green": "#ecebbd",
+		"Falu Red": "#801818",
+		Fantasy: "#faf3f0",
+		Fedora: "#796a78",
+		Feijoa: "#9fdd8c",
+		Fern: "#63b76c",
+		"Fern Frond": "#657220",
+		"Fern Green": "#4f7942",
+		Ferra: "#704f50",
+		Festival: "#fbe96c",
+		Feta: "#f0fcea",
+		"Fiery Orange": "#b35213",
+		Finch: "#626649",
+		Finlandia: "#556d56",
+		Finn: "#692d54",
+		Fiord: "#405169",
+		Fire: "#aa4203",
+		"Fire Bush": "#e89928",
+		Firefly: "#0e2a30",
+		"Flame Pea": "#da5b38",
+		Flamenco: "#ff7d07",
+		Flamingo: "#f2552a",
+		Flax: "#eedc82",
+		"Flax Smoke": "#7b8265",
+		Flesh: "#ffcba4",
+		Flint: "#6f6a61",
+		Flirt: "#a2006d",
+		"Flush Mahogany": "#ca3435",
+		"Flush Orange": "#ff7f00",
+		Foam: "#d8fcfa",
+		Fog: "#d7d0ff",
+		"Foggy Gray": "#cbcab6",
+		"Forest Green": "#228b22",
+		"Forget Me Not": "#fff1ee",
+		"Fountain Blue": "#56b4be",
+		Frangipani: "#ffdeb3",
+		"French Gray": "#bdbdc6",
+		"French Lilac": "#ecc7ee",
+		"French Pass": "#bdedfd",
+		"French Rose": "#f64a8a",
+		"Fresh Eggplant": "#990066",
+		"Friar Gray": "#807e79",
+		"Fringy Flower": "#b1e2c1",
+		Froly: "#f57584",
+		Frost: "#edf5dd",
+		"Frosted Mint": "#dbfff8",
+		Frostee: "#e4f6e7",
+		"Fruit Salad": "#4f9d5d",
+		"Fuchsia Blue": "#7a58c1",
+		"Fuchsia Pink": "#c154c1",
+		Fuego: "#bede0d",
+		"Fuel Yellow": "#eca927",
+		"Fun Blue": "#1959a8",
+		"Fun Green": "#016d39",
+		"Fuscous Gray": "#54534d",
+		"Fuzzy Wuzzy Brown": "#c45655",
+		"Gable Green": "#163531",
+		Gallery: "#efefef",
+		Galliano: "#dcb20c",
+		Gamboge: "#e49b0f",
+		Geebung: "#d18f1b",
+		Genoa: "#15736b",
+		Geraldine: "#fb8989",
+		Geyser: "#d4dfe2",
+		Ghost: "#c7c9d5",
+		Gigas: "#523c94",
+		Gimblet: "#b8b56a",
+		Gin: "#e8f2eb",
+		"Gin Fizz": "#fff9e2",
+		Givry: "#f8e4bf",
+		Glacier: "#80b3c4",
+		"Glade Green": "#61845f",
+		"Go Ben": "#726d4e",
+		Goblin: "#3d7d52",
+		Gold: "#ffd700",
+		"Gold Drop": "#f18200",
+		"Gold Sand": "#e6be8a",
+		"Gold Tips": "#deba13",
+		"Golden Bell": "#e28913",
+		"Golden Dream": "#f0d52d",
+		"Golden Fizz": "#f5fb3d",
+		"Golden Glow": "#fde295",
+		"Golden Grass": "#daa520",
+		"Golden Sand": "#f0db7d",
+		"Golden Tainoi": "#ffcc5c",
+		Goldenrod: "#fcd667",
+		Gondola: "#261414",
+		"Gordons Green": "#0b1107",
+		Gorse: "#fff14f",
+		Gossamer: "#069b81",
+		Gossip: "#d2f8b0",
+		Gothic: "#6d92a1",
+		"Governor Bay": "#2f3cb3",
+		"Grain Brown": "#e4d5b7",
+		Grandis: "#ffd38c",
+		"Granite Green": "#8d8974",
+		"Granny Apple": "#d5f6e3",
+		"Granny Smith": "#84a0a0",
+		"Granny Smith Apple": "#9de093",
+		Grape: "#381a51",
+		Graphite: "#251607",
+		Gravel: "#4a444b",
+		Gray: "#808080",
+		"Gray Asparagus": "#465945",
+		"Gray Chateau": "#a2aab3",
+		"Gray Nickel": "#c3c3bd",
+		"Gray Nurse": "#e7ece6",
+		"Gray Olive": "#a9a491",
+		"Gray Suit": "#c1becd",
+		Green: "#00ff00",
+		"Green Haze": "#01a368",
+		"Green House": "#24500f",
+		"Green Kelp": "#25311c",
+		"Green Leaf": "#436a0d",
+		"Green Mist": "#cbd3b0",
+		"Green Pea": "#1d6142",
+		"Green Smoke": "#a4af6e",
+		"Green Spring": "#b8c1b1",
+		"Green Vogue": "#032b52",
+		"Green Waterloo": "#101405",
+		"Green White": "#e8ebe0",
+		"Green Yellow": "#adff2f",
+		Grenadier: "#d54600",
+		"Guardsman Red": "#ba0101",
+		"Gulf Blue": "#051657",
+		"Gulf Stream": "#80b3ae",
+		"Gull Gray": "#9dacb7",
+		"Gum Leaf": "#b6d3bf",
+		Gumbo: "#7ca1a6",
+		"Gun Powder": "#414257",
+		Gunsmoke: "#828685",
+		Gurkha: "#9a9577",
+		Hacienda: "#98811b",
+		"Hairy Heath": "#6b2a14",
+		Haiti: "#1b1035",
+		"Half and Half": "#fffee1",
+		"Half Baked": "#85c4cc",
+		"Half Colonial White": "#fdf6d3",
+		"Half Dutch White": "#fef7de",
+		"Half Spanish White": "#fef4db",
+		Hampton: "#e5d8af",
+		Harlequin: "#3fff00",
+		Harp: "#e6f2ea",
+		"Harvest Gold": "#e0b974",
+		"Havelock Blue": "#5590d9",
+		"Hawaiian Tan": "#9d5616",
+		"Hawkes Blue": "#d4e2fc",
+		Heath: "#541012",
+		Heather: "#b7c3d0",
+		"Heathered Gray": "#b6b095",
+		"Heavy Metal": "#2b3228",
+		Heliotrope: "#df73ff",
+		Hemlock: "#5e5d3b",
+		Hemp: "#907874",
+		Hibiscus: "#b6316c",
+		Highland: "#6f8e63",
+		Hillary: "#aca586",
+		Himalaya: "#6a5d1b",
+		"Hint of Green": "#e6ffe9",
+		"Hint of Red": "#fbf9f9",
+		"Hint of Yellow": "#fafde4",
+		"Hippie Blue": "#589aaf",
+		"Hippie Green": "#53824b",
+		"Hippie Pink": "#ae4560",
+		"Hit Gray": "#a1adb5",
+		"Hit Pink": "#ffab81",
+		"Hokey Pokey": "#c8a528",
+		Hoki: "#65869f",
+		Holly: "#011d13",
+		"Hollywood Cerise": "#f400a1",
+		"Honey Flower": "#4f1c70",
+		Honeysuckle: "#edfc84",
+		Hopbush: "#d06da1",
+		Horizon: "#5a87a0",
+		"Horses Neck": "#604913",
+		"Hot Cinnamon": "#d2691e",
+		"Hot Pink": "#ff69b4",
+		"Hot Toddy": "#b38007",
+		"Humming Bird": "#cff9f3",
+		"Hunter Green": "#161d10",
+		Hurricane: "#877c7b",
+		Husk: "#b7a458",
+		"Ice Cold": "#b1f4e7",
+		Iceberg: "#daf4f0",
+		Illusion: "#f6a4c9",
+		"Inch Worm": "#b0e313",
+		"Indian Khaki": "#c3b091",
+		"Indian Tan": "#4d1e01",
+		Indigo: "#4f69c6",
+		Indochine: "#c26b03",
+		"International Klein Blue": "#002fa7",
+		"International Orange": "#ff4f00",
+		"Irish Coffee": "#5f3d26",
+		Iroko: "#433120",
+		Iron: "#d4d7d9",
+		"Ironside Gray": "#676662",
+		Ironstone: "#86483c",
+		"Island Spice": "#fffcee",
+		Ivory: "#fffff0",
+		Jacaranda: "#2e0329",
+		Jacarta: "#3a2a6a",
+		"Jacko Bean": "#2e1905",
+		"Jacksons Purple": "#20208d",
+		Jade: "#00a86b",
+		Jaffa: "#ef863f",
+		"Jagged Ice": "#c2e8e5",
+		Jagger: "#350e57",
+		Jaguar: "#080110",
+		Jambalaya: "#5b3013",
+		Janna: "#f4ebd3",
+		"Japanese Laurel": "#0a6906",
+		"Japanese Maple": "#780109",
+		Japonica: "#d87c63",
+		Java: "#1fc2c2",
+		"Jazzberry Jam": "#a50b5e",
+		"Jelly Bean": "#297b9a",
+		"Jet Stream": "#b5d2ce",
+		Jewel: "#126b40",
+		Jon: "#3b1f1f",
+		Jonquil: "#eeff9a",
+		"Jordy Blue": "#8ab9f1",
+		"Judge Gray": "#544333",
+		Jumbo: "#7c7b82",
+		"Jungle Green": "#29ab87",
+		"Jungle Mist": "#b4cfd3",
+		Juniper: "#6d9292",
+		"Just Right": "#eccdb9",
+		Kabul: "#5e483e",
+		"Kaitoke Green": "#004620",
+		Kangaroo: "#c6c8bd",
+		Karaka: "#1e1609",
+		Karry: "#ffead4",
+		"Kashmir Blue": "#507096",
+		Kelp: "#454936",
+		"Kenyan Copper": "#7c1c05",
+		Keppel: "#3ab09e",
+		"Key Lime Pie": "#bfc921",
+		Khaki: "#f0e68c",
+		Kidnapper: "#e1ead4",
+		Kilamanjaro: "#240c02",
+		Killarney: "#3a6a47",
+		Kimberly: "#736c9f",
+		"Kingfisher Daisy": "#3e0480",
+		Kobi: "#e79fc4",
+		Kokoda: "#6e6d57",
+		Korma: "#8f4b0e",
+		Koromiko: "#ffbd5f",
+		Kournikova: "#ffe772",
+		Kumera: "#886221",
+		"La Palma": "#368716",
+		"La Rioja": "#b3c110",
+		"Las Palmas": "#c6e610",
+		Laser: "#c8b568",
+		"Laser Lemon": "#ffff66",
+		Laurel: "#749378",
+		Lavender: "#b57edc",
+		"Lavender blush": "#fff0f5",
+		"Lavender Gray": "#bdbbd7",
+		"Lavender Magenta": "#ee82ee",
+		"Lavender Pink": "#fbaed2",
+		"Lavender Purple": "#967bb6",
+		"Lavender Rose": "#fba0e3",
+		Leather: "#967059",
+		Lemon: "#fde910",
+		"Lemon Chiffon": "#fffacd",
+		"Lemon Ginger": "#ac9e22",
+		"Lemon Grass": "#9b9e8f",
+		"Light Apricot": "#fdd5b1",
+		"Light Orchid": "#e29cd2",
+		"Light Wisteria": "#c9a0dc",
+		"Lightning Yellow": "#fcc01e",
+		Lilac: "#c8a2c8",
+		"Lilac Bush": "#9874d3",
+		Lily: "#c8aabf",
+		"Lily White": "#e7f8ff",
+		Lima: "#76bd17",
+		Lime: "#bfff00",
+		Limeade: "#6f9d02",
+		"Limed Ash": "#747d63",
+		"Limed Oak": "#ac8a56",
+		"Limed Spruce": "#394851",
+		Linen: "#faf0e6",
+		"Link Water": "#d9e4f5",
+		Lipstick: "#ab0563",
+		"Lisbon Brown": "#423921",
+		"Livid Brown": "#4d282e",
+		Loafer: "#eef4de",
+		Loblolly: "#bdc9ce",
+		Lochinvar: "#2c8c84",
+		Lochmara: "#007ec7",
+		Locust: "#a8af8e",
+		"Log Cabin": "#242a1d",
+		Logan: "#aaa9cd",
+		Lola: "#dfcfdb",
+		"London Hue": "#bea6c3",
+		Lonestar: "#6d0101",
+		Lotus: "#863c3c",
+		Loulou: "#460b41",
+		Lucky: "#af9f1c",
+		"Lucky Point": "#1a1a68",
+		"Lunar Green": "#3c493a",
+		"Luxor Gold": "#a7882c",
+		Lynch: "#697e9a",
+		Mabel: "#d9f7ff",
+		"Macaroni and Cheese": "#ffb97b",
+		Madang: "#b7f0be",
+		Madison: "#09255d",
+		Madras: "#3f3002",
+		"Magenta / Fuchsia": "#ff00ff",
+		"Magic Mint": "#aaf0d1",
+		Magnolia: "#f8f4ff",
+		Mahogany: "#4e0606",
+		"Mai Tai": "#b06608",
+		Maize: "#f5d5a0",
+		Makara: "#897d6d",
+		Mako: "#444954",
+		Malachite: "#0bda51",
+		Malibu: "#7dc8f7",
+		Mallard: "#233418",
+		Malta: "#bdb2a1",
+		Mamba: "#8e8190",
+		Manatee: "#8d90a1",
+		Mandalay: "#ad781b",
+		Mandy: "#e25465",
+		"Mandys Pink": "#f2c3b2",
+		"Mango Tango": "#e77200",
+		Manhattan: "#f5c999",
+		Mantis: "#74c365",
+		Mantle: "#8b9c90",
+		Manz: "#eeef78",
+		"Mardi Gras": "#350036",
+		Marigold: "#b98d28",
+		"Marigold Yellow": "#fbe870",
+		Mariner: "#286acd",
+		Maroon: "#800000",
+		"Maroon Flush": "#c32148",
+		"Maroon Oak": "#520c17",
+		Marshland: "#0b0f08",
+		Martini: "#afa09e",
+		Martinique: "#363050",
+		Marzipan: "#f8db9d",
+		Masala: "#403b38",
+		Matisse: "#1b659d",
+		Matrix: "#b05d54",
+		Matterhorn: "#4e3b41",
+		Mauve: "#e0b0ff",
+		Mauvelous: "#f091a9",
+		Maverick: "#d8c2d5",
+		"Medium Carmine": "#af4035",
+		"Medium Purple": "#9370db",
+		"Medium Red Violet": "#bb3385",
+		Melanie: "#e4c2d5",
+		Melanzane: "#300529",
+		Melon: "#febaad",
+		Melrose: "#c7c1ff",
+		Mercury: "#e5e5e5",
+		Merino: "#f6f0e6",
+		Merlin: "#413c37",
+		Merlot: "#831923",
+		"Metallic Bronze": "#49371b",
+		"Metallic Copper": "#71291d",
+		Meteor: "#d07d12",
+		Meteorite: "#3c1f76",
+		"Mexican Red": "#a72525",
+		"Mid Gray": "#5f5f6e",
+		Midnight: "#011635",
+		"Midnight Blue": "#003366",
+		"Midnight Moss": "#041004",
+		Mikado: "#2d2510",
+		Milan: "#faffa4",
+		"Milano Red": "#b81104",
+		"Milk Punch": "#fff6d4",
+		Millbrook: "#594433",
+		Mimosa: "#f8fdd3",
+		Mindaro: "#e3f988",
+		"Mine Shaft": "#323232",
+		"Mineral Green": "#3f5d53",
+		Ming: "#36747d",
+		Minsk: "#3f307f",
+		"Mint Green": "#98ff98",
+		"Mint Julep": "#f1eec1",
+		"Mint Tulip": "#c4f4eb",
+		Mirage: "#161928",
+		Mischka: "#d1d2dd",
+		"Mist Gray": "#c4c4bc",
+		Mobster: "#7f7589",
+		Moccaccino: "#6e1d14",
+		Mocha: "#782d19",
+		Mojo: "#c04737",
+		"Mona Lisa": "#ffa194",
+		Monarch: "#8b0723",
+		Mondo: "#4a3c30",
+		Mongoose: "#b5a27f",
+		Monsoon: "#8a8389",
+		"Monte Carlo": "#83d0c6",
+		Monza: "#c7031e",
+		"Moody Blue": "#7f76d3",
+		"Moon Glow": "#fcfeda",
+		"Moon Mist": "#dcddcc",
+		"Moon Raker": "#d6cef6",
+		"Morning Glory": "#9edee0",
+		"Morocco Brown": "#441d00",
+		Mortar: "#504351",
+		Mosque: "#036a6e",
+		"Moss Green": "#addfad",
+		"Mountain Meadow": "#1ab385",
+		"Mountain Mist": "#959396",
+		"Mountbatten Pink": "#997a8d",
+		"Muddy Waters": "#b78e5c",
+		Muesli: "#aa8b5b",
+		Mulberry: "#c54b8c",
+		"Mulberry Wood": "#5c0536",
+		"Mule Fawn": "#8c472f",
+		"Mulled Wine": "#4e4562",
+		Mustard: "#ffdb58",
+		"My Pink": "#d69188",
+		"My Sin": "#ffb31f",
+		Mystic: "#e2ebed",
+		Nandor: "#4b5d52",
+		Napa: "#aca494",
+		Narvik: "#edf9f1",
+		"Natural Gray": "#8b8680",
+		"Navajo White": "#ffdead",
+		"Navy Blue": "#000080",
+		Nebula: "#cbdbd6",
+		Negroni: "#ffe2c5",
+		"Neon Carrot": "#ff9933",
+		Nepal: "#8eabc1",
+		Neptune: "#7cb7bb",
+		Nero: "#140600",
+		Nevada: "#646e75",
+		"New Orleans": "#f3d69d",
+		"New York Pink": "#d7837f",
+		Niagara: "#06a189",
+		"Night Rider": "#1f120f",
+		"Night Shadz": "#aa375a",
+		"Nile Blue": "#193751",
+		Nobel: "#b7b1b1",
+		Nomad: "#bab1a2",
+		Norway: "#a8bd9f",
+		Nugget: "#c59922",
+		Nutmeg: "#81422c",
+		"Nutmeg Wood Finish": "#683600",
+		Oasis: "#feefce",
+		Observatory: "#02866f",
+		"Ocean Green": "#41aa78",
+		Ochre: "#cc7722",
+		"Off Green": "#e6f8f3",
+		"Off Yellow": "#fef9e3",
+		Oil: "#281e15",
+		"Old Brick": "#901e1e",
+		"Old Copper": "#724a2f",
+		"Old Gold": "#cfb53b",
+		"Old Lace": "#fdf5e6",
+		"Old Lavender": "#796878",
+		"Old Rose": "#c08081",
+		Olive: "#808000",
+		"Olive Drab": "#6b8e23",
+		"Olive Green": "#b5b35c",
+		"Olive Haze": "#8b8470",
+		Olivetone: "#716e10",
+		Olivine: "#9ab973",
+		Onahau: "#cdf4ff",
+		Onion: "#2f270e",
+		Opal: "#a9c6c2",
+		Opium: "#8e6f70",
+		Oracle: "#377475",
+		Orange: "#ff681f",
+		"Orange Peel": "#ffa000",
+		"Orange Roughy": "#c45719",
+		"Orange White": "#fefced",
+		Orchid: "#da70d6",
+		"Orchid White": "#fffdf3",
+		Oregon: "#9b4703",
+		Orient: "#015e85",
+		"Oriental Pink": "#c69191",
+		Orinoco: "#f3fbd4",
+		"Oslo Gray": "#878d91",
+		Ottoman: "#e9f8ed",
+		"Outer Space": "#2d383a",
+		"Outrageous Orange": "#ff6037",
+		"Oxford Blue": "#384555",
+		Oxley: "#779e86",
+		"Oyster Bay": "#dafaff",
+		"Oyster Pink": "#e9cecd",
+		Paarl: "#a65529",
+		Pablo: "#776f61",
+		"Pacific Blue": "#009dc4",
+		Pacifika: "#778120",
+		Paco: "#411f10",
+		Padua: "#ade6c4",
+		"Pale Canary": "#ffff99",
+		"Pale Leaf": "#c0d3b9",
+		"Pale Oyster": "#988d77",
+		"Pale Prim": "#fdfeb8",
+		"Pale Rose": "#ffe1f2",
+		"Pale Sky": "#6e7783",
+		"Pale Slate": "#c3bfc1",
+		"Palm Green": "#09230f",
+		"Palm Leaf": "#19330e",
+		Pampas: "#f4f2ee",
+		Panache: "#eaf6ee",
+		Pancho: "#edcdab",
+		"Papaya Whip": "#ffefd5",
+		Paprika: "#8d0226",
+		Paradiso: "#317d82",
+		Parchment: "#f1e9d2",
+		"Paris Daisy": "#fff46e",
+		"Paris M": "#26056a",
+		"Paris White": "#cadcd4",
+		Parsley: "#134f19",
+		"Pastel Green": "#77dd77",
+		"Pastel Pink": "#ffd1dc",
+		Patina: "#639a8f",
+		"Pattens Blue": "#def5ff",
+		Paua: "#260368",
+		Pavlova: "#d7c498",
+		Peach: "#ffe5b4",
+		"Peach Cream": "#fff0db",
+		"Peach Orange": "#ffcc99",
+		"Peach Schnapps": "#ffdcd6",
+		"Peach Yellow": "#fadfad",
+		Peanut: "#782f16",
+		Pear: "#d1e231",
+		"Pearl Bush": "#e8e0d5",
+		"Pearl Lusta": "#fcf4dc",
+		Peat: "#716b56",
+		Pelorous: "#3eabbf",
+		Peppermint: "#e3f5e1",
+		Perano: "#a9bef2",
+		Perfume: "#d0bef8",
+		"Periglacial Blue": "#e1e6d6",
+		Periwinkle: "#ccccff",
+		"Periwinkle Gray": "#c3cde6",
+		"Persian Blue": "#1c39bb",
+		"Persian Green": "#00a693",
+		"Persian Indigo": "#32127a",
+		"Persian Pink": "#f77fbe",
+		"Persian Plum": "#701c1c",
+		"Persian Red": "#cc3333",
+		"Persian Rose": "#fe28a2",
+		Persimmon: "#ff6b53",
+		"Peru Tan": "#7f3a02",
+		Pesto: "#7c7631",
+		"Petite Orchid": "#db9690",
+		Pewter: "#96a8a1",
+		Pharlap: "#a3807b",
+		Picasso: "#fff39d",
+		"Pickled Bean": "#6e4826",
+		"Pickled Bluewood": "#314459",
+		"Picton Blue": "#45b1e8",
+		"Pig Pink": "#fdd7e4",
+		"Pigeon Post": "#afbdd9",
+		"Pigment Indigo": "#4b0082",
+		"Pine Cone": "#6d5e54",
+		"Pine Glade": "#c7cd90",
+		"Pine Green": "#01796f",
+		"Pine Tree": "#171f04",
+		Pink: "#ffc0cb",
+		"Pink Flamingo": "#ff66ff",
+		"Pink Flare": "#e1c0c8",
+		"Pink Lace": "#ffddf4",
+		"Pink Lady": "#fff1d8",
+		"Pink Salmon": "#ff91a4",
+		"Pink Swan": "#beb5b7",
+		Piper: "#c96323",
+		Pipi: "#fef4cc",
+		Pippin: "#ffe1df",
+		"Pirate Gold": "#ba7f03",
+		Pistachio: "#9dc209",
+		"Pixie Green": "#c0d8b6",
+		Pizazz: "#ff9000",
+		Pizza: "#c99415",
+		Plantation: "#27504b",
+		Plum: "#843179",
+		Pohutukawa: "#8f021c",
+		Polar: "#e5f9f6",
+		"Polo Blue": "#8da8cc",
+		Pomegranate: "#f34723",
+		Pompadour: "#660045",
+		Porcelain: "#eff2f3",
+		Porsche: "#eaae69",
+		"Port Gore": "#251f4f",
+		Portafino: "#ffffb4",
+		Portage: "#8b9fee",
+		Portica: "#f9e663",
+		"Pot Pourri": "#f5e7e2",
+		"Potters Clay": "#8c5738",
+		"Powder Ash": "#bcc9c2",
+		"Powder Blue": "#b0e0e6",
+		"Prairie Sand": "#9a3820",
+		Prelude: "#d0c0e5",
+		Prim: "#f0e2ec",
+		Primrose: "#edea99",
+		"Provincial Pink": "#fef5f1",
+		"Prussian Blue": "#003153",
+		Puce: "#cc8899",
+		Pueblo: "#7d2c14",
+		"Puerto Rico": "#3fc1aa",
+		Pumice: "#c2cac4",
+		Pumpkin: "#ff7518",
+		"Pumpkin Skin": "#b1610b",
+		Punch: "#dc4333",
+		Punga: "#4d3d14",
+		Purple: "#660099",
+		"Purple Heart": "#652dc1",
+		"Purple Mountain's Majesty": "#9678b6",
+		"Purple Pizzazz": "#ff00cc",
+		Putty: "#e7cd8c",
+		"Quarter Pearl Lusta": "#fffdf4",
+		"Quarter Spanish White": "#f7f2e1",
+		Quicksand: "#bd978e",
+		"Quill Gray": "#d6d6d1",
+		Quincy: "#623f2d",
+		"Racing Green": "#0c1911",
+		"Radical Red": "#ff355e",
+		Raffia: "#eadab8",
+		Rainee: "#b9c8ac",
+		Rajah: "#f7b668",
+		Rangitoto: "#2e3222",
+		"Rangoon Green": "#1c1e13",
+		Raven: "#727b89",
+		"Raw Sienna": "#d27d46",
+		"Raw Umber": "#734a12",
+		"Razzle Dazzle Rose": "#ff33cc",
+		Razzmatazz: "#e30b5c",
+		Rebel: "#3c1206",
+		Red: "#ff0000",
+		"Red Beech": "#7b3801",
+		"Red Berry": "#8e0000",
+		"Red Damask": "#da6a41",
+		"Red Devil": "#860111",
+		"Red Orange": "#ff3f34",
+		"Red Oxide": "#6e0902",
+		"Red Ribbon": "#ed0a3f",
+		"Red Robin": "#80341f",
+		"Red Stage": "#d05f04",
+		"Red Violet": "#c71585",
+		Redwood: "#5d1e0f",
+		Reef: "#c9ffa2",
+		"Reef Gold": "#9f821c",
+		"Regal Blue": "#013f6a",
+		"Regent Gray": "#86949f",
+		"Regent St Blue": "#aad6e6",
+		Remy: "#feebf3",
+		"Reno Sand": "#a86515",
+		"Resolution Blue": "#002387",
+		Revolver: "#2c1632",
+		Rhino: "#2e3f62",
+		"Rice Cake": "#fffef0",
+		"Rice Flower": "#eeffe2",
+		"Rich Gold": "#a85307",
+		"Rio Grande": "#bbd009",
+		"Ripe Lemon": "#f4d81c",
+		"Ripe Plum": "#410056",
+		Riptide: "#8be6d8",
+		"River Bed": "#434c59",
+		"Rob Roy": "#eac674",
+		"Robin's Egg Blue": "#00cccc",
+		Rock: "#4d3833",
+		"Rock Blue": "#9eb1cd",
+		"Rock Spray": "#ba450c",
+		"Rodeo Dust": "#c9b29b",
+		"Rolling Stone": "#747d83",
+		Roman: "#de6360",
+		"Roman Coffee": "#795d4c",
+		Romance: "#fffefd",
+		Romantic: "#ffd2b7",
+		Ronchi: "#ecc54e",
+		"Roof Terracotta": "#a62f20",
+		Rope: "#8e4d1e",
+		Rose: "#ff007f",
+		"Rose Bud": "#fbb2a3",
+		"Rose Bud Cherry": "#800b47",
+		"Rose Fog": "#e7bcb4",
+		"Rose of Sharon": "#bf5500",
+		"Rose White": "#fff6f5",
+		Rosewood: "#65000b",
+		Roti: "#c6a84b",
+		Rouge: "#a23b6c",
+		"Royal Blue": "#4169e1",
+		"Royal Heath": "#ab3472",
+		"Royal Purple": "#6b3fa0",
+		Rum: "#796989",
+		"Rum Swizzle": "#f9f8e4",
+		Russet: "#80461b",
+		Russett: "#755a57",
+		Rust: "#b7410e",
+		"Rustic Red": "#480404",
+		"Rusty Nail": "#86560a",
+		Saddle: "#4c3024",
+		"Saddle Brown": "#583401",
+		Saffron: "#f4c430",
+		"Saffron Mango": "#f9bf58",
+		Sage: "#9ea587",
+		Sahara: "#b7a214",
+		"Sahara Sand": "#f1e788",
+		Sail: "#b8e0f9",
+		Salem: "#097f4b",
+		Salmon: "#ff8c69",
+		Salomie: "#fedb8d",
+		"Salt Box": "#685e6e",
+		Saltpan: "#f1f7f2",
+		Sambuca: "#3a2010",
+		"San Felix": "#0b6207",
+		"San Juan": "#304b6a",
+		"San Marino": "#456cac",
+		"Sand Dune": "#826f65",
+		Sandal: "#aa8d6f",
+		Sandrift: "#ab917a",
+		Sandstone: "#796d62",
+		Sandwisp: "#f5e7a2",
+		"Sandy Beach": "#ffeac8",
+		"Sandy brown": "#f4a460",
+		Sangria: "#92000a",
+		"Sanguine Brown": "#8d3d38",
+		"Santa Fe": "#b16d52",
+		"Santas Gray": "#9fa0b1",
+		Sapling: "#ded4a4",
+		Sapphire: "#2f519e",
+		Saratoga: "#555b10",
+		"Satin Linen": "#e6e4d4",
+		Sauvignon: "#fff5f3",
+		Sazerac: "#fff4e0",
+		Scampi: "#675fa6",
+		Scandal: "#cffaf4",
+		Scarlet: "#ff2400",
+		"Scarlet Gum": "#431560",
+		Scarlett: "#950015",
+		"Scarpa Flow": "#585562",
+		Schist: "#a9b497",
+		"School bus Yellow": "#ffd800",
+		Schooner: "#8b847e",
+		"Science Blue": "#0066cc",
+		Scooter: "#2ebfd4",
+		Scorpion: "#695f62",
+		"Scotch Mist": "#fffbdc",
+		"Screamin' Green": "#66ff66",
+		"Sea Buckthorn": "#fba129",
+		"Sea Green": "#2e8b57",
+		"Sea Mist": "#c5dbca",
+		"Sea Nymph": "#78a39c",
+		"Sea Pink": "#ed989e",
+		Seagull: "#80ccea",
+		Seance: "#731e8f",
+		Seashell: "#f1f1f1",
+		"Seashell Peach": "#fff5ee",
+		Seaweed: "#1b2f11",
+		Selago: "#f0eefd",
+		"Selective Yellow": "#ffba00",
+		Sepia: "#704214",
+		"Sepia Black": "#2b0202",
+		"Sepia Skin": "#9e5b40",
+		Serenade: "#fff4e8",
+		Shadow: "#837050",
+		"Shadow Green": "#9ac2b8",
+		"Shady Lady": "#aaa5a9",
+		Shakespeare: "#4eabd1",
+		Shalimar: "#fbffba",
+		Shamrock: "#33cc99",
+		Shark: "#25272c",
+		"Sherpa Blue": "#004950",
+		"Sherwood Green": "#02402c",
+		Shilo: "#e8b9b3",
+		"Shingle Fawn": "#6b4e31",
+		"Ship Cove": "#788bba",
+		"Ship Gray": "#3e3a44",
+		Shiraz: "#b20931",
+		Shocking: "#e292c0",
+		"Shocking Pink": "#fc0fc0",
+		"Shuttle Gray": "#5f6672",
+		Siam: "#646a54",
+		Sidecar: "#f3e7bb",
+		Silk: "#bdb1a8",
+		Silver: "#c0c0c0",
+		"Silver Chalice": "#acacac",
+		"Silver Rust": "#c9c0bb",
+		"Silver Sand": "#bfc1c2",
+		"Silver Tree": "#66b58f",
+		Sinbad: "#9fd7d3",
+		Siren: "#7a013a",
+		Sirocco: "#718080",
+		Sisal: "#d3cbba",
+		Skeptic: "#cae6da",
+		"Sky Blue": "#76d7ea",
+		"Slate Gray": "#708090",
+		Smalt: "#003399",
+		"Smalt Blue": "#51808f",
+		Smoky: "#605b73",
+		"Snow Drift": "#f7faf7",
+		"Snow Flurry": "#e4ffd1",
+		"Snowy Mint": "#d6ffdb",
+		Snuff: "#e2d8ed",
+		Soapstone: "#fffbf9",
+		"Soft Amber": "#d1c6b4",
+		"Soft Peach": "#f5edef",
+		"Solid Pink": "#893843",
+		Solitaire: "#fef8e2",
+		Solitude: "#eaf6ff",
+		Sorbus: "#fd7c07",
+		"Sorrell Brown": "#ceb98f",
+		"Soya Bean": "#6a6051",
+		"Spanish Green": "#819885",
+		Spectra: "#2f5a57",
+		Spice: "#6a442e",
+		"Spicy Mix": "#885342",
+		"Spicy Mustard": "#74640d",
+		"Spicy Pink": "#816e71",
+		Spindle: "#b6d1ea",
+		Spray: "#79deec",
+		"Spring Green": "#00ff7f",
+		"Spring Leaves": "#578363",
+		"Spring Rain": "#accbb1",
+		"Spring Sun": "#f6ffdc",
+		"Spring Wood": "#f8f6f1",
+		Sprout: "#c1d7b0",
+		"Spun Pearl": "#aaabb7",
+		Squirrel: "#8f8176",
+		"St Tropaz": "#2d569b",
+		Stack: "#8a8f8a",
+		"Star Dust": "#9f9f9c",
+		"Stark White": "#e5d7bd",
+		Starship: "#ecf245",
+		"Steel Blue": "#4682b4",
+		"Steel Gray": "#262335",
+		Stiletto: "#9c3336",
+		Stonewall: "#928573",
+		"Storm Dust": "#646463",
+		"Storm Gray": "#717486",
+		Stratos: "#000741",
+		Straw: "#d4bf8d",
+		Strikemaster: "#956387",
+		Stromboli: "#325d52",
+		Studio: "#714ab2",
+		Submarine: "#bac7c9",
+		"Sugar Cane": "#f9fff6",
+		Sulu: "#c1f07c",
+		"Summer Green": "#96bbab",
+		Sun: "#fbac13",
+		Sundance: "#c9b35b",
+		Sundown: "#ffb1b3",
+		Sunflower: "#e4d422",
+		Sunglo: "#e16865",
+		Sunglow: "#ffcc33",
+		"Sunset Orange": "#fe4c40",
+		Sunshade: "#ff9e2c",
+		Supernova: "#ffc901",
+		Surf: "#bbd7c1",
+		"Surf Crest": "#cfe5d2",
+		"Surfie Green": "#0c7a79",
+		Sushi: "#87ab39",
+		"Suva Gray": "#888387",
+		Swamp: "#001b1c",
+		"Swamp Green": "#acb78e",
+		"Swans Down": "#dcf0ea",
+		"Sweet Corn": "#fbea8c",
+		"Sweet Pink": "#fd9fa2",
+		Swirl: "#d3cdc5",
+		"Swiss Coffee": "#ddd6d5",
+		Sycamore: "#908d39",
+		Tabasco: "#a02712",
+		Tacao: "#edb381",
+		Tacha: "#d6c562",
+		"Tahiti Gold": "#e97c07",
+		"Tahuna Sands": "#eef0c8",
+		"Tall Poppy": "#b32d29",
+		Tallow: "#a8a589",
+		Tamarillo: "#991613",
+		Tamarind: "#341515",
+		Tan: "#d2b48c",
+		"Tan Hide": "#fa9d5a",
+		Tana: "#d9dcc1",
+		Tangaroa: "#03163c",
+		Tangerine: "#f28500",
+		Tango: "#ed7a1c",
+		Tapa: "#7b7874",
+		Tapestry: "#b05e81",
+		Tara: "#e1f6e8",
+		Tarawera: "#073a50",
+		Tasman: "#cfdccf",
+		Taupe: "#483c32",
+		"Taupe Gray": "#b3af95",
+		"Tawny Port": "#692545",
+		"Te Papa Green": "#1e433c",
+		Tea: "#c1bab0",
+		"Tea Green": "#d0f0c0",
+		Teak: "#b19461",
+		Teal: "#008080",
+		"Teal Blue": "#044259",
+		Temptress: "#3b000b",
+		Tenn: "#cd5700",
+		Tequila: "#ffe6c7",
+		Terracotta: "#e2725b",
+		Texas: "#f8f99c",
+		"Texas Rose": "#ffb555",
+		Thatch: "#b69d98",
+		"Thatch Green": "#403d19",
+		Thistle: "#d8bfd8",
+		"Thistle Green": "#cccaa8",
+		Thunder: "#33292f",
+		Thunderbird: "#c02b18",
+		"Tia Maria": "#c1440e",
+		Tiara: "#c3d1d1",
+		Tiber: "#063537",
+		"Tickle Me Pink": "#fc80a5",
+		Tidal: "#f1ffad",
+		Tide: "#bfb8b0",
+		"Timber Green": "#16322c",
+		Timberwolf: "#d9d6cf",
+		"Titan White": "#f0eeff",
+		Toast: "#9a6e61",
+		"Tobacco Brown": "#715d47",
+		Toledo: "#3a0020",
+		Tolopea: "#1b0245",
+		"Tom Thumb": "#3f583b",
+		"Tonys Pink": "#e79f8c",
+		Topaz: "#7c778a",
+		"Torch Red": "#fd0e35",
+		"Torea Bay": "#0f2d9e",
+		"Tory Blue": "#1450aa",
+		Tosca: "#8d3f3f",
+		"Totem Pole": "#991b07",
+		"Tower Gray": "#a9bdbf",
+		Tradewind: "#5fb3ac",
+		Tranquil: "#e6ffff",
+		Travertine: "#fffde8",
+		"Tree Poppy": "#fc9c1d",
+		Treehouse: "#3b2820",
+		"Trendy Green": "#7c881a",
+		"Trendy Pink": "#8c6495",
+		Trinidad: "#e64e03",
+		"Tropical Blue": "#c3ddf9",
+		"Tropical Rain Forest": "#00755e",
+		Trout: "#4a4e5a",
+		"True V": "#8a73d6",
+		Tuatara: "#363534",
+		"Tuft Bush": "#ffddcd",
+		"Tulip Tree": "#eab33b",
+		Tumbleweed: "#dea681",
+		Tuna: "#353542",
+		Tundora: "#4a4244",
+		Turbo: "#fae600",
+		"Turkish Rose": "#b57281",
+		Turmeric: "#cabb48",
+		Turquoise: "#30d5c8",
+		"Turquoise Blue": "#6cdae7",
+		"Turtle Green": "#2a380b",
+		Tuscany: "#bd5e2e",
+		Tusk: "#eef3c3",
+		Tussock: "#c5994b",
+		Tutu: "#fff1f9",
+		Twilight: "#e4cfde",
+		"Twilight Blue": "#eefdff",
+		Twine: "#c2955d",
+		"Tyrian Purple": "#66023c",
+		Ultramarine: "#120a8f",
+		Valencia: "#d84437",
+		Valentino: "#350e42",
+		Valhalla: "#2b194f",
+		"Van Cleef": "#49170c",
+		Vanilla: "#d1bea8",
+		"Vanilla Ice": "#f3d9df",
+		Varden: "#fff6df",
+		"Venetian Red": "#72010f",
+		"Venice Blue": "#055989",
+		Venus: "#928590",
+		Verdigris: "#5d5e37",
+		"Verdun Green": "#495400",
+		Vermilion: "#ff4d00",
+		Vesuvius: "#b14a0b",
+		Victoria: "#534491",
+		"Vida Loca": "#549019",
+		Viking: "#64ccdb",
+		"Vin Rouge": "#983d61",
+		Viola: "#cb8fa9",
+		"Violent Violet": "#290c5e",
+		Violet: "#240a40",
+		"Violet Eggplant": "#991199",
+		"Violet Red": "#f7468a",
+		Viridian: "#40826d",
+		"Viridian Green": "#678975",
+		"Vis Vis": "#ffefa1",
+		"Vista Blue": "#8fd6b4",
+		"Vista White": "#fcf8f7",
+		"Vivid Tangerine": "#ff9980",
+		"Vivid Violet": "#803790",
+		Voodoo: "#533455",
+		Vulcan: "#10121d",
+		Wafer: "#decbc6",
+		"Waikawa Gray": "#5a6e9c",
+		Waiouru: "#363c0d",
+		Walnut: "#773f1a",
+		Wasabi: "#788a25",
+		"Water Leaf": "#a1e9de",
+		Watercourse: "#056f57",
+		Waterloo: "#7b7c94",
+		Wattle: "#dcd747",
+		Watusi: "#ffddcf",
+		"Wax Flower": "#ffc0a8",
+		"We Peep": "#f7dbe6",
+		"Web Orange": "#ffa500",
+		Wedgewood: "#4e7f9e",
+		"Well Read": "#b43332",
+		"West Coast": "#625119",
+		"West Side": "#ff910f",
+		Westar: "#dcd9d2",
+		Wewak: "#f19bab",
+		Wheat: "#f5deb3",
+		Wheatfield: "#f3edcf",
+		Whiskey: "#d59a6f",
+		Whisper: "#f7f5fa",
+		White: "#ffffff",
+		"White Ice": "#ddf9f1",
+		"White Lilac": "#f8f7fc",
+		"White Linen": "#f8f0e8",
+		"White Pointer": "#fef8ff",
+		"White Rock": "#eae8d4",
+		"Wild Blue Yonder": "#7a89b8",
+		"Wild Rice": "#ece090",
+		"Wild Sand": "#f4f4f4",
+		"Wild Strawberry": "#ff3399",
+		"Wild Watermelon": "#fd5b78",
+		"Wild Willow": "#b9c46a",
+		William: "#3a686c",
+		"Willow Brook": "#dfecda",
+		"Willow Grove": "#65745d",
+		Windsor: "#3c0878",
+		"Wine Berry": "#591d35",
+		"Winter Hazel": "#d5d195",
+		"Wisp Pink": "#fef4f8",
+		Wisteria: "#9771b5",
+		Wistful: "#a4a6d3",
+		"Witch Haze": "#fffc99",
+		"Wood Bark": "#261105",
+		Woodland: "#4d5328",
+		Woodrush: "#302a0f",
+		Woodsmoke: "#0c0d0f",
+		"Woody Brown": "#483131",
+		Xanadu: "#738678",
+		Yellow: "#ffff00",
+		"Yellow Green": "#c5e17a",
+		"Yellow Metal": "#716338",
+		"Yellow Orange": "#ffae42",
+		"Yellow Sea": "#fea904",
+		"Your Pink": "#ffc3c0",
+		"Yukon Gold": "#7b6608",
+		Yuma: "#cec291",
+		Zambezi: "#685558",
+		Zanah: "#daecd6",
+		Zest: "#e5841b",
+		Zeus: "#292319",
+		Ziggurat: "#bfdbe2",
+		Zinnwaldite: "#ebc2af",
+		Zircon: "#f4f8ff",
+		Zombie: "#e4d69b",
+		Zorba: "#a59b91",
+		Zuccini: "#044022",
+		Zumthor: "#edf6ff"
+	},
+	normalize: standardNormalize,
+	defaultMetric: "deltaE2000"
+};
+//#endregion
 //#region src/ui/shadowMenu.tsx
 const shadowMenuContext = X$2(null);
 function ShadowMenu(props) {
@@ -5187,6 +7736,8 @@ const CREATE_DIALOG_RANGE_STYLE = {
 	width: "100%",
 	height: "18px"
 };
+const CREATE_COLOR_TOKEN_SECTION = "tokens.colors";
+const CREATE_SEMANTIC_COLOR_TOKEN_SECTION = "semanticTokens.colors";
 function colorTokenSelectorOptions(metadata) {
 	if (!metadata) return [];
 	return [...metadata.semanticColorTokens.items.map(colorTokenSelectorOption), ...metadata.colorTokens.items.map(colorTokenSelectorOption)];
@@ -5194,16 +7745,27 @@ function colorTokenSelectorOptions(metadata) {
 function shouldUseColorTokenSelector(path, value, options) {
 	const property = pandaPreviewRootProperty(path);
 	if (!property || !COLOR_TOKEN_PROPERTIES.has(property)) return false;
+	if (validHexColor(value)) return true;
 	const tokenPath = tokenPathFromValueOrTokenReference(value, "colors");
 	return options.some((option) => option.tokenPath === tokenPath);
 }
 function colorTokenOpacityInputValue(value) {
 	const colorTokenValue = pandaColorTokenValueFromString(value);
-	if (!colorTokenValue) return void 0;
-	return {
+	if (colorTokenValue) return {
+		kind: "token",
 		tokenPath: colorTokenValue.tokenPath,
 		opacity: colorTokenValue.opacity,
-		collapsedEditable: colorTokenValue.opacity === "100"
+		collapsedEditable: colorTokenValue.opacity === "100",
+		wrapped: colorTokenValue.wrapped
+	};
+	const hexColorValue = hexColorOpacityValueFromString(value);
+	if (!hexColorValue) return void 0;
+	return {
+		kind: "hex",
+		colorValue: hexColorValue.colorValue,
+		opacity: hexColorValue.opacity,
+		collapsedEditable: hexColorValue.opacity === "100",
+		swatch: hexColorValue.colorValue
 	};
 }
 function colorTokenSelectorOption(token) {
@@ -5291,6 +7853,54 @@ function searchableTokenValue(value) {
 function validHexColor(value) {
 	return /^#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value.trim());
 }
+function rawHexColorOption(value) {
+	const hex = value.trim();
+	if (!validHexColor(hex)) return void 0;
+	return {
+		id: `raw-color:${hex}`,
+		label: hex,
+		groupLabel: "Raw colors",
+		detail: "Use exact hex color",
+		swatch: hex,
+		rawValue: hex
+	};
+}
+function hexColorOpacityValueFromString(value) {
+	const channels = hexColorChannels(value);
+	if (!channels) return void 0;
+	return {
+		colorValue: `#${hexPair(channels.red)}${hexPair(channels.green)}${hexPair(channels.blue)}`,
+		opacity: channels.alpha === void 0 ? "100" : String(Math.round(channels.alpha / 255 * 100))
+	};
+}
+function hexColorChannels(value) {
+	if (!validHexColor(value)) return void 0;
+	const hex = value.trim().replace(/^#/, "");
+	if (hex.length === 3 || hex.length === 4) return {
+		red: Number.parseInt(`${hex[0]}${hex[0]}`, 16),
+		green: Number.parseInt(`${hex[1]}${hex[1]}`, 16),
+		blue: Number.parseInt(`${hex[2]}${hex[2]}`, 16),
+		alpha: hex.length === 4 ? Number.parseInt(`${hex[3]}${hex[3]}`, 16) : void 0
+	};
+	return {
+		red: Number.parseInt(hex.slice(0, 2), 16),
+		green: Number.parseInt(hex.slice(2, 4), 16),
+		blue: Number.parseInt(hex.slice(4, 6), 16),
+		alpha: hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) : void 0
+	};
+}
+function hexColorValueForOpacity(value, opacity) {
+	const channels = hexColorChannels(value);
+	const opacityNumber = Number.parseFloat(opacity);
+	if (!channels || Number.isNaN(opacityNumber)) return void 0;
+	const color = `#${hexPair(channels.red)}${hexPair(channels.green)}${hexPair(channels.blue)}`;
+	if (opacityNumber >= 100) return color;
+	return `${color}${hexPair(clampNumber(opacityNumber, 0, 100) / 100 * 255)}`;
+}
+function hexColorEqual(left, right) {
+	if (!left || !validHexColor(left) || !validHexColor(right)) return false;
+	return expandHexColor(left).toLowerCase() === expandHexColor(right).toLowerCase();
+}
 function clampNumber(value, min, max) {
 	if (Number.isNaN(value)) return min;
 	return Math.min(max, Math.max(min, value));
@@ -5308,7 +7918,6 @@ function hsvaFromHexColor(value) {
 	const red = Number.parseInt(hex.slice(0, 2), 16) / 255;
 	const green = Number.parseInt(hex.slice(2, 4), 16) / 255;
 	const blue = Number.parseInt(hex.slice(4, 6), 16) / 255;
-	const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 * 100 : 100;
 	const max = Math.max(red, green, blue);
 	const delta = max - Math.min(red, green, blue);
 	let hue = 0;
@@ -5322,8 +7931,7 @@ function hsvaFromHexColor(value) {
 	return {
 		hue,
 		saturation: max === 0 ? 0 : delta / max * 100,
-		value: max * 100,
-		alpha
+		value: max * 100
 	};
 }
 function hexColorFromHsva(color) {
@@ -5356,19 +7964,14 @@ function hexColorFromHsva(color) {
 		red = chroma;
 		blue = x;
 	}
-	const alpha = clampNumber(color.alpha, 0, 100);
-	const hex = `#${hexPair((red + match) * 255)}${hexPair((green + match) * 255)}${hexPair((blue + match) * 255)}`;
-	return alpha >= 100 ? hex : `${hex}${hexPair(alpha / 100 * 255)}`;
-}
-function opaqueHexColorFromHsva(color) {
-	return hexColorFromHsva({
-		...color,
-		alpha: 100
-	});
+	return `#${hexPair((red + match) * 255)}${hexPair((green + match) * 255)}${hexPair((blue + match) * 255)}`;
 }
 function validTokenPath(value) {
 	return /^[A-Za-z_][\w-]*(?:\.[A-Za-z0-9_][\w-]*)*$/.test(value.trim());
 }
+function ntcTokenPathFromHexColor(value) {
+	return (identify(value, { palette: ntc }) ?? "color").trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "color";
+}
 function jsonPrimitiveText$1(value) {
 	if (value === void 0) return void 0;
 	if (typeof value === "string") return value;
@@ -5471,8 +8074,19 @@ function ColorTokenOpacityInput(props) {
 	const variant = props.variant ?? "full";
 	const noAutoOpen = useSignal(null);
 	const colorTokenValue = pandaColorTokenValueFromString(props.value);
-	if (!colorTokenValue) return null;
-	const colorOnlyValue = colorTokenValue.wrapped ? `token(colors.${colorTokenValue.tokenPath})` : colorTokenValue.tokenPath;
+	const hexColorValue = hexColorOpacityValueFromString(props.value);
+	const opacityValue = colorTokenValue ? {
+		kind: "token",
+		tokenPath: colorTokenValue.tokenPath,
+		opacity: colorTokenValue.opacity,
+		wrapped: colorTokenValue.wrapped
+	} : hexColorValue ? {
+		kind: "hex",
+		colorValue: hexColorValue.colorValue,
+		opacity: hexColorValue.opacity
+	} : void 0;
+	if (!opacityValue) return null;
+	const colorOnlyValue = opacityValue.kind === "token" ? opacityValue.wrapped ? `token(colors.${opacityValue.tokenPath})` : opacityValue.tokenPath : opacityValue.colorValue;
 	const showInvalid = props.invalid;
 	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
 	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
@@ -5491,17 +8105,42 @@ function ColorTokenOpacityInput(props) {
 	const updateToken = (tokenValue, mode) => {
 		const nextToken = pandaColorTokenValueFromString(tokenValue);
 		if (!nextToken) return;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, nextToken.tokenPath, colorTokenValue.opacity), mode);
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, nextToken.tokenPath, opacityValue.opacity), mode);
+	};
+	const updateHexColor = (value, mode) => {
+		const nextValue = hexColorValueForOpacity(value, opacityValue.opacity);
+		if (!nextValue) return;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, nextValue, mode);
 	};
 	const updateOpacity = (opacity) => {
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, colorTokenValue.tokenPath, opacity), "input");
+		const value = opacityValue.kind === "token" ? colorTokenValueForCurrentSyntax(props.value, opacityValue.tokenPath, opacity) : hexColorValueForOpacity(opacityValue.colorValue, opacity);
+		if (!value) return;
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, value, "input");
 	};
 	_$2(() => {
 		if (!props.expanded || variant !== "expanded-parts") return;
 		(expandedRoot.current?.querySelector("button:not(:disabled), input:not(:disabled)"))?.focus();
 	}, []);
-	if (!props.expanded || variant === "placeholder") {
-		if (colorTokenValue.opacity === "100" && variant !== "placeholder") return /* @__PURE__ */ u(ColorTokenValueInput, {
+	if (variant === "placeholder") return /* @__PURE__ */ u("button", {
+		type: "button",
+		"data-color-token-opacity-collapsed": "true",
+		"data-preview-target-id": props.targetId,
+		"data-preview-path": props.pathLabel,
+		"data-preview-changed": props.changed ? "true" : "false",
+		"data-preview-invalid": showInvalid ? "true" : "false",
+		"data-preview-original-value": props.originalValue,
+		tabIndex: -1,
+		disabled: props.saving.value,
+		"aria-hidden": "true",
+		style: {
+			...collapsedStyle,
+			visibility: "hidden",
+			pointerEvents: "none"
+		},
+		children: props.value
+	});
+	if (!props.expanded) {
+		if (opacityValue.opacity === "100") return /* @__PURE__ */ u(ColorTokenValueInput, {
 			targetId: props.targetId,
 			path: props.path,
 			pathLabel: props.pathLabel,
@@ -5520,35 +8159,30 @@ function ColorTokenOpacityInput(props) {
 			onMenuOpenChange: props.onMenuOpenChange,
 			onArrowRight: props.onExpand
 		});
-		return /* @__PURE__ */ u("button", {
-			type: "button",
-			"data-color-token-opacity-collapsed": "true",
-			"data-preview-target-id": props.targetId,
-			"data-preview-path": props.pathLabel,
-			"data-preview-changed": props.changed ? "true" : "false",
-			"data-preview-invalid": showInvalid ? "true" : "false",
-			"data-preview-original-value": props.originalValue,
-			tabIndex: variant === "placeholder" ? -1 : void 0,
-			disabled: props.saving.value,
-			"aria-hidden": variant === "placeholder" ? "true" : void 0,
-			onClick: props.onExpand,
-			onKeyDown: (event) => {
-				if ((event.metaKey || event.ctrlKey) && event.key === "Backspace") {
-					event.preventDefault();
-					props.onModBackspace();
+		return /* @__PURE__ */ u(ColorTokenValueInput, {
+			targetId: props.targetId,
+			path: props.path,
+			pathLabel: props.pathLabel,
+			originalValue: props.originalValue,
+			value: props.value,
+			changed: props.changed,
+			invalid: props.invalid,
+			autoOpen: props.autoOpen,
+			options: props.options,
+			tokenSources: props.tokenSources,
+			saving: props.saving,
+			onAutoOpenHandled: props.onAutoOpenHandled,
+			onPreviewInput: (_editId, _path, _originalValue, value, mode) => {
+				if (validHexColor(value)) {
+					updateHexColor(value, mode);
 					return;
 				}
-				if (!event.metaKey && !event.ctrlKey) return;
-				if (event.key !== "ArrowRight") return;
-				event.preventDefault();
-				props.onExpand();
+				updateToken(value, mode);
 			},
-			style: variant === "placeholder" ? {
-				...collapsedStyle,
-				visibility: "hidden",
-				pointerEvents: "none"
-			} : collapsedStyle,
-			children: props.value
+			onModBackspace: props.onModBackspace,
+			onCreateToken: props.onCreateToken,
+			onMenuOpenChange: props.onMenuOpenChange,
+			onArrowRight: props.onExpand
 		});
 	}
 	return /* @__PURE__ */ u("div", {
@@ -5589,6 +8223,10 @@ function ColorTokenOpacityInput(props) {
 				saving: props.saving,
 				onAutoOpenHandled: () => {},
 				onPreviewInput: (_editId, _path, _originalValue, value, mode) => {
+					if (validHexColor(value)) {
+						updateHexColor(value, mode);
+						return;
+					}
 					updateToken(value, mode);
 				},
 				onModBackspace: props.onModBackspace,
@@ -5615,7 +8253,7 @@ function ColorTokenOpacityInput(props) {
 				"data-color-token-opacity-control": "true",
 				children: /* @__PURE__ */ u(SteppableNumericInput, {
 					property: "colorTokenOpacity",
-					value: colorTokenValue.opacity,
+					value: opacityValue.opacity,
 					disabled: props.saving.value,
 					label: `${props.pathLabel} opacity`,
 					dataAttributes: {
@@ -5641,7 +8279,6 @@ function ColorTokenValueInput(props) {
 	const focused = useSignal(false);
 	const createDialogOpen = useSignal(false);
 	const createTokenPath = useSignal("");
-	const createTokenKind = useSignal("token");
 	const createColor = useSignal(hsvaFromHexColor("#ff0000"));
 	const createColorHex = useSignal("#ff0000");
 	const createSourceTargetId = useSignal("");
@@ -5659,51 +8296,67 @@ function ColorTokenValueInput(props) {
 	const menuSelectionConfirmed = A$1(false);
 	const preparedOptions = useComputed(() => props.options.value.map(prepareColorTokenOption));
 	const filteredOptions = useComputed(() => filteredColorTokenOptions(query.value, preparedOptions.value));
+	const searchedHexMatchesToken = useComputed(() => {
+		const value = query.value.trim();
+		if (!validHexColor(value)) return false;
+		return props.options.value.some((option) => hexColorEqual(option.swatch, value) || hexColorEqual(option.detail, value));
+	});
+	const rawHexOption = useComputed(() => searchedHexMatchesToken.value ? void 0 : rawHexColorOption(query.value));
+	const currentRawHexOption = useComputed(() => rawHexColorOption(props.value));
+	const menuRawHexOption = useComputed(() => rawHexOption.value ?? (query.value.trim().length === 0 ? currentRawHexOption.value : void 0));
+	const visibleOptions = useComputed(() => menuRawHexOption.value ? [menuRawHexOption.value, ...filteredOptions.value] : filteredOptions.value);
 	const hasFilterQuery = useComputed(() => query.value.trim().length > 0);
 	const groupedOptions = useComputed(() => groupedColorTokenOptions(filteredOptions.value));
+	const createTokenPathExplicit = useComputed(() => createTokenPath.value.trim().length > 0);
+	const createTokenSection = useComputed(() => createTokenPathExplicit.value ? CREATE_SEMANTIC_COLOR_TOKEN_SECTION : CREATE_COLOR_TOKEN_SECTION);
+	const createTokenPathPlaceholder = useComputed(() => validHexColor(createColorHex.value) ? ntcTokenPathFromHexColor(createColorHex.value) : "");
 	const writableTokenSources = useComputed(() => props.tokenSources.value.filter((source) => source.writable && source.writableSections.length > 0));
 	const selectedCreateSource = useComputed(() => {
-		const section = createTokenKind.value === "token" ? "tokens.colors" : "semanticTokens.colors";
-		const matching = writableTokenSources.value.find((source) => source.id === createSourceTargetId.value && source.writableSections.includes(section));
+		const matching = writableTokenSources.value.find((source) => source.id === createSourceTargetId.value && source.writableSections.includes(createTokenSection.value));
 		if (matching) return matching;
-		return writableTokenSources.value.find((source) => source.writableSections.includes(section));
+		return writableTokenSources.value.find((source) => source.writableSections.includes(createTokenSection.value));
 	});
 	const createTargetSources = useComputed(() => {
-		const section = createTokenKind.value === "token" ? "tokens.colors" : "semanticTokens.colors";
-		return writableTokenSources.value.filter((source) => source.writableSections.includes(section));
+		return writableTokenSources.value.filter((source) => source.writableSections.includes(createTokenSection.value));
 	});
+	const createTokenAvailable = useComputed(() => writableTokenSources.value.some((source) => source.writableSections.includes(CREATE_COLOR_TOKEN_SECTION) || source.writableSections.includes(CREATE_SEMANTIC_COLOR_TOKEN_SECTION)));
 	const createOptionVisible = useComputed(() => {
 		const value = query.value.trim();
-		if (writableTokenSources.value.length === 0) return false;
+		if (!createTokenAvailable.value) return false;
 		if (value.length === 0) return true;
 		return value.startsWith("#") && validHexColor(value) && filteredOptions.value.length === 0;
 	});
-	const selectableOptionIds = useComputed(() => createOptionVisible.value ? ["create-token", ...filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id)] : filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id));
+	const selectableOptionIds = useComputed(() => createOptionVisible.value ? [
+		...menuRawHexOption.value ? [menuRawHexOption.value.id] : [],
+		"create-token",
+		...filteredOptions.value.filter((option) => option.disabled !== true).map((option) => option.id)
+	] : visibleOptions.value.filter((option) => option.disabled !== true).map((option) => option.id));
 	const activeSelectableOptionId = useComputed(() => selectableOptionIds.value.includes(activeOptionId.value ?? "") ? activeOptionId.value : selectableOptionIds.value[0]);
 	const showInvalid = props.invalid && !focused.value;
 	const borderColor = showInvalid ? "#fca5a5" : props.changed ? "#93c5fd" : "#d6dde8";
 	const background = showInvalid ? "#fef2f2" : props.changed ? "#eff6ff" : "#fff";
 	const selectedTokenPath = tokenPathFromValueOrTokenReference(props.value, "colors");
-	const selectedOption = props.options.value.find((option) => option.tokenPath === selectedTokenPath);
+	const selectedOption = props.options.value.find((option) => option.tokenPath === selectedTokenPath) ?? currentRawHexOption.value;
 	const selectedOptionId = selectedOption?.id;
 	const previewOption = (option) => {
-		if (!option.tokenPath || props.saving.value) return;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, option.tokenPath), "transient");
+		if (!option.tokenPath && !option.rawValue || props.saving.value) return;
+		const value = option.rawValue ?? colorTokenValueForCurrentSyntax(props.value, option.tokenPath);
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, value, "transient");
 	};
 	const selectOption = (option) => {
-		if (!option.tokenPath || props.saving.value) return;
+		if (!option.tokenPath && !option.rawValue || props.saving.value) return;
 		const baselineValue = menuBaselineValue.current;
 		if (baselineValue !== void 0) props.onPreviewInput(props.targetId, props.path, props.originalValue, baselineValue, "transient");
 		menuSelectionConfirmed.current = true;
 		menuOpen.value = false;
-		props.onPreviewInput(props.targetId, props.path, props.originalValue, colorTokenValueForCurrentSyntax(props.value, option.tokenPath), "immediate");
+		const value = option.rawValue ?? colorTokenValueForCurrentSyntax(props.value, option.tokenPath);
+		props.onPreviewInput(props.targetId, props.path, props.originalValue, value, "immediate");
 	};
 	const openCreateDialog = () => {
-		const initialHex = validHexColor(query.value) ? query.value.trim() : "#ff0000";
+		const initialColor = hsvaFromHexColor(validHexColor(query.value) ? query.value.trim() : "#ff0000");
 		createTokenPath.value = "";
-		createTokenKind.value = "token";
-		createColor.value = hsvaFromHexColor(initialHex);
-		createColorHex.value = initialHex;
+		createColor.value = initialColor;
+		createColorHex.value = hexColorFromHsva(initialColor);
 		createSourceTargetId.value = selectedCreateSource.value?.id ?? "";
 		createApplyToInput.value = true;
 		createError.value = "";
@@ -5722,7 +8375,7 @@ function ColorTokenValueInput(props) {
 		activeOptionId.value = nextId;
 		if (nextId) {
 			scrollOptionIntoView(nextId);
-			const option = filteredOptions.value.find((item) => item.id === nextId);
+			const option = visibleOptions.value.find((item) => item.id === nextId);
 			if (option) previewOption(option);
 		}
 	};
@@ -5733,7 +8386,7 @@ function ColorTokenValueInput(props) {
 			openCreateDialog();
 			return;
 		}
-		const option = filteredOptions.value.find((item) => item.id === activeId);
+		const option = visibleOptions.value.find((item) => item.id === activeId);
 		if (option) selectOption(option);
 	};
 	const closeCreateDialog = () => {
@@ -5742,10 +8395,10 @@ function ColorTokenValueInput(props) {
 		trigger.current?.focus();
 	};
 	const submitCreateToken = () => {
-		const tokenPath = createTokenPath.value.trim();
+		const tokenPath = createTokenPath.value.trim() || createTokenPathPlaceholder.value;
 		const value = createColorHex.value.trim();
-		const section = createTokenKind.value === "token" ? "tokens.colors" : "semanticTokens.colors";
 		const source = selectedCreateSource.value;
+		const section = createTokenSection.value;
 		if (!validHexColor(value)) {
 			createError.value = "Enter a valid hex color value.";
 			return;
@@ -5759,14 +8412,13 @@ function ColorTokenValueInput(props) {
 			return;
 		}
 		if (!source || !source.writableSections.includes(section)) {
-			createError.value = "Choose a writable Panda config target for this token type.";
+			createError.value = createTokenPathExplicit.value ? "Choose a writable Panda config target for semantic color tokens." : "Choose a writable Panda config target for color tokens.";
 			return;
 		}
 		createSaving.value = true;
 		createError.value = "";
 		props.onCreateToken({
 			tokenPath,
-			tokenKind: createTokenKind.value,
 			value,
 			sourceTargetId: source.id,
 			section
@@ -5865,28 +8517,27 @@ function ColorTokenValueInput(props) {
 	};
 	const updateCreateColorHex = (value) => {
 		createColorHex.value = value;
-		if (validHexColor(value)) createColor.value = hsvaFromHexColor(value);
+		if (validHexColor(value)) {
+			const nextColor = hsvaFromHexColor(value);
+			createColor.value = nextColor;
+			createColorHex.value = hexColorFromHsva(nextColor);
+		}
 	};
 	const hueSliderBackground = "linear-gradient(90deg, #f00, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00)";
-	const saturationSliderBackground = `linear-gradient(90deg, ${opaqueHexColorFromHsva({
+	const saturationSliderBackground = `linear-gradient(90deg, ${hexColorFromHsva({
 		hue: createColor.value.hue,
 		saturation: 0,
 		value: createColor.value.value
-	})}, ${opaqueHexColorFromHsva({
+	})}, ${hexColorFromHsva({
 		hue: createColor.value.hue,
 		saturation: 100,
 		value: createColor.value.value
 	})})`;
-	const valueSliderBackground = `linear-gradient(90deg, #000000, ${opaqueHexColorFromHsva({
+	const valueSliderBackground = `linear-gradient(90deg, #000000, ${hexColorFromHsva({
 		hue: createColor.value.hue,
 		saturation: createColor.value.saturation,
 		value: 100
 	})})`;
-	const alphaSliderBackground = "linear-gradient(90deg, transparent, " + opaqueHexColorFromHsva({
-		hue: createColor.value.hue,
-		saturation: createColor.value.saturation,
-		value: createColor.value.value
-	}) + "), linear-gradient(45deg, #d6dde8 25%, transparent 25%), linear-gradient(-45deg, #d6dde8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d6dde8 75%), linear-gradient(-45deg, transparent 75%, #d6dde8 75%)";
 	_$2(() => {
 		if (menuOpen.value) {
 			if (!previousMenuOpen.current) {
@@ -5930,6 +8581,13 @@ function ColorTokenValueInput(props) {
 	_$2(() => {
 		if (optionList.current) optionList.current.scrollTop = 0;
 	}, [query.value]);
+	_$2(() => {
+		if (!menuOpen.value || props.saving.value) return;
+		const activeId = activeSelectableOptionId.value;
+		if (!activeId || activeId === "create-token") return;
+		const option = visibleOptions.value.find((item) => item.id === activeId);
+		if (option) previewOption(option);
+	}, [query.value, activeSelectableOptionId.value]);
 	return /* @__PURE__ */ u("div", {
 		style: {
 			position: "relative",
@@ -6101,61 +8759,65 @@ function ColorTokenValueInput(props) {
 						overflow: "auto",
 						minHeight: "32px"
 					},
-					children: [createOptionVisible.value ? /* @__PURE__ */ u(ShadowMenuItem, {
-						active: activeSelectableOptionId.value === "create-token",
-						class: "panda-token-selector-menu-item",
-						disabled: props.saving.value,
-						onSelect: openCreateDialog,
-						children: /* @__PURE__ */ u("span", {
-							"data-fuzzy-selector-create-token": "true",
-							onClick: (event) => {
-								event.stopPropagation();
-								openCreateDialog();
-							},
-							children: "Create color token..."
-						})
-					}) : null, props.options.value.length === 0 && !createOptionVisible.value ? /* @__PURE__ */ u("div", {
-						"data-fuzzy-selector-empty": "true",
-						style: {
-							color: "#667085",
-							padding: "7px 8px"
-						},
-						children: "No color tokens available."
-					}) : filteredOptions.value.length === 0 && !createOptionVisible.value ? /* @__PURE__ */ u("div", {
-						"data-fuzzy-selector-no-matches": "true",
-						style: {
-							color: "#667085",
-							padding: "7px 8px"
-						},
-						children: "No matching color tokens."
-					}) : filteredOptions.value.length === 0 ? null : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
-						"data-fuzzy-selector-group": group.presetName ? `${group.presetName} / ${group.label}` : group.label,
-						children: [
-							group.presetName ? /* @__PURE__ */ u("div", {
-								"data-fuzzy-selector-preset-label": "true",
-								style: {
-									borderTop: "1px solid #e6ebf2",
-									color: "#344054",
-									fontSize: "11px",
-									fontWeight: 700,
-									padding: "8px 8px 1px"
-								},
-								children: group.presetName
-							}) : null,
-							/* @__PURE__ */ u("div", {
-								"data-fuzzy-selector-group-label": "true",
-								style: {
-									color: "#667085",
-									fontSize: "11px",
-									fontWeight: 700,
-									padding: "6px 8px 2px",
-									textTransform: "uppercase"
+					children: [
+						menuRawHexOption.value ? renderTokenOption(menuRawHexOption.value) : null,
+						createOptionVisible.value ? /* @__PURE__ */ u(ShadowMenuItem, {
+							active: activeSelectableOptionId.value === "create-token",
+							class: "panda-token-selector-menu-item",
+							disabled: props.saving.value,
+							onSelect: openCreateDialog,
+							children: /* @__PURE__ */ u("span", {
+								"data-fuzzy-selector-create-token": "true",
+								onClick: (event) => {
+									event.stopPropagation();
+									openCreateDialog();
 								},
-								children: group.label
-							}),
-							group.options.map((option) => renderTokenOption(option))
-						]
-					}, `${group.label}:${group.presetName ?? ""}`))]
+								children: "Create color token..."
+							})
+						}) : null,
+						props.options.value.length === 0 && !createOptionVisible.value && !menuRawHexOption.value ? /* @__PURE__ */ u("div", {
+							"data-fuzzy-selector-empty": "true",
+							style: {
+								color: "#667085",
+								padding: "7px 8px"
+							},
+							children: "No color tokens available."
+						}) : filteredOptions.value.length === 0 && !createOptionVisible.value && !menuRawHexOption.value ? /* @__PURE__ */ u("div", {
+							"data-fuzzy-selector-no-matches": "true",
+							style: {
+								color: "#667085",
+								padding: "7px 8px"
+							},
+							children: "No matching color tokens."
+						}) : filteredOptions.value.length === 0 ? null : hasFilterQuery.value ? filteredOptions.value.map((option) => renderTokenOption(option)) : groupedOptions.value.map((group) => /* @__PURE__ */ u("div", {
+							"data-fuzzy-selector-group": group.presetName ? `${group.presetName} / ${group.label}` : group.label,
+							children: [
+								group.presetName ? /* @__PURE__ */ u("div", {
+									"data-fuzzy-selector-preset-label": "true",
+									style: {
+										borderTop: "1px solid #e6ebf2",
+										color: "#344054",
+										fontSize: "11px",
+										fontWeight: 700,
+										padding: "8px 8px 1px"
+									},
+									children: group.presetName
+								}) : null,
+								/* @__PURE__ */ u("div", {
+									"data-fuzzy-selector-group-label": "true",
+									style: {
+										color: "#667085",
+										fontSize: "11px",
+										fontWeight: 700,
+										padding: "6px 8px 2px",
+										textTransform: "uppercase"
+									},
+									children: group.label
+								}),
+								group.options.map((option) => renderTokenOption(option))
+							]
+						}, `${group.label}:${group.presetName ?? ""}`))
+					]
 				})]
 			}),
 			createDialogOpen.value ? /* @__PURE__ */ u("div", {
@@ -6174,6 +8836,10 @@ function ColorTokenValueInput(props) {
 				},
 				onKeyDown: (event) => {
 					if (event.key === "Escape" && !createSaving.value) closeCreateDialog();
+					if (event.metaKey && event.key === "Enter" && !createSaving.value) {
+						event.preventDefault();
+						submitCreateToken();
+					}
 				},
 				children: /* @__PURE__ */ u("div", {
 					style: {
@@ -6193,41 +8859,19 @@ function ColorTokenValueInput(props) {
 								display: "grid",
 								gap: "4px"
 							},
-							children: [/* @__PURE__ */ u("span", { children: "Token path" }), /* @__PURE__ */ u("input", {
+							children: [/* @__PURE__ */ u("span", { children: "Name" }), /* @__PURE__ */ u("input", {
 								ref: tokenPathInput,
 								type: "text",
 								"data-create-color-token-path": "true",
 								value: createTokenPath.value,
 								disabled: createSaving.value,
-								placeholder: "brand.600",
+								placeholder: createTokenPathPlaceholder.value || "color",
 								onInput: (event) => {
 									createTokenPath.value = event.currentTarget.value;
 								},
 								style: CREATE_DIALOG_INPUT_STYLE
 							})]
 						}),
-						/* @__PURE__ */ u("label", {
-							style: {
-								display: "grid",
-								gap: "4px"
-							},
-							children: [/* @__PURE__ */ u("span", { children: "Token type" }), /* @__PURE__ */ u("select", {
-								"data-create-color-token-kind": "true",
-								value: createTokenKind.value,
-								disabled: createSaving.value,
-								onChange: (event) => {
-									createTokenKind.value = event.currentTarget.value;
-								},
-								style: CREATE_DIALOG_INPUT_STYLE,
-								children: [/* @__PURE__ */ u("option", {
-									value: "token",
-									children: "Color token"
-								}), /* @__PURE__ */ u("option", {
-									value: "semantic-token",
-									children: "Semantic color token"
-								})]
-							})]
-						}),
 						/* @__PURE__ */ u("label", {
 							style: {
 								display: "grid",
@@ -6264,7 +8908,7 @@ function ColorTokenValueInput(props) {
 						/* @__PURE__ */ u("div", {
 							style: {
 								display: "grid",
-								gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+								gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
 								gap: "8px"
 							},
 							children: [
@@ -6318,23 +8962,6 @@ function ColorTokenValueInput(props) {
 											updateCreateColor("value", value);
 										}
 									})]
-								}),
-								/* @__PURE__ */ u("label", {
-									style: {
-										display: "grid",
-										gap: "4px",
-										minWidth: 0
-									},
-									children: [/* @__PURE__ */ u("span", { children: "Alpha" }), /* @__PURE__ */ u(SteppableNumericInput, {
-										dataAttributes: { "data-create-color-token-alpha": "true" },
-										property: "alpha",
-										label: "alpha",
-										value: String(createColor.value.alpha),
-										disabled: createSaving.value,
-										onInput: (value) => {
-											updateCreateColor("alpha", value);
-										}
-									})]
 								})
 							]
 						}),
@@ -6379,20 +9006,6 @@ function ColorTokenValueInput(props) {
 									onInput: (value) => {
 										updateCreateColorFromSlider("value", value);
 									}
-								}),
-								/* @__PURE__ */ u(ColorComponentSlider, {
-									dataAttribute: "data-create-color-token-alpha-slider",
-									label: "Alpha",
-									min: 0,
-									max: 100,
-									value: createColor.value.alpha,
-									disabled: createSaving.value,
-									background: alphaSliderBackground,
-									backgroundPosition: "0 0, 0 0, 0 6px, 6px -6px, -6px 0",
-									backgroundSize: "auto, 12px 12px, 12px 12px, 12px 12px, 12px 12px",
-									onInput: (value) => {
-										updateCreateColorFromSlider("alpha", value);
-									}
 								})
 							]
 						}),
@@ -8958,6 +11571,7 @@ const INSPECTOR_DIALOG_PORTAL_ROOT = "data-sculpted-dialog-root";
 const INSPECTOR_MENU_PORTAL_ROOT = "data-sculpted-menu-root";
 const INLINE_SOURCE_PREVIEW_PATH = ["__inlineSource"];
 const STYLE_MODULE_ACTION_PREVIEW_PATH = ["__styleModuleAction"];
+const COLOR_TOKEN_ACTION_PREVIEW_PATH = ["__colorTokenAction"];
 const COPY_ELEMENT_PATH_AFTER_INSPECT_STORAGE_KEY = "sculpted.copyElementPathAfterInspect";
 const PANEL_DOCKED_STORAGE_KEY = "sculpted.panelDocked";
 const PANEL_SIDE_STORAGE_KEY = "sculpted.panelSide";
@@ -9156,7 +11770,7 @@ function InspectorPanel(props) {
 		changeCount: previewChangeCount,
 		changes: pendingPreviewChanges
 	};
-	const colorTokenOptions = useComputed(() => colorTokenSelectorOptions(editorMetadata.value));
+	const colorTokenOptions = useComputed(() => [...pendingColorTokenOptions(pendingPreviewChanges.value), ...colorTokenSelectorOptions(editorMetadata.value)]);
 	const fontTokenOptions = useComputed(() => fontTokenSelectorOptions(editorMetadata.value));
 	const tokenSources = useComputed(() => {
 		const sources = editorMetadata.value?.tokenSources;
@@ -9297,6 +11911,7 @@ function InspectorPanel(props) {
 		}
 		for (const change of changes.values()) {
 			if (isInlineSourcePreviewChange(change)) continue;
+			if (isColorTokenPreviewChange(change)) continue;
 			if (includedChangeKeys.has(previewChangeKey(change.editId, change.path))) continue;
 			const declarations = change.op === "delete" ? previewDeclarationsForPandaRemoval(change.path) : previewDeclarationsForPandaInput(change.path, change.value);
 			if (declarations.length === 0) continue;
@@ -9736,6 +12351,7 @@ function InspectorPanel(props) {
 		for (const change of pendingPreviewChanges.value.values()) {
 			if (isInlineSourcePreviewChange(change)) continue;
 			if (change.editId.startsWith("inline-source:")) continue;
+			if (isColorTokenPreviewChange(change)) continue;
 			if (isStyleModulePreviewChange(change)) continue;
 			if (styleModuleCreateEditIds.has(change.editId)) continue;
 			changesByEditId.set(change.editId, [...changesByEditId.get(change.editId) ?? [], change]);
@@ -9836,9 +12452,26 @@ function InspectorPanel(props) {
 			}];
 		});
 	};
+	const createTokenConfigRequests = () => {
+		flushPreviewHistoryBatch();
+		return Array.from(pendingPreviewChanges.value.values()).flatMap((change) => {
+			const action = colorTokenActionForPreviewChange(change);
+			if (!action) return [];
+			return [{
+				editId: change.editId,
+				kind: "panda-token-config",
+				sourceTargetId: action.sourceTargetId,
+				section: action.section,
+				path: action.tokenPath.split("."),
+				value: action.value,
+				options: { expectedSourceHash: action.expectedSourceHash }
+			}];
+		});
+	};
 	const savePreviewChanges = () => {
 		const inlineSourceRequests = createInlineSourceRequests();
 		const styleModuleRequests = createStyleModuleRequests();
+		const tokenConfigRequests = createTokenConfigRequests();
 		saveFlow.value = { status: "saving" };
 		(async () => {
 			await runtime.loadManifest();
@@ -9852,27 +12485,26 @@ function InspectorPanel(props) {
 				return;
 			}
 			const requests = styleRequestResult.requests;
-			if (requests.length === 0 && inlineSourceRequests.length === 0 && styleModuleRequests.length === 0) {
+			if (requests.length === 0 && inlineSourceRequests.length === 0 && styleModuleRequests.length === 0 && tokenConfigRequests.length === 0) {
 				saveFlow.value = { status: "idle" };
 				return;
 			}
-			const saveOperationCount = (requests.length > 0 ? 1 : 0) + inlineSourceRequests.length + styleModuleRequests.length;
+			const saveOperationCount = tokenConfigRequests.length + (requests.length > 0 ? 1 : 0) + inlineSourceRequests.length + styleModuleRequests.length;
 			const requestResponses = (write) => {
-				const styleResponses = requests.length > 0 ? runtime.requestStyleEditBatch(requests, write) : Promise.resolve([]);
-				const inlineSourceResponses = Promise.all(inlineSourceRequests.map((request) => runtime.requestInlineCssSource(request, write)));
-				const styleModuleResponses = Promise.all(styleModuleRequests.map((request) => runtime.requestStyleModuleEdit(request, write)));
-				return Promise.all([
-					styleResponses,
-					inlineSourceResponses,
-					styleModuleResponses
+				const styleResponses = () => Promise.all([
+					requests.length > 0 ? runtime.requestStyleEditBatch(requests, write) : Promise.resolve([]),
+					Promise.all(inlineSourceRequests.map((request) => runtime.requestInlineCssSource(request, write))),
+					Promise.all(styleModuleRequests.map((request) => runtime.requestStyleModuleEdit(request, write)))
 				]).then((responses) => responses.flat());
+				if (tokenConfigRequests.length === 0) return styleResponses();
+				return Promise.all(tokenConfigRequests.map((request) => runtime.requestTokenConfigEdit(request, write))).then((tokenResults) => styleResponses().then((styleResults) => [...tokenResults, ...styleResults]));
 			};
 			if (saveOperationCount > 1) {
 				const dryRunFailure = (await requestResponses(false)).find((response) => !response.ok);
 				if (dryRunFailure) {
 					saveFlow.value = {
 						status: "error",
-						message: styleEditResponseMessage(dryRunFailure)
+						message: writebackResponseMessage(dryRunFailure)
 					};
 					return;
 				}
@@ -9882,14 +12514,14 @@ function InspectorPanel(props) {
 			if (failure) {
 				saveFlow.value = {
 					status: "error",
-					message: styleEditResponseMessage(failure)
+					message: writebackResponseMessage(failure)
 				};
 				return;
 			}
 			return allResponses;
 		})().then(async (allResponses) => {
 			if (!allResponses) return;
-			if (allResponses.find((response) => !response.manifestUpdate)) {
+			if (allResponses.find((response) => response.written && !response.editId.startsWith("create-token:") && (!("manifestUpdate" in response) || !response.manifestUpdate))) {
 				saveFlow.value = {
 					status: "error",
 					message: "Save completed, but no manifest update was received. Preview remains applied."
@@ -10028,17 +12660,45 @@ function InspectorPanel(props) {
 		saveFlow.value = { status: "idle" };
 	};
 	const createColorToken = async (request) => {
+		if (saving.value) return {
+			ok: false,
+			editId: `create-token:${request.section}:${request.tokenPath}`,
+			written: false,
+			error: {
+				code: "write-failed",
+				message: "A save is already in progress."
+			}
+		};
 		const source = tokenSources.value.find((item) => item.id === request.sourceTargetId);
 		const response = await runtime.requestTokenConfigEdit({
-			editId: `create-token:${request.tokenPath}`,
+			editId: colorTokenCreateEditId(request.section, request.tokenPath),
 			kind: "panda-token-config",
 			sourceTargetId: request.sourceTargetId,
 			section: request.section,
 			path: request.tokenPath.split("."),
 			value: request.value,
 			options: { expectedSourceHash: source?.sourceHash }
-		}, true);
-		if (response.ok) await loadEditorMetadata(runtime, editorMetadata);
+		}, false);
+		if (!response.ok) return response;
+		const before = pendingPreviewChanges.value;
+		const next = new Map(before);
+		const editId = colorTokenCreateEditId(request.section, request.tokenPath);
+		next.set(previewChangeKey(editId, COLOR_TOKEN_ACTION_PREVIEW_PATH), {
+			editId,
+			path: COLOR_TOKEN_ACTION_PREVIEW_PATH,
+			op: "set",
+			value: JSON.stringify({
+				sourceTargetId: request.sourceTargetId,
+				section: request.section,
+				tokenPath: request.tokenPath,
+				value: request.value,
+				expectedSourceHash: source?.sourceHash
+			}),
+			originalValue: void 0
+		});
+		commitPreviewHistoryStep(before, next);
+		applyPreviewState(next);
+		saveFlow.value = { status: "idle" };
 		return response;
 	};
 	return /* @__PURE__ */ u("div", {
@@ -13127,9 +15787,15 @@ function styleModuleAttachEditId(componentSource, jsxSource, name) {
 function styleModuleDetachEditId(componentSource, jsxSource, name) {
 	return `style-module-detach:${componentSource}:${jsxSource}:${name}`;
 }
+function colorTokenCreateEditId(section, tokenPath) {
+	return `create-token:${section}:${tokenPath}`;
+}
 function isStyleModulePreviewChange(change) {
 	return styleModuleActionForPreviewChange(change) !== void 0;
 }
+function isColorTokenPreviewChange(change) {
+	return colorTokenActionForPreviewChange(change) !== void 0;
+}
 function styleModuleActionForPreviewChange(change) {
 	if (change.path.length !== STYLE_MODULE_ACTION_PREVIEW_PATH.length || !change.path.every((part, index) => part === STYLE_MODULE_ACTION_PREVIEW_PATH[index])) return;
 	try {
@@ -13150,6 +15816,46 @@ function styleModuleActionForPreviewChange(change) {
 		return;
 	}
 }
+function colorTokenActionForPreviewChange(change) {
+	if (change.path.length !== COLOR_TOKEN_ACTION_PREVIEW_PATH.length || !change.path.every((part, index) => part === COLOR_TOKEN_ACTION_PREVIEW_PATH[index])) return;
+	try {
+		const parsed = JSON.parse(change.value);
+		if (!parsed || typeof parsed !== "object") return void 0;
+		if ("sourceTargetId" in parsed && typeof parsed.sourceTargetId === "string" && "section" in parsed && (parsed.section === "tokens.colors" || parsed.section === "semanticTokens.colors") && "tokenPath" in parsed && typeof parsed.tokenPath === "string" && "value" in parsed && (typeof parsed.value === "string" || typeof parsed.value === "number" || typeof parsed.value === "boolean" || parsed.value === null) && (!("expectedSourceHash" in parsed) || typeof parsed.expectedSourceHash === "string")) {
+			const expectedSourceHash = "expectedSourceHash" in parsed && typeof parsed.expectedSourceHash === "string" ? parsed.expectedSourceHash : void 0;
+			return {
+				sourceTargetId: parsed.sourceTargetId,
+				section: parsed.section,
+				tokenPath: parsed.tokenPath,
+				value: parsed.value,
+				expectedSourceHash
+			};
+		}
+	} catch {
+		return;
+	}
+}
+function pendingColorTokenOptions(changes) {
+	return Array.from(changes.values()).flatMap((change) => {
+		const action = colorTokenActionForPreviewChange(change);
+		if (!action) return [];
+		const groupLabel = action.section === "semanticTokens.colors" ? "Pending semantic colors" : "Pending color tokens";
+		const kindLabel = action.section === "semanticTokens.colors" ? "Semantic color" : "Color token";
+		return [{
+			id: `pending:${action.section}:${action.tokenPath}`,
+			label: action.tokenPath,
+			groupLabel,
+			detail: `${kindLabel} pending save`,
+			searchText: `${action.tokenPath} ${action.value} pending ${kindLabel}`,
+			swatch: typeof action.value === "string" ? action.value : void 0,
+			tokenPath: action.tokenPath
+		}];
+	});
+}
+function writebackResponseMessage(response) {
+	if (response.error) return response.error.message;
+	return "Save failed.";
+}
 function pendingPreviewChangesEqual(left, right) {
 	return left.editId === right.editId && left.op === right.op && left.value === right.value && left.originalValue === right.originalValue && left.path.length === right.path.length && left.path.every((part, index) => part === right.path[index]);
 }