Clicking on a single color in the palette should copy the hsl value

[Deep-Codes]

Feature request

Overview

1st of all amazing color system

Would be really great if I am able to copy HSL values of color palettes.

On the index page

Copy function is there in this page

But it copies the entire object which is cool in that use case.

Examples in other libraries or sites

Vercel Design System has this taping on var(--color-code) copies it.

Who does this impact? Who is this for?

Developers/Designers who want to quickly copy and try it out.

[akshitarora921]

@Deep-Codes Can I work on this?

[peduarte]

Ah, this has actually been fixed already.

[akshitarora921]

@peduarte It copies the entire row colors not that clicked color

[peduarte]

Ah yeah, sorry, I got confused with another issue 😮‍💨

So what is being proposed here? That each individual color can be clickable, and if so, the HSL value is copied to the clipboard?

[akshitarora921]

yes, No problem :)

[Deep-Codes]

Ah yeah, sorry, I got confused with another issue 😮‍💨

So what is being proposed here? That each individual color can be clickable, and if so, the HSL value is copied to the clipboard?

I am in love with Radix Colors

many times I don't need the entire palette I just handful of them.

an example from Vercel's Geist

[peduarte]

I see, but which value should it copy?

The radix colors were designed to be used together, as a scale, so I think we'd like to guide users towards that, and not single colors.

As you know, the scale can be copied in various formats. If we allow a single color to be copied, I think we should also offer all formats, instead of picking one (like hsla).

Have you thought about the UI for this?

[tanishqkancharla]

+1 for this feature. Have had to go into dev tools to copy the background color many times.

I disagree with not being able to copy individual colors. I understand they're meant to be used together, and it's pretty clear from the website that they are. Often times, you don't need all 12 colors though, if, for example, I want a basic foreground and background color for prototyping.

I think hexcode is fine for copying...if its really a problem, then right click can open a context menu "copy as rgb, copy as hex, copy as hsla".

For interaction, I think left click can copy rgb, with a temporary toast/popover shown under the box. I'm not sure if there's a radix component for this. The closest seems to be popover: https://www.radix-ui.com/docs/primitives/components/popover except that this toast will go away after a short delay (1-2s).

If supporting multiple color formats is important, then the right click context menu can be implemented instead or in addition.

[vladmoroz]

This is now available from color palette dialogs