function MainComponent() { const [colors, setColors] = useState([]); const [paletteType, setPaletteType] = useState("random"); const [baseColor, setBaseColor] = useState("#ff0000"); const [numColors, setNumColors] = useState(5); const [copied, setCopied] = useState(null); const [canvasSize, setCanvasSize] = useState("square"); const [showColorInfo, setShowColorInfo] = useState(false); const [selectedColor, setSelectedColor] = useState(null); const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }); const [colorHistory, setColorHistory] = useState([]); const getRGBFromHex = (hex)=>{ const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return { r, g, b }; }; const getCMYKFromRGB = ({ r, g, b })=>{ const r1 = r / 255; const g1 = g / 255; const b1 = b / 255; const k = 1 - Math.max(r1, g1, b1); const c = (1 - r1 - k) / (1 - k) || 0; const m = (1 - g1 - k) / (1 - k) || 0; const y = (1 - b1 - k) / (1 - k) || 0; return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) }; }; const generateRandomColor = ()=>{ const letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++){ color += letters[Math.floor(Math.random() * 16)]; } return color; }; const generateMonochromaticColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); for(let i = 0; i < count; i++){ const lightness = 10 + i * (80 / count); colors.push(hslToHex(hsl.h, hsl.s, lightness)); } return colors; }; const generateComplementaryColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const step = 360 / count; for(let i = 0; i < count; i++){ const hue = (hsl.h + i * step) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } return colors; }; const generateAnalogousColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const angleStep = 30; const startHue = hsl.h - (count - 1) * angleStep / 2; for(let i = 0; i < count; i++){ const hue = (startHue + i * angleStep + 360) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } return colors; }; const generateTriadicColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const triadAngles = [ 0, 120, 240 ]; const mainColors = triadAngles.map((angle)=>hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l)); if (count <= 3) { return mainColors.slice(0, count); } const extraColorsPerSegment = Math.floor((count - 3) / 3); triadAngles.forEach((angle, i)=>{ const nextAngle = triadAngles[(i + 1) % 3]; const step = (nextAngle - angle) / (extraColorsPerSegment + 1); colors.push(hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l)); for(let j = 1; j <= extraColorsPerSegment; j++){ const hue = (hsl.h + angle + step * j) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } }); return colors.slice(0, count); }; const generateSplitComplementaryColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const complement = (hsl.h + 180) % 360; const split = 30; colors.push(base); colors.push(hslToHex((complement - split) % 360, hsl.s, hsl.l)); colors.push(hslToHex((complement + split) % 360, hsl.s, hsl.l)); if (count > 3) { const remaining = count - 3; const step = split * 2 / (remaining + 1); for(let i = 1; i <= remaining; i++){ const hue = (complement - split + step * i) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } } return colors.slice(0, count); }; const generateTetradicColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const angles = [ 0, 90, 180, 270 ]; const mainColors = angles.map((angle)=>hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l)); if (count <= 4) { return mainColors.slice(0, count); } const extraColorsPerSegment = Math.floor((count - 4) / 4); angles.forEach((angle, i)=>{ const nextAngle = angles[(i + 1) % 4]; const step = (nextAngle - angle) / (extraColorsPerSegment + 1); colors.push(hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l)); for(let j = 1; j <= extraColorsPerSegment; j++){ const hue = (hsl.h + angle + step * j) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } }); return colors.slice(0, count); }; const generateSquareColors = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); const angles = [ 0, 90, 180, 270 ]; angles.forEach((angle)=>{ colors.push(hslToHex((hsl.h + angle) % 360, hsl.s, hsl.l)); }); if (count > 4) { const remaining = count - 4; const step = 90 / (remaining / 4 + 1); for(let i = 0; i < remaining; i++){ const section = Math.floor(i / (remaining / 4)); const hue = (hsl.h + angles[section] + step * (i % (remaining / 4 + 1))) % 360; colors.push(hslToHex(hue, hsl.s, hsl.l)); } } return colors.slice(0, count); }; const generateShades = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); for(let i = 0; i < count; i++){ const lightness = Math.max(0, hsl.l - i * (hsl.l / count)); colors.push(hslToHex(hsl.h, hsl.s, lightness)); } return colors; }; const generateTints = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); for(let i = 0; i < count; i++){ const lightness = Math.min(100, hsl.l + i * ((100 - hsl.l) / count)); colors.push(hslToHex(hsl.h, hsl.s, lightness)); } return colors; }; const generateTones = (base, count)=>{ const colors = []; const hsl = hexToHSL(base); for(let i = 0; i < count; i++){ const saturation = Math.max(0, hsl.s - i * (hsl.s / count)); colors.push(hslToHex(hsl.h, saturation, hsl.l)); } return colors; }; const hexToHSL = (hex)=>{ let r = parseInt(hex.slice(1, 3), 16) / 255; let g = parseInt(hex.slice(3, 5), 16) / 255; let b = parseInt(hex.slice(5, 7), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: h * 360, s: s * 100, l: l * 100 }; }; const hslToHex = (h, s, l)=>{ l /= 100; const a = s * Math.min(l, 1 - l) / 100; const f = (n)=>{ const k = (n + h / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, "0"); }; return `#${f(0)}${f(8)}${f(4)}`; }; const generatePalette = ()=>{ let newColors; switch(paletteType){ case "monochromatic": newColors = generateMonochromaticColors(baseColor, numColors); break; case "complementary": newColors = generateComplementaryColors(baseColor, numColors); break; case "analogous": newColors = generateAnalogousColors(baseColor, numColors); break; case "triadic": newColors = generateTriadicColors(baseColor, numColors); break; case "split-complementary": newColors = generateSplitComplementaryColors(baseColor, numColors); break; case "tetradic": newColors = generateTetradicColors(baseColor, numColors); break; case "square": newColors = generateSquareColors(baseColor, numColors); break; case "shades": newColors = generateShades(baseColor, numColors); break; case "tints": newColors = generateTints(baseColor, numColors); break; case "tones": newColors = generateTones(baseColor, numColors); break; default: newColors = Array(numColors).fill().map(()=>generateRandomColor()); } setColors(newColors); setColorHistory((prev)=>{ const newHistory = [ newColors, ...prev ]; return newHistory.slice(0, 10); }); }; const exportToCSV = ()=>{ const csvContent = colors.map((color)=>{ const rgb = getRGBFromHex(color); const hsl = hexToHSL(color); const cmyk = getCMYKFromRGB(rgb); return `${color},${rgb.r},${rgb.g},${rgb.b},${Math.round(hsl.h)},${Math.round(hsl.s)},${Math.round(hsl.l)},${cmyk.c},${cmyk.m},${cmyk.y},${cmyk.k}`; }).join("\n"); const header = "HEX,R,G,B,H,S,L,C,M,Y,K\n"; const blob = new Blob([ header + csvContent ], { type: "text/csv" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "color-palette.csv"; a.click(); }; const exportToJSON = ()=>{ const paletteData = colors.map((color)=>{ const rgb = getRGBFromHex(color); const hsl = hexToHSL(color); const cmyk = getCMYKFromRGB(rgb); return { hex: color, rgb: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`, hsl: `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`, cmyk: `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)` }; }); const blob = new Blob([ JSON.stringify(paletteData, null, 2) ], { type: "application/json" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "color-palette.json"; a.click(); }; const copyToClipboard = (color, index)=>{ navigator.clipboard.writeText(color); setCopied(index); setTimeout(()=>setCopied(null), 1500); }; const downloadPalette = ()=>{ const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); let canvasWidth, canvasHeight; switch(canvasSize){ case "portrait": canvasWidth = 1638; canvasHeight = 2048; break; case "landscape": canvasWidth = 2048; canvasHeight = 1638; break; default: canvasWidth = 2048; canvasHeight = 2048; break; } canvas.width = canvasWidth; canvas.height = canvasHeight; const padding = 40; const totalWidth = canvasWidth - padding * 2; let colorWidth, colorHeight; if (canvasSize === "portrait") { colorWidth = totalWidth; colorHeight = (canvasHeight - padding * 2 - colors.length * 80) / colors.length; } else { colorWidth = totalWidth / colors.length; colorHeight = canvasHeight - padding * 2 - 100; } ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvasWidth, canvasHeight); if (canvasSize === "portrait") { colors.forEach((color, index)=>{ const y = padding + index * (colorHeight + 80); ctx.fillStyle = color; ctx.fillRect(padding, y, colorWidth, colorHeight); ctx.fillStyle = "#000000"; ctx.font = "bold 64px Arial"; ctx.textAlign = "center"; ctx.fillText(color.toUpperCase(), padding + colorWidth / 2, y + colorHeight + 60); }); } else { colors.forEach((color, index)=>{ const x = padding + index * colorWidth; ctx.fillStyle = color; ctx.fillRect(x, padding, colorWidth, colorHeight); ctx.fillStyle = "#000000"; ctx.font = "bold 64px Arial"; ctx.textAlign = "center"; ctx.fillText(color.toUpperCase(), x + colorWidth / 2, colorHeight + padding + 80); }); } const link = document.createElement("a"); link.download = `color-palette-${canvasSize}.png`; link.href = canvas.toDataURL("image/png"); link.click(); }; useEffect(()=>{ generatePalette(); }, []); useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.key === " ") { e.preventDefault(); generatePalette(); } else if (e.key === "s") { e.preventDefault(); downloadPalette(); } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-gray-800", __source: { fileName: "", lineNumber: 437, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("main", { className: "px-4 sm:px-6 md:px-8", __source: { fileName: "", lineNumber: 438, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto py-6 sm:py-8", __source: { fileName: "", lineNumber: 439, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl sm:text-4xl font-bold mb-6 sm:mb-8 text-center", __source: { fileName: "", lineNumber: 440, columnNumber: 11 }, __self: this }, "Color Palette Generator"), /*#__PURE__*/ React.createElement("section", { className: "grid md:grid-cols-2 gap-6 md:gap-8", __source: { fileName: "", lineNumber: 443, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 444, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-base font-medium mb-2", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, "Palette Type"), /*#__PURE__*/ React.createElement("select", { value: paletteType, onChange: (e)=>setPaletteType(e.target.value), className: "w-full p-4 bg-gray-100 rounded-lg text-base focus:ring-2 focus:ring-black outline-none", __source: { fileName: "", lineNumber: 449, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "random", __source: { fileName: "", lineNumber: 454, columnNumber: 19 }, __self: this }, "Random"), /*#__PURE__*/ React.createElement("option", { value: "monochromatic", __source: { fileName: "", lineNumber: 455, columnNumber: 19 }, __self: this }, "Monochromatic"), /*#__PURE__*/ React.createElement("option", { value: "complementary", __source: { fileName: "", lineNumber: 456, columnNumber: 19 }, __self: this }, "Complementary"), /*#__PURE__*/ React.createElement("option", { value: "analogous", __source: { fileName: "", lineNumber: 457, columnNumber: 19 }, __self: this }, "Analogous"), /*#__PURE__*/ React.createElement("option", { value: "triadic", __source: { fileName: "", lineNumber: 458, columnNumber: 19 }, __self: this }, "Triadic"), /*#__PURE__*/ React.createElement("option", { value: "split-complementary", __source: { fileName: "", lineNumber: 459, columnNumber: 19 }, __self: this }, "Split Complementary"), /*#__PURE__*/ React.createElement("option", { value: "tetradic", __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, "Tetradic (Double Complementary)"), /*#__PURE__*/ React.createElement("option", { value: "square", __source: { fileName: "", lineNumber: 465, columnNumber: 19 }, __self: this }, "Square"), /*#__PURE__*/ React.createElement("option", { value: "shades", __source: { fileName: "", lineNumber: 466, columnNumber: 19 }, __self: this }, "Shades"), /*#__PURE__*/ React.createElement("option", { value: "tints", __source: { fileName: "", lineNumber: 467, columnNumber: 19 }, __self: this }, "Tints"), /*#__PURE__*/ React.createElement("option", { value: "tones", __source: { fileName: "", lineNumber: 468, columnNumber: 19 }, __self: this }, "Tones"))), paletteType !== "random" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 473, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-base font-medium mb-2", __source: { fileName: "", lineNumber: 474, columnNumber: 19 }, __self: this }, "Base Color"), /*#__PURE__*/ React.createElement("input", { type: "color", value: baseColor, onChange: (e)=>setBaseColor(e.target.value), className: "w-full h-16 rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 477, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 486, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-base font-medium mb-2", __source: { fileName: "", lineNumber: 487, columnNumber: 17 }, __self: this }, "Number of Colors: ", numColors), /*#__PURE__*/ React.createElement("input", { type: "range", min: "2", max: "10", value: numColors, onChange: (e)=>setNumColors(parseInt(e.target.value)), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", __source: { fileName: "", lineNumber: 490, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 500, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-base font-medium mb-2", __source: { fileName: "", lineNumber: 501, columnNumber: 17 }, __self: this }, "Canvas Size"), /*#__PURE__*/ React.createElement("select", { value: canvasSize, onChange: (e)=>setCanvasSize(e.target.value), className: "w-full p-4 bg-gray-100 rounded-lg text-base focus:ring-2 focus:ring-black outline-none", __source: { fileName: "", lineNumber: 504, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "square", __source: { fileName: "", lineNumber: 509, columnNumber: 19 }, __self: this }, "Square (2048 x 2048)"), /*#__PURE__*/ React.createElement("option", { value: "portrait", __source: { fileName: "", lineNumber: 510, columnNumber: 19 }, __self: this }, "Portrait (1638 x 2048)"), /*#__PURE__*/ React.createElement("option", { value: "landscape", __source: { fileName: "", lineNumber: 511, columnNumber: 19 }, __self: this }, "Landscape (2048 x 1638)"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4", __source: { fileName: "", lineNumber: 515, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generatePalette, className: "w-full py-4 bg-black hover:bg-gray-900 text-white rounded-lg font-semibold text-base", __source: { fileName: "", lineNumber: 516, columnNumber: 17 }, __self: this }, "Generate New Palette"), /*#__PURE__*/ React.createElement("button", { onClick: downloadPalette, className: "w-full py-4 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-semibold text-base", __source: { fileName: "", lineNumber: 523, columnNumber: 17 }, __self: this }, "Download Palette")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 531, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: exportToCSV, className: "py-4 px-4 bg-gray-200 hover:bg-gray-300 rounded-lg text-base", __source: { fileName: "", lineNumber: 532, columnNumber: 17 }, __self: this }, "Export as CSV"), /*#__PURE__*/ React.createElement("button", { onClick: exportToJSON, className: "py-4 px-4 bg-gray-200 hover:bg-gray-300 rounded-lg text-base", __source: { fileName: "", lineNumber: 538, columnNumber: 17 }, __self: this }, "Export as JSON")), /*#__PURE__*/ React.createElement("div", { className: "hidden md:block mt-4 text-sm text-gray-600", __source: { fileName: "", lineNumber: 546, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 547, columnNumber: 17 }, __self: this }, "💡 Tip: Space bar to generate new palette"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 548, columnNumber: 17 }, __self: this }, "💡 Tip: 'S' key to save palette"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 549, columnNumber: 17 }, __self: this }, "💡 Tip: Hover over any color to see detailed information"))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 553, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 rounded-lg p-4 sm:p-6", __source: { fileName: "", lineNumber: 554, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, colors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative h-20 sm:h-16 rounded-lg cursor-pointer group touch-manipulation", style: { backgroundColor: color }, onClick: ()=>copyToClipboard(color, index), onMouseEnter: (e)=>{ setShowColorInfo(true); setSelectedColor(color); setTooltipPosition({ x: e.clientX, y: e.clientY }); }, onMouseLeave: ()=>setShowColorInfo(false), role: "button", "aria-label": `Color ${color}`, tabIndex: 0, onKeyPress: (e)=>{ if (e.key === "Enter" || e.key === " ") { copyToClipboard(color, index); } }, __source: { fileName: "", lineNumber: 557, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50 rounded-lg transition-opacity", __source: { fileName: "", lineNumber: 580, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-bold text-base", __source: { fileName: "", lineNumber: 581, columnNumber: 25 }, __self: this }, copied === index ? "Copied!" : color)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 rounded-lg p-4 sm:p-6", __source: { fileName: "", lineNumber: 590, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-4 text-base", __source: { fileName: "", lineNumber: 591, columnNumber: 17 }, __self: this }, "Recent Palettes"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 592, columnNumber: 17 }, __self: this }, colorHistory.map((palette, paletteIndex)=>/*#__PURE__*/ React.createElement("div", { key: paletteIndex, className: "flex h-12 sm:h-8 rounded-lg overflow-hidden cursor-pointer touch-manipulation", onClick: ()=>setColors(palette), __source: { fileName: "", lineNumber: 594, columnNumber: 21 }, __self: this }, palette.map((color, colorIndex)=>/*#__PURE__*/ React.createElement("div", { key: colorIndex, className: "flex-1", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 600, columnNumber: 25 }, __self: this })))))))))), showColorInfo && selectedColor && /*#__PURE__*/ React.createElement("div", { className: "fixed bg-white p-4 rounded-lg shadow-lg z-50", style: { left: tooltipPosition.x + 10, top: tooltipPosition.y + 10 }, __source: { fileName: "", lineNumber: 616, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 623, columnNumber: 11 }, __self: this }, selectedColor), (()=>{ const rgb = getRGBFromHex(selectedColor); const hsl = hexToHSL(selectedColor); const cmyk = getCMYKFromRGB(rgb); return /*#__PURE__*/ React.createElement("div", { className: "space-y-1 text-sm", __source: { fileName: "", lineNumber: 629, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 630, columnNumber: 17 }, __self: this }, "RGB: ", `${rgb.r}, ${rgb.g}, ${rgb.b}`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 631, columnNumber: 17 }, __self: this }, "HSL:", " ", `${Math.round(hsl.h)}°, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 635, columnNumber: 17 }, __self: this }, "CMYK: ", `${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%`)); })()), /*#__PURE__*/ React.createElement("footer", { className: "py-8 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 642, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 643, columnNumber: 7 }, __self: this }, ` [type='range']::-webkit-slider-thumb { background: black; } [type='range']::-webkit-slider-runnable-track { background: black; } `)); }