Switch from Chromium's color picker to a custom one in order to allow copying pasting values

Forenote: I picked Feature requests instead of Bug reports due to the issue not being caused by Obsidian directly.

Steps to reproduce

Interact with any color picker inside Obsidian and try to copy or paste the HEX or any numerical value.

Did you follow the troubleshooting guide? [Y]

Yes but they are not relevant as this is a Chromium problem and will always be there.

Expected result

To be able to copy or paste values into color input fields just like any other input field.

Above would be my request but since that is not possible, a more appropriate “expected result” would be:
To replace the default color picker with a better one and provide it for plugins as well.
Some plugins (such as Kanban) are likely aware of this issue any they seem to have deployed their own color picker as a solution similiar to one I am recommending.

Actual result

Copying fails, nothing is transferred into the clipboard.
Pasting fails, either nothing is pasted or selected string is deleted.

Environment

Environment info is not relevant to the report as this is a Chromium problem.


Additional information

This issue has been known since at least 2020, meaning it is 4 years old. We can safely assume it is unlikely to be solved anytime soon.

This issue impacts all color pickers inside Obsidian such as the accent color picker, canvas card color picker as well as the plugins that use the Obsidian provided color picker such as Iconize.

This problem has caused many people frusturation and still keeps doing so. You can see this from these forum posts:


I would really appreciate it if Obsidian team could snuck this into a patch or at least decide to work on it :slight_smile:

7 Likes

Thank you for creating this; Obsidian’s current colour picker is quite annoying. Who prefers typing in 3 different values instead of just pasting a hex code…

2 Likes

2020 called, they want their broken color picker back. Time to join the modern world, Obsidian!

1 Like

Please, this is awful. A terrible color picker when there’re so many better options. I just want the start value to be hex and to be able to copy/paste

Not being able to paste values in the color picker is quite annoying. There is no way either to store favorite colors or pick them from a pallet.

With some help of Perplexity.ai, I listed the requirements for the (IMO of course) ideal color picker:

:white_check_mark: Functional Requirements for a JavaScript Color Picker

1. Color Input and Display

  • The color picker component must allow users to input a color value using any of the following color models: HEX, RGB, or HSL .
  • The component must display the currently selected color as a color swatch, updating dynamically as the color changes.

2. Color Selection Mechanisms

  • The component must provide a visual color picker interface that allows users to select a color from a continuous color spectrum (color gradient map).
  • The component must include input fields for direct entry of HEX, RGB, and HSL color values, with real-time conversion and synchronization between these formats.
  • The component must provide a predefined color palette, presenting a set of selectable color swatches.

3. Color Palette and Favorites

  • The component must allow users to select a color from a predefined palette of colors, displayed as clickable swatches.
  • The component must provide a mechanism for users to pin or save selected colors as favorites, making them easily accessible for future selections.
  • Pinned (favorite) colors must be visually distinguished and persist for the duration of the user session (optionally, persist between sessions using local storage.

4. User Interface, Accessibility and Usability

  • The color picker must support switching between color models (HEX, RGB, HSL) within the interface, updating all representations accordingly.
  • The component must be responsive and accessible, ensuring usability across different device sizes and for users with assistive technologies.
  • The component must provide clear feedback on invalid color input, preventing selection of unsupported color values.

5. Integration and Extensibility

  • The color picker must expose an API or event handlers to notify the parent application of color changes, including when a color is pinned or unpinned.
  • The component should be easily embeddable within web forms and compatible with modern JavaScript frameworks.

A nice implementation I found is GitHub - ovelilla/color-picker-vanilla-js-responsive-canvas-hex-rgb-hsl: Color picker vanilla JavaScript Responsive using canvas, accepts hex, rgb, rgba, hsl, hsla.

:star_struck: For a demo colour picker, see https://fluffy-mousse-cb5bb5.netlify.app/.

Thanks for taking this into consideration! I love Obsidian, this would offer a nice QoL improvement.