Color spaces

[jamesnw]

Description

Adds oklab, p3, lab, lch, srgb and hex color spaces. hex is not a color space, but rather a format of the srgb space, so it added a bit of complexity sprinkled throughout. It may be better to centralize that logic (it's simple logic, just slight variations in multiple places).

Steps to test/reproduce

Use the color format selector to check the different spaces.

Show me

The list of Additional Formats is now a bit long and takes up a lot of real estate- we may want to think if there's a better way to show that.

[netlify[bot]]

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	baecd41990dff42e2fc10a50073132ae10c3b3bb
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/64b5b1d4bd5b0400086ca21c
😎 Deploy Preview	https://deploy-preview-83--oddcontrast.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stacyk]

@jamesnw @SondraE @jgerigmeyer I made the input and results values grow/shrink depending on their container size (yay for container queries!). it isn't perfect, so the p3 values get really long so the text will overflow a bit right near the breakpoints, but I didn't want to shrink the text size any further. We can look into telling the layout to not go to two columns (making the text columns smaller even though the screen is wider) until a bit later as it gets wider. I can make a new card for thinking about that.

Also, for now, I only scaled the "Additional Formats" text with the input text size but I am only allowing the input size to grow the largest at wide enough sizes.

Once we add it any additional features like the click to copy icons, then we can take a look at the design of the additional formats layout. I think it is OK as is for now although I do think it is a bit "boring". If we want to break it up a bit, maybe we can bring back the color format labels, even though they are all in the color value except for Hex. Design wise, it creates a little breathing room if that is our goal. Also, we may want to think about lining the values up (like a table) so if there is a warning on one side, it will still line up with the other (if there are two columns).

Here were some of our early concept additional formats list with labels:

[stacyk]

@mirisuzanne I added some container queries so I'd love it if you could review this code at your convenience.

[stacyk]

Add additional color spaces.

[jamesnw]

It may be better to centralize that logic (it's simple logic, just slight variations in multiple places).

@jamesnw I did a minor refactor along these lines in https://github.com/oddbird/oddcontrast/pull/83/files/91aebc6169b29bc15e9e7aa0d43cfbe34319686a..a09db8cb14352cb459e544f669477ff4a329dcd5 -- as well as proposing a distinction between a "space" and a "format". Take a look and let me know what you think.

@jgerigmeyer I think that makes sense. I was going back and forth on how to handle the space/format distinction, but I think this keeps them distinct in a way that will be helpful going forward. Thanks!

[stacyk]

A few random questions:

1. Is there a reason for the ordering in the drop down and on the page for additional formats?
2. Even though it is the sRGB space, I feel like I'd expect to see RGB in that drop down if I were to use this tool as a designer.

[jgerigmeyer]

1. Is there a reason for the ordering in the drop down and on the page for additional formats?

Not that I'm aware of -- feel free to suggest an order?

2. Even though it is the sRGB space, I feel like I'd expect to see RGB in that drop down if I were to use this tool as a designer.

¯\_(ツ)_/¯ I'm fine either way

[stacyk]

1. Is there a reason for the ordering in the drop down and on the page for additional formats?

Not that I'm aware of -- feel free to suggest an order?

@jamesnw @jgerigmeyer Maybe Alpha is the easiest to defend/get right without debating popularity or maybe age. I know that P3 is in a color notation and it is display-P3 but for this purpose, I think can be listed as just P3 in this list: Hex HSL Lab LCH Oklab Oklch P3 RGB

[stacyk]

@stacyk LGTM!

I think it is OK as is for now although I do think it is a bit "boring". If we want to break it up a > bit, maybe we can bring back the color format labels, even though they are all in the color value except for Hex.

Would it be difficult to make the name of the color bold where it appears within the color value? For example, in this one the "hsl" would appear in bold and the rest in regular weight. hsl(47.675 100% 14.808% / 0.639) That might make that section a little less "boring" as well as easier to skim. If that's hard, though, I think it's good as it.

@SondraE I don't think we'd want that (nor is it probably easily done) because the color formats like Hex isn't shown in the name and P3's color notation starts with color(display-p3 ## ## ##) so the first part of that line wouldn't be highlighted and I think that would look odd when viewing the block as a whole.

[jgerigmeyer]

Maybe Alpha is the easiest to defend/get right without debating popularity or maybe age.

Done in https://github.com/oddbird/oddcontrast/commit/72939026926c449551cdee811971282d7358df1f

Even though it is the sRGB space, I feel like I'd expect to see RGB in that drop down if I were to use this tool as a designer.

After thinking about this more, I'd lean toward leaving it as-is. We're currently not doing anything to control how the color formats are displayed -- we allow colorjs.io to determine that.

[jgerigmeyer]

the "This color is out of gamut" warning could be more clear

@mirisuzanne Adjusted in https://github.com/oddbird/oddcontrast/pull/83/commits/baecd41990dff42e2fc10a50073132ae10c3b3bb. Hex shows "outside the sRGB gamut" since it's a sub-format of sRGB -- is that okay?

[mirisuzanne]

@jgerigmeyer Yeah, that's great. Technically, hsl is also a sub-format of the sRGB gamut. So it could also say that too - but not sure if it's important either way.