search

LeaVerou / css.land

Hands on CSS demos
https://css.land
MIT License
225 stars 17 forks source link

Add sRGB hex string output #16

Open notsidney opened 2 years ago

notsidney commented 2 years ago

I’ve been using this color picker since I read your article on LCH coming to CSS. This tool has helped me in my projects, but I often find myself converting it to hex format when I need to support older browsers or paste the color into a design tool like Sketch. I added a simple hex output based on the sRGB output.

LeaVerou commented 2 years ago

Hey there, thanks for contributing! I think it would be better to be able to switch the sRGB color to hex instead of rgb() than display sRGB colors in two different ways. Any chance you might be interested to work on that?

notsidney commented 2 years ago

I think it would be better to be able to switch the sRGB color to hex instead of rgb() than display sRGB colors in two different ways.

Yes, this is a better solution, I’d be happy to work on it. I’m thinking of adding radio buttons under the sRGB output to switch between formats, similar to this:

image

Also, do you think it’s worth it to display in the old rgba(0, 0, 0, 0.5) syntax?

LeaVerou commented 2 years ago

I think a radio button is a little too prominent, maybe a select menu?

image image

Or maybe aligned right would be better so that it's not cluttered there.

notsidney commented 2 years ago

I finally got around to working on this! I added the select dropdown to the right end of the label above the sRGB field. It could also be expanded in the future to work with more formats.

josephholsten commented 2 years ago

@LeaVerou Any remaining concerns? This looks like what I want (but also, LAB output). I definitely don't grok internals, so I can't vouch for correctness.