30:T6e6,function colorPicker(defaultValue, format) { // Set desired color format. format = format || tinycolor(defaultValue).getFormat(); // Build container element. const container = html`

${styles}

`; const picker = container.querySelector("#picker"); const label = container.querySelector("#label"); // Set color value. const setValue = colorStr => { // Create color object from string. const color = tinycolor(colorStr); // Hex doesn't support alpha (but will in CSS4), so force RGB if alpha is < 1. const actualFormat = tinycolor(color.toString(format)).getFormat(); const forceRGB = actualFormat === "hex" && color.getAlpha() < 1; // Create desired output color string and display it. const finalColorStr = color.toString(forceRGB ? "rgb" : format); label.innerHTML = finalColorStr; // Notify Observable about change in value. container.value = finalColorStr; container.dispatchEvent(new window.Event("input")); }; setValue(defaultValue); // Setup Pickr. const setupPickr = () => { new Pickr({ el: picker, default: tinycolor(defaultValue).toString("rgb"), onChange: c => setValue(c.toRGBA().toString()), comparison: false, components: { preview: false, opacity: true, hue: true } }); }; // For some reason, Pickr doesn't want to set the default color unless the element is mounted, // so we wait for it to mount here. const interval = setInterval(() => { if (document.body.contains(container)) { clearInterval(interval); setupPickr(); } }, 100); return container; }31:[] 2e:{"title":"Color Picker (with alpha)","cells":[{"id":0,"value":"md`# Color Picker (with alpha)\n\\`\\` doesn't support [alpha](https://github.com/w3c/html/issues/1422), so here's [Pickr](https://github.com/Simonwep/pickr) trimmed down for Observable.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`\n\\`\\`\\`js\nimport {colorPicker} from \"@shaunlebron/color-picker\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"viewof nameExample = colorPicker(\"steelblue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"viewof hexExample = colorPicker(\"#eee\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"viewof rgbExample = colorPicker(\"rgb(219, 44, 44)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"viewof rgbaExample = colorPicker(\"rgba(64, 161, 0, 0.77)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"viewof hslExample = colorPicker(\"hsl(220, 53%, 43%)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"viewof hsvaExample = colorPicker(\"hsva(240, 69%, 66%, 0.4)\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"md`## Formatting\n- Color string is formatted according to the initial value (first arg).\n- Optionally pass an explicit [TinyColor format string](https://github.com/bgrins/TinyColor#tostring) as second arg.\n - e.g. \\`\"hex\", \"rgb\", \"hsl\", \"hsv\", \"name\"\\`\n\n## Known issues\n- Pickr seems to be lossy\n - i.e. moving the knobs to original position may not return original value\n- Pickr modal is occluded by expanded cells.\n- Trying to adjust Pickr modal size (width,height,padding) throws off the knob positions, so we're stuck with the default.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}