W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2018

Re: [csswg-drafts] [css-color] Separation / DeviceN color support

From: Mike Bremford via GitHub <sysbot+gh@w3.org>
Date: Mon, 08 Oct 2018 19:07:24 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-427946458-1539025641-sysbot+gh@w3.org>
My previous suggestion was bone-headed and while it reflected how the color-spaces were stored in PDF and PostScript, it didn't reflect how they were used or defined. This is much simpler and covers every use-case I have been able to find.

### Problem

First, the existing syntax for "named" or "spot" colors requires them to be specified by means of an ICC "named color" profile, but these types of profile have poor industry support. They are not supported by any Adobe tools or Quark Express, and they are disallowed by the PDF language reference. There are virtually no examples of these ICC profiles available to download [1] 

Second, the syntax for specifying a named color from a "named color" ICC profile prevents them from being used with other components. I can paint in 100% cyan, 20% black by specifying "device-cmyk(1 0 0 0.2)", but I cannot paint with 100% "PANTONE Warm Red" and 20% black, as the syntax does not allow it.

### Proposal

Allow the definition of spot colors without reference to an ICC profile by:

* adding a "components" attribute to the @color-profile rule
* allowing the "src" attribute to reference on of the built in color-spaces, eg. device-cmyk.

This gives you the same sort of logical view on the colors as is used by Adobe Illustrator, and is flexible enough to cover all the practical uses of Separation and DeviceN ColorSpaces as used in PDF. It doesn't replace the existing syntax for loading named colors from an ICC profile, but it does provide another way to define them.

Proposed new attribute for @color-profile
```
components: <string> <number>+ [ , <string> <number+ ]*

  Specifies the components that make up this color space. If not specified, the
  default is the list of components defined in the ICC profile or color space
  referenced by the "src" attribute. Otherwise, the value is a comma-separated
  list of ink-names and their process-color values in the color space referenced
  by "src".
```

Proposed change of definition for "src" attribute in @color-profile:
```
src: <url> | device-cmyk | srgb | lab;

  The src descriptor specifies either the URL to retrieve the color-profile
  information from, or that the components are to be taken from one of
  the pre-defined color profiles.
```



Example 1: Define a single ink from the PANTONE range as cmyk(1, 0.723, 0, 0.02), with the CMYK values referencing the "swop.icc" profile.
```
@color-profile reflex-blue {
  src: url(swop.icc);
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}
body {
  color: color(reflex-blue 1);
}
```

Example 2: As above, but the color is defined against the "device-cmyk" space.
```
@color-profile reflex-blue {
  src: device-cmyk;
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02;
}
```

Example 3: Define two inks from the PANTONE range and use them in a gradient (making our own custom duotone color-space).
```
@color-profile mygradient {
  src: device-cmyk;
  components: "PANTONE Reflex Blue C" 1 0.723 0 0.02, "PANTONE Warm Red C" 0 0.75 0.9 0;
}
body {
  background: linear-gradient(color(mygradient 0 1), color(mygradient 1 0));
}
```

Example 4: Recreate all the CMYK components and add an additional ink, creating a 5-component colorspace.
```
@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;
}
body {
  background: linear-gradient(color(cmykb 0 1 0 0 1), color(cmykb 1 0 0 1 0));
}
```

Example 4: With no components listed the syntax effectively defines an alias.
```
@color-profile cmyk {
  src: device-cmyk;
}
body {
  color: color(cmyk 0 0 0 1)
}
```

### Rendering
If the output device has those components (which will be the case for PDF or PostScript, but nothing else), then the components can be used as defined. If not, then converting the named components into the components for the color profile referenced by "src"  can be done with the formula

  Xᵢ = 1 - ( (1-(C₀ * Nᵢ₀)) * (1-(C₁ * Nᵢ₁)) * ... * (1-(Cⱼ * Nᵢⱼ) )

where
* Xᵢ is the output component i
* Cⱼ is the input component j
* Nᵢⱼ is the component j for ink i

This is a standard linear blend. It's what Adobe Illustrator does when creating a DeviceN ColorSpace from multiple spot colors, and I haven't been able to find an example in our corpus of test PDF documents of a DeviceN colorspace that _isn't_ created this way. If there ever is a need, an additional attribute could define a different blend formula.

The formula works for any color space, providing the component values are normalized to 0..1

We've tested this in-house and it's working nicely: see [output.pdf](https://github.com/w3c/csswg-drafts/files/2457295/output.pdf).

![output](https://user-images.githubusercontent.com/989243/46628492-a4991080-cb35-11e8-9466-c46557313dd7.png)


```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test linear gradient between Pantone named colors</title>
  <style type="text/css">
      @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;
      }
      body {
          font: bold 18px sans-serif;
      }
      #left {
          color: color(duotone 1 0);
          float: left;
      }
      #right {
          color: color(duotone 0 1);
          float: right;
      }
      #gradient {
          background: linear-gradient(to right, color(duotone 1 0), color(duotone 0 1));
          height: 100px;
          clear: both;
      }
   </style>
 </head>
 <body>
   <div>
    <span id="left">PANTONE Reflex Blue C</span>
    <span id="right">PANTONE Warm Red C</span>
   </div>
   <div id="gradient"></div>
 </body>
</html>
```

[1] https://www.efi.com/en-gb/marketing/fiery-servers-and-software/downloads/pantone-library/ is the only one I've found.


-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2023#issuecomment-427946458 using your GitHub account
Received on Monday, 8 October 2018 19:07:27 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:38 UTC