Skip to content

Commit 18d9ead

Browse files
svgeesussvgeesus
committed
[css-color-4] add sole color() CMYK examples
1 parent 56eaaa6 commit 18d9ead

File tree

1 file changed

+189
-8
lines changed

1 file changed

+189
-8
lines changed

‎css-color-4/Overview.bs‎

Lines changed: 189 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2543,6 +2543,180 @@ Specifying a color profile: the ''@color-profile'' at-rule</h3>
25432543
but fall just inside the gamut.
25442544
</dl>
25452545

2546+
<h3 id="cal-cmyk">
2547+
CSS and print: using calibrated CMYK and other printed colorspaces</h3>
2548+
2549+
The ''@color-profile'' at-rule is not restriced to RGB colorspaces.
2550+
While screens typically display colors directly in RGB,
2551+
printers often represent colors with CMYK.
2552+
2553+
Calibrated four color print with Cyan, Magenta, Yellow and Black (CMYK),
2554+
or high-fidelity wide gamut printing with additional inks
2555+
such as Cyan Magenta Yellow Green Orange Violet Black (CMYGOVB)
2556+
can also be done in CSS,
2557+
provided you have an ICC profile
2558+
corresponding to the combination of
2559+
inks, paper, total ink coverage and equipement
2560+
you will use.
2561+
2562+
<div class="example">
2563+
For example, using offset printing to ISO 12647-2:2004 / Amd 1
2564+
using the FOGRA39 characterisation data
2565+
on 115gsm coated paper
2566+
with an ink limit of 300% Total Area Coverage.
2567+
2568+
<!--
2569+
$ xicclu -ir Coated_Fogra39L_VIGC_300.icc
2570+
0.0 0.7 0.2 0.0
2571+
2572+
0.000000 0.700000 0.200000 0.000000 [CMYK] -> Lut -> 63.673303 51.576902 5.811058 [Lab]
2573+
2574+
-->
2575+
2576+
<pre>
2577+
@color-profile --fogra39 {
2578+
src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
2579+
}
2580+
.header {
2581+
background-color: <span class="swatch" style="--color: rgb(93.124% 44.098% 57.491%)"></span> color(--fogra39 0% 70% 20% 0%);
2582+
}
2583+
</pre>
2584+
2585+
Here the color() function first states the name we have given the profile,
2586+
then gives the percentage
2587+
of cyan, magenta, yellow, and black.
2588+
2589+
In this profile, this resolves to the color
2590+
<span class="swatch" style="--color: rgb(93.124% 44.098% 57.491%)"></span>&nbsp;Lab(63.673303% 51.576902 5.811058)
2591+
which is
2592+
<span class="swatch" style="--color: rgb(93.124% 44.098% 57.491%)"></span>&nbsp;rgb(93.124, 44.098% 57.491%).
2593+
</div>
2594+
2595+
Because the actual color resulting from a given CMYK combination is known,
2596+
an on-screen visualization of the printed output (soft-proof) can be made.
2597+
Also, procedures that rely on knowing the color
2598+
(anti-aliasing, compositing, using the color in a gradient, etc)
2599+
can proceed as normal.
2600+
2601+
<div class="example">
2602+
This example is using offset printing to ISO 12647-2:2004
2603+
using the CGATS/SWOP TR005 2007 characterisation data
2604+
on grade 5 paper
2605+
with an ink limit of 300% Total Area Coverage,
2606+
and medium gray component replacement (GCR).
2607+
2608+
<!--
2609+
$ xicclu -ir SWOP2006_Coated5v2.icc
2610+
0.0 0.7 0.2 0.0
2611+
2612+
0.000000 0.700000 0.200000 0.000000 [CMYK] -> Lut -> 64.965217 52.119710 5.406966 [Lab]
2613+
2614+
-->
2615+
2616+
<pre>
2617+
@color-profile --swop5c {
2618+
src: url('https://example.org/SWOP2006_Coated5v2.icc');
2619+
}
2620+
.header {
2621+
background-color: <span class="swatch" style="--color: rgb(94.903% 45.248% 59.104%)"></span> color(--swop5c 0% 70% 20% 0%);
2622+
}
2623+
</pre>
2624+
2625+
In this profile, this amount of CMYK
2626+
(the same percentages as the previous example)
2627+
resolves to the color
2628+
<span class="swatch" style="--color: rgb(94.903% 45.248% 59.104%)"></span>&nbsp;Lab(64.965217% 52.119710 5.406966)
2629+
which is
2630+
<span class="swatch" style="--color: rgb(94.903% 45.248% 59.104%)"></span>&nbsp;rgb(94.903% 45.248% 59.104%).
2631+
</div>
2632+
2633+
Fallback colors can be specified,
2634+
for example if the specified CMYK color is known
2635+
to be outside the sRGB gamut.
2636+
2637+
<div class="example">
2638+
This example uses the same FOGRA39 setup as before,
2639+
but specifies a bright green which is outside the sRGB gamut.
2640+
It is, however, inside the display-p3 gamut.
2641+
Therefore it is displayed as-is on wide gamut screens
2642+
and a less intense fallback color is used on sRGB screens.
2643+
2644+
<!--
2645+
$ xicclu -ir Coated_Fogra39L_VIGC_300.icc
2646+
0.9 0.0 0.9 0.0
2647+
2648+
0.900000 0.000000 0.900000 0.000000 [CMYK] -> Lut -> 56.596645 -58.995875 28.072154 [Lab]
2649+
2650+
-->
2651+
2652+
<pre>
2653+
@media print {
2654+
.header {
2655+
background-color: color(--fogra39 90% 0% 90% 0%);
2656+
}
2657+
}
2658+
@media (color-gamut: srgb) {
2659+
.header {
2660+
background-color: color(--fogra39 90% 0% 90% 0%, <span class="swatch" style="--color: rgb(8.154% 60.9704% 37.184%)"></span> rgb(8.154% 60.9704% 37.184%));
2661+
}
2662+
}
2663+
@media (color-gamut: p3) {
2664+
.header {
2665+
background-color: color(--fogra39 90% 0% 90% 0%);
2666+
}
2667+
}
2668+
</pre>
2669+
2670+
This example does not use illustrative swatches, because most of the colors are outside of sRGB.
2671+
2672+
This CMYK color corresponds to Lab(56.596645% -58.995875 28.072154)
2673+
or LCH(56.596645% 65.33421077211648, 154.5533771086801).
2674+
In sRGB this would be rgb(-60.568% 62.558% 32.390%) which,
2675+
as the large negative red component shows,
2676+
is out of gamut.
2677+
2678+
Reducing the chroma until the result is in gamut
2679+
gives LCH(56.596645% 51 154.5533771086801)
2680+
which is rgb(8.154% 60.9704% 37.184%)
2681+
and this is used as the fallback color.
2682+
2683+
For wide gamut screens, the color is inside the display-p3 gamut
2684+
so no fallback need be specified.
2685+
However, for the curious, the color is display-p3(0.1658 0.6147 0.3533).
2686+
2687+
<!--
2688+
grn=[56.596645, -58.995875, 28.072154 ]
2689+
Array(3) [ 56.596645, -58.995875, 28.072154 ]
2690+
2691+
grn_lch=Lab_to_LCH(grn)
2692+
Array(3) [ 56.596645, 65.33421077211648, 154.5533771086801 ]
2693+
2694+
grn_srgb=LCH_to_sRGB(grn_lch)
2695+
Array(3) [ -0.6056873504861735, 0.6255878698501047, 0.3239030534610021 ]
2696+
2697+
desat_lch=[56.596645, 55, 154.5533771086801 ]
2698+
Array(3) [ 56.596645, 55, 154.5533771086801 ]
2699+
2700+
desat_srgb=LCH_to_sRGB(desat_lch)
2701+
Array(3) [ -0.10689290334865434, 0.6143491294294153, 0.3586745333140551 ]
2702+
2703+
desat_lch=[56.596645, 50, 154.5533771086801 ]
2704+
Array(3) [ 56.596645, 50, 154.5533771086801 ]
2705+
2706+
desat_srgb=LCH_to_sRGB(desat_lch)
2707+
Array(3) [ 0.1083935322035526, 0.6085162381979395, 0.3751152317330066 ]
2708+
2709+
desat_lch=[56.596645, 51, 154.5533771086801 ]
2710+
Array(3) [ 56.596645, 51, 154.5533771086801 ]
2711+
2712+
desat_srgb=LCH_to_sRGB(desat_lch)
2713+
Array(3) [ 0.08154856398116136, 0.6097043838635557, 0.37184402014676937 ]
2714+
2715+
grn_p3=LCH_to_P3(grn_lch)
2716+
Array(3) [ 0.16582655785857967, 0.6147848214649991, 0.3532666045888559 ]
2717+
-->
2718+
</div>
2719+
25462720
<h2 id="working-color-space">
25472721
Working Color Space</h2>
25482722

