exportColorInGamut

About this plugin

Figma/Figjam export color in correct gamut

> Note: This plugin is aimed at developers/designers working with a environment/monitor that supports a color space with a wider gamut than sRGB (specifivally p3). Figma running in a browser is limited to sRGB currently, however the desktop app supports the option to use the native OS one. You may need to enable this in the settings under: Figma > Preferences > Color Space > Unmanaged.

Motivation

When working in a wider color gamut (like the display of a modern macbook, supporting p3) and copying colors to be rendered on the web you may find them to look different (notably less saturated), to what you designed. This is to some extent an inevitable consequence of converting to a smaller color gamut (sRGB), as some colors simply cannot be represented there. There are two main strategies, each with benefits and drawbacks, to convert p3 colors to sRGB (or any larger color space to a smaller). Either you scale the colors linearly, always maintaining contrast (so two different colors in p3 will look different in sRGB), but loosing perceptual uniformity (most colors will look notably different, as a consequence of the linear mapping to a smaller color space).

The second approach is implemented in this plugin. There we ensure that a color which is in both color spaces stays perceptually uniform (looks the same), but neglect that on the extreme end of the p3 color space (regarding colors that cannot be represented in sRGB) colors are cut off. So e.g. the reddest red in p3 gets mapped to reddest red in sRGB, but so do all reds in p3 that exceed the reddes red in sRGB.

Implementation

The specific implementation outlined above is by colorjs.io.

Note that this is not the only solution for this problem. As of recently the web is no longer sRGB limited. The new CSS Color Module Level 4 specifies the color() function with which we can represent colors in wider color spaces, when supported. Hence we can use it to more directly "copy" values from figma to the css. Copy is in quotes here because there is no direct copy button in figma to do this. In essence it is a 1 to 1 mapping (of course), only in a slightly different syntax (base 1, instead of base 255). This plugin formats a string containing both approaches, first the new css color() function, then the computed mapping to sRGB. In correct order, so that the sRGB version is used as fallback, if the client browser does not support the new API. Depending on the adaption progress of the CSS Color Module Level 4 spec, you may opt to omit the sRGB version of coverage is sufficiant.

> Note that this plugin is currently only aimed displays/environment using the p3 color space, if you are on a different one (that is supported by colorjs.io, please write me / submit a issue and I will try to make it more modular)

Usage

Select any element, and run the plugin. A string like the following will be copied to your clipboard:

Limitations

Gradient fills and opacity are not supported yet. If you need them, please write me / submit an issue and I will try to add this feature.

This plugin is intentionally only concerned with filled colors (text, strokes, background...) editable in figma. If you want to export an asset in the correct color space, please refer to Export PNG with Color Profile.