w3c / w3c/csswg-drafts

[css-color-5][mediaqueries-5] add <kelvin()> color-function and a means for exempting from global color filters

Open
#6,582 20 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-color-6 mediaqueries-5
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Description

Note:

This Issue covers two related feature proposals applying to two separate specification drafts. It may be preferable to split this into two separate Issues with links between them instead.

<kelvin()> color-function

Presently, the css-color-4 draft provides the color-function options <rgb()>, <rgba()>, <hsl()>, <hsla()>, <hwb()>, <lab()>, <lch()>, and <color()>. However, consumer lighting devices are increasingly marketed with the color specified in terms of the Kelvin temperature ("CCT") of a black-body radiator emitting that color of visible light. Kelvin temperature is a single scalar value, and the path of this value, the Planckian locus, can be mapped onto various color spaces using well-known formulas.

Software such as f.lux, redshift, and red-moon already provides (usually global) color filters for consumer video display devices.

A web designer or software developer may wish to assign a CCT color, but presently they would need to make use of an external algorithm to translate it into a value accepted by one of the existing CSS color-function options.

Note: while negative Kelvin temperatures do not physically exist, a negative color value passed to <kelvin()> could, for example, provide the inverse of the color provided by the same positive value, which could be useful for counteracting inherited color filters.


EDIT:

Because of the feasibility issues of implementing the second half of this Issue as a media feature, I’m reframing it in slightly different terms.

@uses-color-filter media-feature

For certain purposes, however, such as cinematic color grading, an end user may need certain visual elements to follow a defined color specification. Additionally, web designers and software developers may wish to offer color filters when a color filter is not already present.

In order to allow web designers and software developers to counteract an otherwise globally enabled color filter for certain visual elements or to offer local color filters in the absence of a globally enabled one, CSS could provide a media-feature with the <color> and <mix-blend-mode> values of any filters applied by the renderer or the system. This media-feature could be named something like @uses-color-filter.

There does not appear to be anything on this topic in the mediaqueries-5 draft, so I am basing this idea on the existing @prefers-color-scheme feature, thought it could also be analogous to the existing @color-gamut and @inverted-colors media features.

Provide a means for colors to request exemption from system color filters

For certain purposes, such as cinematic color grading, an end user may need certain visual elements to follow a defined color specification. Additionally, web designers and software developers may wish to offer color filters when a color filter is not already present.

From @smilebags’ comment below:

One other concern I can see (I'm not sure whether this is either a non-issue or has already been solved, so I'm interested to find out) is that CCT is an absolute colour description. In sRGB, 6500 kelvin is essentially [1,1,1], but in another colour space (one with a white-point of D50, for example), the same 6500 kelvin has now changed 'colour', it would now be represented as something more blue than [1,1,1]. This might not be an issue if we always assume browsers are displaying colours with a D65 white point, but that might not be ideal. Again, I don't know enough about the existing and planned specs to know if this is actually an issue, so keen to hear what others think.

Therefore, the <color> specification could provide a means for requesting that the renderer use a neutral or absolute colorspace for a given specified color. As an example (from my comment below):

If the <kelvin()> function is specified as an accessibility aid, the specification might treat it differently than other <color> values. In so doing, browsers might treat <kelvin>() colors as absolute and counteract any operating-system-level white-point filter, though <color> values being specified as absolute vs dependent on operating-system-level white-point filters is probably a separate issue.

(Note that while I specifically focus on the <kelvin()> function, there might be design reasons for other colors to request exemption, and there might be design reasons for <kelvin()> colors to prefer inclusion rather than exemption.)

Basically, it should be an accessibility preference at the browser or system level whether websites or individual colors can specify an absolute white point and override any accessibility filters in place. This could help in the use cases of, e.g., cinematic color grading or professional photo editing, where certain color elements generally need to be calibrated as “accurate”, while other color elements (e.g. parts of the interface) generally don’t.

I’m not familiar enough with the CSS <color> specification to know to what extent it currently manages color spaces, so I can’t really propose a specific approach to addressing this particular functional issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the css-color-4 color-function draft and the mediaqueries-5 draft sections linked in the issue, then review the 20-comment discussion. Clarify whether this should be split and whether the proposals for kelvin() and exemption from system color filters are feasible. Done means the CSS Working Group has a specific, agreed specification direction.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.