@@ -2552,10 +2726,16 @@ Issue(300):
25522726
<h2 id='device-cmyk'>
25532727
Device-dependent CMYK Colors: the ''device-cmyk()'' function</h2>
25542728

2555-
While screens typically display colors directly with RGB pixels,
2556-
printers often represent colors in different ways.
2557-
In particular, one of the most common print-based ways of representing colors is with CMYK:
2558-
a combination of cyan, magenta, yellow, and black which yields a particular color on that device.
2729+
Sometimes, when a given printer has not been calibrated,
2730+
but the output for particular ink combinations is known through experimentation,
2731+
or via a printed sample swatchbook,
2732+
it is useful to express CMYK colors
2733+
in a device-dependent way.
2734+
2735+
Note: because the actual resulting color is unknown,
2736+
CSS processors will attempt to approximate it.
2737+
This approximation is likely to be visually very far from the actual printed result.
2738+
25592739
The ''device-cmyk()'' function allows authors to specify a color in this way:
25602740

25612741
<pre class='prod'>
@@ -2580,14 +2760,15 @@ Device-dependent CMYK Colors: the ''device-cmyk()'' function</h2>
25802760

25812761
Typically, print-based applications will actually store the used colors as CMYK,
25822762
and send them to the printer in that form.
2583-
Unfortunately, CSS cannot do that;
2763+
<!-- Unfortunately, CSS cannot do that;
25842764
various CSS features require an RGB color,
2585-
so that compositing/blending/etc. can be done.
2586-
As such, CMYK colors must be converted to an equivalent RGB color.
2765+
so that compositing/blending/etc. can be done. -->
2766+
As such, Device CMYK colors must be converted to an equivalent RGB color.
25872767
This is not trivial, like the conversion from HSL or HWB to RGB;
25882768
the precise conversion depends on the precise characteristics of the output device.
25892769

2590-
If the user agent has information about the output device such that it believes it can accurately convert the CMYK color to a correct RGB color,
2770+
If the user agent has information about the output device such that it believes
2771+
it can accurately convert the CMYK color to a correct RGB color,
25912772
the computed value of the ''device-cmyk()'' function must be that RGBA color.
25922773
Otherwise, the computed value must be the fallback color.
25932774

0 commit comments

Comments
 (0)