Having issues with color picker in Safari (for Mac): clicking on the blue area and then clicking on a color swatch from the default swatches doesn’t change the color for me, I have to click “show colors” and drag a new color from the palette on the input color area. I have Safari 15.4. (17613.1.17.1.13) on macOS 12.3.1., using a trackpad.
Since as a new user I get “Sorry, new users can not upload attachments”, here is a demo video of the issue I put on Youtube:
Related notebook:
Testing this further, having the same issue if I try the color picker on this page, for example, so doesn’t seem to be Observable-specific:
Having same issue when using Safari Technology Preview.
Can you give the picker in Color Picker Test / Fabian Iwand / Observable a try? After some interactions you should see the events input, change, focus and blur appear at the top.
(Edit) quick explanation why I think this might make a difference: This color picker is completely unaltered, which might affect how your Safari handles it. If this still doesn’t work, then the next step might be to test it outside of an iframe.
Of course it’s also worth checking the software (and especially system extensions) that you’re running on your Mac.
The notebook works for me on Safari Version 15.4 (17613.1.17.1.13).
Thanks! In that case this is most likely just some issue with my Safari installation. Will double-check if there are any plugins installed and see if Safari could be reinstalled somehow…
Thanks! Getting only focus/blur events. The same issue seems to happen on other web pages, too, so most likely something with my Safari setup.
Color pickers (everywhere on the web) are similarly broken for me, Safari v. 15.4 running on Mac OS 10.15.7. No browser extensions.
They are completely non-interactive as shown in the video above.
(Except apparently as a drag target; I hadn’t noticed that before. When a color is dragged in from the system color picker or whatever other app with draggable colors, the Safari color picker widget does change its color and emit input and change events.)
(Interestingly, color pickers in Firefox and Chrome do not function as drag targets.)
Weird and interesting, in that case I’m not the only one who has this issue. 
Let me know if you find a solution for it, I’ve tried googling and haven’t found anything. Also, other than the color picker (and occasional iCloud sync issues), my Safari is working without any problems.
Happens for me even with “Safari Technology Preview”. And I tried removing Safari preferences, too, but it didn’t help (or I didn’t find the right files).
What kind of device are using (MacBook, iMac etc)? Do you have an external display attached? If yes, does problem happen on all displays?
Happens to me with any ‘input type=“color”’ element on Safari, MacBook Pro (model MacBookPro15,2), on the native display (no external displays connected).
Oh another oddity. If I click the color input and then click ‘more colors’ in the popup, that hides the popup and brings out the system color panel window (which does not update the color input). If I then click the color input again, it brings up the color palette popup while the system color panel window is still visible, and this time choose a color from the palette popup, then the color input will be updated as expected.
Furthermore if I have the system color panel window is showing when I click the color input, I can click (one time) somewhere on the sliders in the system color panel and it will update the color input. However this click hides the palette popup and further interaction with the system color panel has no effect.
That’s true — the same happens for me! 
Did you find a solution to the problem @jrus? It is still happening for me. Creating a new Mac user and switching to it seems to help, so this is something specific to user settings. Perhaps some preferences or then permissions?
After hours of debugging, found a solution!
I removed these files under my ~/Library/Preferences:
.GlobalPreferences.plist
.GlobalPreferences_m.plist
Now color picker works again.