Color Palette Slider

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function ColorPaletteSlider() { const [hue, setHue] = useState(180); const [saturation, setSaturation] = useState(50); const [lightness, setLightness] = useState(50); const colorStyle = { backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`, }; const hexColor = () => { const hslToHex = (h: number, s: number, l: number) => { l /= 100; const a = s * Math.min(l, 1 - l) / 100; const f = (n: number) => { 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)}`; }; return hslToHex(hue, saturation, lightness); }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text).then(() => { alert('Color copied! 🎨'); }); }; return (

Color Palette Generator

HSL: {`hsl(${hue}, ${saturation}%, ${lightness}%)`}
HEX: {hexColor()}

Hue (0-360): {hue} setHue(Number(e.target.value))} style={{ width: '100%' }} />

Saturation (0-100%): {saturation}% setSaturation(Number(e.target.value))} style={{ width: '100%' }} />

Lightness (0-100%): {lightness}% setLightness(Number(e.target.value))} style={{ width: '100%' }} />

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Color Palette Slider

`, { headers: { "content-type": "text/html", }, }); }

colorPaletteSlider

Versions

v0