后CSS Gamut 绘图

npm install @csstools/postcss-gamut-mapping --save-dev

后CSS Gamut 绘图 允许您使用有 gamut 映射的宽组色来进行特定显示 CSS 颜色 4 规格。 。 。 .

当出格姆特的颜色被天真地剪去时,结果可能完全不同.
一个饱和而明亮的颜色在剪接后会更暗.

要正确调整一个狭义的 Gamut 显示的颜色, 必须绘制颜色 .
这是通过降低 chroma 内 oklch 直到颜色成形.

使用 @media (color-gamut) 媒体特性使得在支持它们的显示器上只能使用宽相间的颜色.

p {
    background-color: oklch(80% 0.05 0.39 / 0.5);
    color: oklch(20% 0.234 0.39 / 0.5);
    border-color: color(display-p3 0 1 0);
}

/* becomes */

p {
    background-color: oklch(80% 0.05 0.39 / 0.5);
    color: rgba(48, 0, 20, 0.5);
    border-color: rgb(0, 247, 79);
}

@media (color-gamut: rec2020) {

@supports (color: oklab(0% 0 0%)) {
p {
    color: oklch(20% 0.234 0.39 / 0.5);
}
}
}

@media (color-gamut: p3) {

@supports (color: color(display-p3 0 0 0%)) {
p {
    border-color: color(display-p3 0 1 0);
}
}
}

使用量

添加 后CSS Gamut 绘图 对您的项目:

npm install postcss @csstools/postcss-gamut-mapping --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssGamutMapping = require('@csstools/postcss-gamut-mapping');

postcss([
    postcssGamutMapping(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);