- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Fri, 31 Jul 2020 16:57:59 +0000
- To: public-houdini-archive@w3.org
The CSS Working Group just discussed `Color Conversion and Contrast Ratio`. <details><summary>The full IRC log of that discussion</summary> <fantasai> Topic: Color Conversion and Contrast Ratio<br> <astearns> github: https://github.com/w3c/css-houdini-drafts/issues/989<br> <leaverou> CSS Color 4 sample code: https://drafts.csswg.org/css-color-4/conversions.js and https://drafts.csswg.org/css-color-4/utilities.js<br> <fantasai> Rossen___: This issue motivated by TAG review about addition of lch and lab color spaces<br> <fantasai> Rossen___: One concern being discussed being discussed with TAG was that we were getting more variety of color across platform<br> <fantasai> Rossen___: but capabilities of simple things like contrasting two colors is very difficult<br> <fantasai> Rossen___: One of the ideas was, hey, if we have a strongly defined type of color that we can use across platform<br> <fantasai> Rossen___: then we could look at exposing variety of functions either on or around object<br> <fantasai> Rossen___: and achieve objectives like a11y and other things<br> <fantasai> Rossen___: Seemed like TypedOM is good place to start<br> <fantasai> Rossen___: Color is a type we need to define strongly<br> <fantasai> Rossen___: Luckily Lea and Chris jumped in, had been thinking about it<br> <fantasai> ?: ??<br> <fantasai> chris_: in color 4 there was an appendix written in JS by which I mean Pascal<br> <fantasai> chris_: It's simple, does work, set of simple functions<br> <fantasai> chris_: Also have utilities.js<br> <fantasai> chris_: includes a contrast function<br> <fantasai> chris_: Here's an sRGB_to_LCH<br> <fantasai> chris_: it does it all in the right order<br> <fantasai> chris_: It was useful for examples<br> <fantasai> chris_: and useful for color 5<br> <fantasai> chris_: but this is not a proposal for a color model<br> <fantasai> chris_: not object oriented<br> <fantasai> chris_: it's just something that wroks<br> <fantasai> chris_: Here's color.js<br> <fantasai> chris_: Until this morning was a private repo, now public<br> <leaverou> https://colorjs.io/<br> <fantasai> chris_: also not a proposal, but it's object oriented<br> <fantasai> chris_: This is a JS API, you can use it in the browser or on the server<br> <fantasai> chris_: These examples are all live, you can edit directly in the web page if you want<br> <fantasai> chris_: variety of color models, includes all in color 4 (except device-cmyk()) as well as a few more<br> <fantasai> leaverou demos<br> <fantasai> chris_: Notice these are in different color spaces<br> <fantasai> chris_: Internally it goes into CIEXYZ, and then ??, and then gets you a contrast<br> <fantasai> chris_: You just say you want contrast between two colors, and it just works out for you<br> <fantasai> chris_: You can change lightness or chroma or whatever<br> <fantasai> chris_: similar to things we do in Color 5<br> <fantasai> chris_: Convert between color spaces<br> <fantasai> chris_: interpolate between colors<br> <fantasai> chris_: either discreet steps, or gradients, or that sort of thing<br> <fantasai> chris_ reviews documentation<br> <fantasai> chris_: Color object. Can give a CSS string or use initializer with coordinates<br> <fantasai> leaverou: color space ID plus coordinates plus optional alpha<br> <fantasai> leaverou: or another color<br> <fantasai> s/color/Color/<br> <fantasai> chris_: This is similar to color-5, adjusting named coordinates<br> <fantasai> chris_: We've actually supported more than Color 4 supports<br> <fantasai> chris_: might be interesting to see if any would be useful as future additions<br> <fantasai> chris_ notes there's bugs, especially in the documentation, since this is pre-release<br> <fantasai> chris_: You can change color coordinates. Don't even have to change coordinates of the color space you're in<br> <fantasai> chris_: That's fairly useful<br> <fantasai> chris_: We also do gamut-mapping<br> <fantasai> chris_: because easy to get colors that are out of gamut<br> <fantasai> chris_: we've worked on that quite a bit, have an algo that works rather well<br> <fantasai> chris_: Do a binary search to find closest color via chroma reduction<br> <fantasai> chris_: and do speculative ???<br> <fantasai> chris_: 1st one we reduce chroma until it's inside the range<br> <fantasai> chris_: 2nd one, at each stage, we see if we clipped here, would we be close?<br> <fantasai> chris_: and that works much better<br> <astearns> s/???/clipping/<br> <fantasai> chris_: thinking to spec that in color-4 spec<br> <fantasai> chris_: Interpolation<br> <fantasai> chris_: range function allows that and getting intermediate stops<br> <Rossen___> q<br> <Rossen___> q+<br> <fantasai> leaverou: range function actually returns a function<br> <fantasai> leaverou: we can specify which space to do interpolation in<br> <fantasai> leaverou: you can see here examples of what each interpolation space produces<br> <fantasai> leaverou: we also implemented longer/shorter/increasing/decreasing args for the hue we were discussing<br> <fantasai> leaverou: although didn't implement dbaron's ? yet<br> <fantasai> chris_: Lets us implement and check and see if it works. Very helpful in writing spec<br> <fantasai> chris_: Also discussing keeping ? constant<br> <fantasai> leaverou: but we do keep Nan for chroma<br> <fantasai> s/keeping ?/using Nan for keeping coord/<br> <fantasai> chris_: It's on GH and there's a link, and also a bunch of tests<br> <fantasai> chris_: any questions at this stage?<br> <astearns> ack Rossen___<br> <fantasai> Rossen___: First of all, this is awesome, thanks for sharing<br> <fantasai> Rossen___: Looking forward to playing with the project<br> <fantasai> Rossen___: that's exactly what I was hoping to see<br> <fantasai> Rossen___: and you made this fantastic<br> <fantasai> Rossen___: Wrt functions like color-mix() etc.<br> <fremy> big +1 this is super great!<br> <fantasai> Rossen___: let's say we start going towards adopting such a type in TypedOM, where does that leave us?<br> <AmeliaBR> q+<br> <fantasai> chris_: You'll have 2 ways to do it: declarative in color-5, and imperative way like this<br> <fantasai> chris_: imperative can have more functionality<br> <fantasai> chris_: I don't think it's a problem that we have both declarative and imperative<br> <fantasai> leaverou: ?<br> <fantasai> leaverou: haven't done adjusters yet<br> <fantasai> leaverou: accepts a color space as well, but not adjusters<br> <fantasai> chris_: As general goal, would like to implement all of color-5 so we can test, and do example, see how that works<br> <fantasai> chris_: Another thing ppl might have noticed, there's a few more color spaces here not in color 4<br> <fantasai> chris_: support high dynamic range coors<br> <fantasai> chris_: there's a secret spec called css-color-hdr<br> <fantasai> chris_: there was an issue around high dynamic range<br> <fantasai> chris_: I said we won't do it, because too unstable<br> <fantasai> chris_: but I did spec an extension to color-4<br> <fantasai> chris_: and wanted to see that it works and coded it up<br> <fantasai> chris_: I presented to ??? and got good feedback, currently incorporating that<br> <fantasai> chris_: will present to the WG later<br> <astearns> s/???/ICC/<br> <fantasai> chris_: in the meantime, i'm incubating it in code to see whether it's feasible<br> <astearns> ack AmeliaBR<br> <florian> https://drafts.csswg.org/css-color-hdr/<br> <leaverou> https://drafts.csswg.org/css-color-hdr/<br> <fantasai> AmeliaBR: Great library, very useful. Some similar things, but this is a nice APi with good features<br> <fantasai> AmeliaBR: Wrt what we should adopt into the actual Web platform<br> <fantasai> AmeliaBR: I do like the idea of having general color utilities object<br> <fantasai> AmeliaBR: That you can call without having to getComputeStyle<br> <fantasai> AmeliaBR: coordnate with TypedOM also good<br> <fantasai> AmeliaBR: so you can construct CSS color type or get it from a style rule or a computed style<br> <fantasai> AmeliaBR: that would be great design<br> <fantasai> AmeliaBR: Probably don't want quite as many features as we have in this library<br> <fantasai> AmeliaBR: Might want to integrate a bit more e.g. generated gradients<br> <fantasai> AmeliaBR: and easing function would be its own object, to use more generally than just color<br> <fantasai> AmeliaBR: Interpolator for data vis<br> <fantasai> AmeliaBR: would be a great feature, use native interpolation that CSS already knows how to do<br> <fantasai> AmeliaBR: with additional smarts like interpolating in different color spaces<br> <fantasai> AmeliaBR: also useful to have<br> <fantasai> astearns: Anything else besides showing new cool code?<br> <fantasai> Rossen___: How do you see this moving forward?<br> <fantasai> chris_: Requirements, one of them for web platform API<br> <fantasai> chris_: what features do we want, what would be nice, what would be layered on top<br> <fantasai> chris_: Rossen asked about contrast, that's important<br> <fantasai> chris_: Converting between color spaces without having to understand how it does<br> <fantasai> chris_: not knowing about white points, not having to figure that out, that's important<br> <fantasai> leaverou: There should also be way to access color before / after gamut mapping because ???<br> <fantasai> AmeliaBR: Especially important for finding contrast ratio<br> <fantasai> AmeliaBR: if colors are theoretically good contrast, but not on user's screen, need to reflect that<br> <fantasai> florian: So is the plan to subset your project into TypedOM? and then build your project on top of that result?<br> <fantasai> chris_: would be reasonable<br> <fantasai> astearns: If you can't build on top of the subset, then we chose the wrong subset<br> <fantasai> Rossen___: That was part of my hope<br> <fantasai> Rossen___: exactly why I was provoking this type of discussion and exposure in typed OM space<br> <fantasai> Rossen___: Anything else left on color that you didn't cover?<br> <AmeliaBR> s/ ???/ that affects the results/<br> <fantasai> leaverou: ICC profiles<br> <fantasai> leaverou: in theory, TypedOM should cover that as well<br> <fantasai> leaverou: but wouldn't that make it asynchronous?<br> <fantasai> TabAtkins: We already have a few things that need external resources, don't have a great way to handle that<br> <fantasai> TabAtkins: but nothing else needs to be infected, just wait for them via Promise<br> <fantasai> chris_: Mentioned that we have a lot of stuff. Because we wanted to test things against each other<br> <fantasai> chris_: e.g. deltaE, implemented 5 different variants<br> <fantasai> chris_: wanted to compare visual result, perf<br> <fantasai> faceless2: ...<br> <fantasai> florian: Feels like what we need is the various objects and methods to let you get from one to the other, and create mixes<br> <fantasai> florian: don't necessarily need all the operations to get from one color to another color<br> <fantasai> florian: maybe need ? and ?, but methods to get between them, but TypedOM doesn't need<br> <fantasai> chris_: Do need an intermediate way to go between colors<br> <fantasai> chris_: you use colors together, not in isolation<br> <Rossen___> q?<br> <fantasai> AmeliaBR: Base case would be converting single color into other color spaces<br> <fantasai> AmeliaBR: so you can convert two colors into the same color space in order to compare or calculate<br> <fantasai> AmeliaBR: Devs can implement the formulas that use whatever paramterization of colors that they need<br> <fantasai> chris_: yep<br> <fantasai> Rossen___: I agree<br> <fantasai> Rossen___: that was initial motivation here, exposing the type that will allow you to at least hoist the color space and its values<br> <fantasai> Rossen___: having this type, you can start adding libraries around it that do a bunch of math<br> <fantasai> Rossen___: as we go forward, can identify which math goes into native platform and which stays as library<br> <fantasai> Rossen___: but not having basic type is a blocker<br> <fantasai> Rossen___: My hope and ask for you, is to start defining what this type should look like<br> <fantasai> Rossen___: what is minimum set of parameters and stuff<br> <fantasai> Rossen___: I see Tab and fremy still editing TypedOM, so work with them to move it forward<br> <astearns> ack fantasai<br> <fantasai> fantasai: I want to note that Typed OM has also not been published since 2018.<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/989#issuecomment-667228353 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 31 July 2020 16:58:01 UTC