Color profiles

Separation / DeviceN color support

You can create custom color profiles with your own components and their corresponding CMYK values for mapping. However, keep in mind that the official CSS specification for this feature is currently in draft form and may change in the future.

In the example below, we demonstrate how to create a 5-component color space by adding an additional ink to the traditional CMYK color profile. We then use the color() function to reference to it.

@color-profile --cmykb {
    src: device-cmyk;
    components: "Cyan" 1 0 0 0,
                "Magenta" 0 1 0 0,
                "Yellow" 0 0 1 0,
                "Black" 0 0 0 1,
                "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}

h1 {
    /* Provide a value for all 5 components */
    color: color(--cmykb { 0 0 0 0 1);
}
h2 {
    color: color(--cmykb { 25% 0 10% 0 80%);
}

Bellow, we create a duotone colorspace using a CMYK mapping. We can then use this colorspace to create a gradient transitioning from one color to the other.

@color-profile --duotone {
    src: device-cmyk;
    components: "PANTONE Reflex Blue C" 1 0.723 0 0.02,
                "PANTONE Warm Red C" 0 0.75 0.9 0;
}

#gradient {
    background: linear-gradient(to right, color(--duotone 1 0), color(--duotone 0 1));
    height: 1cm;
}

Color profiles (Live Demo) - typeset.sh

You can also reference to an ICC profile using the src property.

@color-profile --fogra52 {
    src: url('https://www.color.org/registry/profiles/PSOuncoated_v3_FOGRA52.icc');
}

h1 {
    color: color(--fogra52 0 100% 0 0);
}