<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color profiles</title>
<style>
@page {
size: 320pt 320pt;
margin: 10pt;
}
@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;
}
@color-profile --fogra52 {
src: url('https://www.color.org/registry/profiles/PSOuncoated_v3_FOGRA52.icc');
}
@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;
}
.f1 {
color: color(--cmykb 0 0 0 0 1);
}
.f2 {
color: color(--fogra52 0 1 0 0);
}
.f3 {
color: lab(62.753% 52.460 -34.103);
}
#left {
color: -ts-overprint(color(--duotone 1 0));
float: left;
font-weight: bold;
}
#right {
color: -ts-overprint(color(--duotone 0 1));
float: right;
font-weight: bold;
}
#gradient {
background: linear-gradient(to right, color(--duotone 1 0), color(--duotone 0 1));
height: 100px;
clear: both;
}
</style>
</head>
<body>
<p>Testing <span class="f1">cmykb</span> support.</p>
<p>Testing <span class="f2">fogra52</span> support.</p>
<p>Testing <span class="f3">lab</span> support.</p>
<div>
<span id="left">PANTONE Reflex Blue C</span>
<span id="right">PANTONE Warm Red C</span>
</div>
<div id="gradient"></div>
</body>
</html>
