Generate P3 Color Variations from RGB Hex Values
Tags: webdev, css, tutorial, showdev
Published: 2023-10-30 09:58:18

[Taking colors to the next (CSS) level using a wider gamut color space](https://dev.to/ingosteinke/ccs4-colors-5bj2) is now supported by major browsers.

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

![caniuse screenshot showing support except for IE, Samsung, and some other mobile browsers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwf8dm4ipd2cgxctmtqd.png)

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.

```css
.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.

![color picker screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbc35mjf2siwsv2bk0ll.png)

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)](https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-vision-deficiency) would design a colorful website or like [Beethoven composed music while suffering from severe hearing deficiencies](https://www.theguardian.com/music/2020/feb/01/beethoven-not-completely-deaf-says-musicologist).

## 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](https://darn.es/using-display-p3-colour/), I made a codepen to copy and paste existing CSS snippets.

[![CodePen screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5v6sunz321uhzj5pzp8.png)](https://codepen.io/openmindculture/pen/RwvrrXW)

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

{% 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

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

will become: 

```css
--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:

```css
: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);
}
```