Color Palette Slider

Color Palette Generator

\n \n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\n \n

\n\n \n View Source\n \n

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

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/Surendra/colorPaletteSlider/code/main.tsx","extension","actionData","errors"]