Generate P3 Color Variations from RGB Hex Values

Taking colors to the next (CSS) level using a wider gamut color space is now supported by major browsers.

Can I use display-p3 CSS color() functions?

Yes, you can! There is support for the CSS color() function at least for the predefined display-p3 color profile, a superset of the classic RGB color space.

How to use P3 wide gamut colors in CSS?

How can we use the new colors? We don't need @supports feature queries. We can prepend a fallback color declaration.

.fallback-example {
  color: #012345;
  color: color(display-p3 0.39 0.39 0.39);

Browsers that do not support display-p3 or the color() function will fall back to the first declaration. Those who do will use the second one.

But how to see how these colors really look like?

We can use the extended color picker in our browsers' dev tools to preview and verify if we see any visual differences when changing color points on the right of the dividing line.

If your browser and your monitor both support wide gamut color, the red tones in the screenshot above should differ.

Blind designers and deaf composers

But even if we don't see any difference on our screens, we can still use those colors, much like a designer with deuteranopia (red-green color vision deficiency) would design a colorful website or like Beethoven composed music while suffering from severe hearing deficiencies.

Practical fallback/variation generator

Assuming we have a small color palette in our design system, we could possibly generate all values manually. But as devs, we can write (or reuse) a script to convert an existing RGB color definition to a corresponding wide gamut color. A simple 1:1 conversion will be off into the more neon spectrum part and to make things more complicated, the dividing line is not linear at all.

Intended color shift

But simple maths will be a good start and the shift towards neon brightness is exactly what we want. The shift toward the p3 spectrum might be formally incorrect, but it might go into the right direction in our specific use case. What's the point of converting RGB to p3 if we don't want to alter the original color?

Based on a conversion script featured in David Darnes' tutorial, I made a codepen to copy and paste existing CSS snippets.

CodePen "https://codepen.io/openmindculture/pen/RwvrrXW":

This simple tool can parse simple CSS declarations and custom property variable assignments using 6-digit RGB hex notation values starting with a hash sign. Assignments will be recognized when the line begins with --. A -neon suffix will be added to the variation value. The following CSS

--deep-green: #017d63;
--fresh-blue: #6440fa;
--greenish-blue: #053245;
.example {
  color: #012345;
  background-color: #fedcba;
} 

will become:

--deep-green: #017d63;
--deep-green-neon: color(display-p3 0.39 0.39 0.39);
--fresh-blue: #6440fa;
--fresh-blue-neon: color(display-p3 39.22 39.22 39.22);
--greenish-blue: #053245;
--greenish-blue-neon: color(display-p3 1.96 1.96 1.96);
.example {
  color: #012345;
  color: color(display-p3 0.39 0.39 0.39);
  background-color: #fedcba;
  background-color: color(display-p3 99.61 99.61 99.61);
} 

That's a good start for experimenting with wide gamut colors to make an existing website use slightly brighter colors.

Custom property variations can be used like this:

:root {
  --deep-green: #017d63;
  --deep-green-neon: color(display-p3 0.39 0.39 0.39);
}
.example {
  color: var(--deep-green);
  color: var(--deep-green-neon);
}

Comments

[Ingo Steinke]

P.S. JetBrains IDEA editor's color preview lags behind browser color support, but there is YouTrack issue WEB-5974 that you can vote and comment on to support and increase priority.