{"id":503,"date":"2024-01-18T10:25:43","date_gmt":"2024-01-18T16:25:43","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=503"},"modified":"2024-11-14T15:46:12","modified_gmt":"2024-11-14T20:46:12","slug":"the-color-input-the-color-picker","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-color-input-the-color-picker\/","title":{"rendered":"The Color Input & The Color Picker"},"content":{"rendered":"\n

HTML has a color input<\/a> that is pretty decent:<\/p>\n\n\n

<input<\/span> type<\/span>=\"color\"<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
\n
\"\"
macOS Chrome (has it’s own UI)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
macOS Firefox (uses the macOS system color picker)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
macOS Safari (has it’s own UI, allows you to open macOS system color picker)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"
Windows Chrome (has it’s own UI) (Edge looks the same)<\/figcaption><\/figure>\n\n\n\n
<\/p>\n<\/div>\n\n\n\n
\n
\"\"
Window Firefox (uses the Windows system color picker)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
\n
\"\"
Chrome on Android (Pixel 8)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Safari on iOS 17<\/figcaption><\/figure>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
Ultimately: the user activates the input, may choose a color using the provided UI, and the color becomes the inputs value.<\/p>\n\n\n\n
It’s not my favorite that you can only<\/em> get 6-digit HEX colors in and out of it, like #F06D06<\/code> and the like. No transparency, no other formats. I have a feeling display-p3 color formats like OKLCH will have a real popularity boom in coming years (because they are sweet: more colors, more logical) and we’ll start wanting better integration, like with color inputs.<\/p>\n\n\n\n
The Eyedropper<\/h2>\n\n\n\n
Note that some<\/em> of those color panels have an eyedropper function. Those are awfully handy. Sometimes the color I’m shooting for is right on my screen somewhere, and a color eyedropper is the fastest and easiest way to grab it. <\/p>\n\n\n\n
Turns out there is a native API for an eyedropper<\/a>! You don’t have<\/em> to use a color input to access an eyedropper. <\/p>\n\n\n\n
You can test for support like:<\/p>\n\n\n
if<\/span> (\"EyeDropper\"<\/span> in<\/span> window<\/span>) {\n  \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
And use it like:<\/p>\n\n\n
\/\/ used in case you need to cancel the experience<\/span>\nconst<\/span> abortController = new<\/span> AbortController();\n\nconst<\/span> eyeDropper = new<\/span> EyeDropper();\n\ntry<\/span> {\n  const<\/span> result = await<\/span> eyeDropper.open({ signal<\/span>: abortController.signal });\n  console<\/span>.log(result.sRGBHex);\n} catch<\/span> (e) {\n  console<\/span>.error(e);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Demo<\/h2>\n\n\n\n
That’s it. Support across the board<\/a>. However, browsers can and do have different approaches to what happens when the input is used. <\/p>\n\n\n\n