Explore modern colour spaces for providing "punchier" colours - Githubissues

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.

https://www.gov.uk/design-system

MIT License

476 stars 226 forks source link

Explore modern colour spaces for providing "punchier" colours #3849

Open trang-erskine opened 1 month ago

trang-erskine commented 1 month ago

What

Experiment with modern colour spaces (display-p3, oklch) for the implementation of colours that look brighter.

Why

By showing the technical capabilities of modern browsers, we can make choices about colours that have a strong impact but do not look 'neon'. For that we'll need to understand:

What impact using modern colour syntaxes has on our code
Where these new colours could be used
What support these colours have in practice (both browser, but also hardware)

Who needs to work on this

Developers, Designers

Who needs to review this

Developers, Designers

Done when

[ ] We have a demo implementing colours in modern colour spaces where we can review what they bring and the hurdles we'd face
[ ] We have documented support for these new colour spaces to help decision making

romaricpascal commented 1 month ago

Some resources that could be useful:

(and the different links in these two).

The color-gamut CSS media feature may also be interesting in exploring how to switch to modern colours when supported. Combined with CSS custom properties, this could potentially limit the complexity on our Sass code: instead of mixins that output two properties for each colour (one sRGB, one modern), we could use the media feature to swap the values of custom properties from sRGB colours to modern ones.