Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Separate colors in PDFs using JavaScript

Show or hide colors in a PDF document using this JavaScript sample (no servers or other external dependencies required). Read low-level information (like Pantone, CMYK or spot colors) from the PDF and toggle spot colors on and off inside of the webviewer (see demo). Common use cases for color separation include advanced printing solutions where each ink is specified its own separate color channel giving printers the ability to calculate how much ink will be applied to each pixel or color channel. This sample works on all browsers (including IE11) and mobile devices without using plug-ins. Learn more about our JavaScript PDF Library.

Get Started Samples Download

To run this sample, get started with a free trial of Apryse SDK.



    path: '../../../lib',
    fullAPI: true,
    initialDoc: '../../../samples/files/op-blend-test.pdf',
    enableFilePicker: true,
).then(instance => {
  const { documentViewer } = instance.Core;
  const { openElements, closeElements } = instance.UI;
  const colorsElement = document.getElementById('colors');

  let colorSeparationLoaded = false;
  documentViewer.addEventListener('documentLoaded', () => {
    colorsElement.innerHTML = '';

    const doc = documentViewer.getDocument();
    colorSeparationLoaded = false;
    // Enable color separation
    doc.enableColorSeparations({ checkIfBaseColorsUsed: false });
    // wait till the individual "colors" in the top left corner load first

    // Listen to each color in a PDF document
    doc.addEventListener('colorSeparationAdded', color => {
      colorSeparationLoaded = true;
      const input = document.createElement('input'); =;
      input.type = 'checkbox';
      input.checked = color.enabled;
      input.onchange = e => {
        // show 'loadingModal', hide it in the 'pageComplete' event
        // Show/hide a color
        // Redraw the canvas

      const label = document.createElement('label'); = `${} label`;
      label.htmlFor =; = `rgb(${color.rgb.join(',')})`;
      label.innerHTML =;

      const lineBreak = document.createElement('br');


  documentViewer.addEventListener('mouseMove', nativeE => {
    const mouseLocation = documentViewer.getToolMode().getMouseLocation(nativeE);
    const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();

    const pageNumber = displayMode.getSelectedPages(mouseLocation, mouseLocation).first;
    if (pageNumber !== null) {
      const pageCoordinate = displayMode.windowToPage(mouseLocation, pageNumber);
      if (pageCoordinate) {
        const pageNumber = pageCoordinate.pageNumber;
        const x = pageCoordinate.x;
        const y = pageCoordinate.y;
        const results = documentViewer.getColorSeparationsAtPoint(pageNumber, x, y);
        for (let i = 0; i < results.length; ++i) {
          // Update the text in color panel
          const colorLabelElement = document.getElementById(`${results[i].name} label`);
          if (colorLabelElement) {
            colorLabelElement.innerHTML = `${results[i].name} ${results[i].value}%`;

  documentViewer.addEventListener('pageComplete', () => {
    // wait for the first 'colorSeparationAdded' event before closing the loading modal
    // we don't want to hide the 'loadingModal' for the first 'pageComplete' event for the initial load
    if (colorSeparationLoaded) {