search

juxtopposed / realtimecolors

Real-time UI Colorpicking Tool. See your favorite colors of choice for a website in real time.
https://realtimecolors.com
Other
778 stars 30 forks source link

Allow Modern CSS Colors #37

Open Jothsa opened 1 year ago

Jothsa commented 1 year ago

Is your feature request related to a problem? Please describe. Hey, I really like this tool. I would love to see support for display p3 colors. Currently, all the color import and export options are using old css color functions that are limited to the srgb color space. I make sure to use oklch in my projects and would love if developers would stop limiting themselves to srgb. Most browsers support display p3 colors in css.

Describe the solution you'd like I would like to be able to input and export in a modern css format that uses the display p3 color space. I would prefer at least oklch.

Describe alternatives you've considered Alternatives are other color functions such as oklab or just not doing anything.

Additional context I recommend trying oklch out for yourself. It's a lot easier to visualize all the missing colors than for me to explain them. I recommend this article from google if you are interested in learning more. Thanks!

VasilVerdouw commented 1 year ago

Hey @Jothsa do you maybe know what happens if a browser doesn't support the color format? I'm guessing it won't just automatically fall back?

Jothsa commented 1 year ago

If the browser doesn't support oklch or whatever the color format is, it will ignore the declaration. If the color in oklch is out of range of the user's display and the browser supports the color format, the color will be converted to the device's display. Thankfully, it's pretty easy to add backwards compatibility by converting the color to srgb and adding a declaration in an older color format before the newer color format. I recommend the library colorjs.io to convert the colors because it is written by the people who wrote the css spec.

juxtopposed commented 1 year ago

I do plan to implement this feature. Makes a lot of sense for it to be available. stay tuned :)