Halftone CMYK

CMYK halftone printing effect applied to images with customizable dot patterns and ink colors for each channel (Cyan, Magenta, Yellow, Black). Simulates traditional four-color printing process.

Features

True CMYK color separation
Customizable ink colors per channel
Multiple dot styles (dots, ink, sharp)
Individual channel gain and flood controls
Grid noise and grain effects
Vintage printing simulation

Basic Usage

import { HalftoneCmyk } from '@paper-design/shaders-react';

function App() {
  return (
    <HalftoneCmyk
      image="/path/to/image.jpg"
      type="ink"
      size={0.2}
      contrast={1}
      softness={1}
      colorBack="#fbfaf5"
      colorC="#00b4ff"
      colorM="#fc519f"
      colorY="#ffd800"
      colorK="#231f20"
      gridNoise={0.2}
      floodC={0.15}
      gainC={0.3}
      gainY={0.2}
    />
  );
}

import { mountShader, halftoneCmykFragmentShader, HalftoneCmykTypes, getShaderNoiseTexture } from '@paper-design/shaders';

const canvas = document.getElementById('canvas');
const mount = mountShader(canvas, {
  fragmentShader: halftoneCmykFragmentShader,
  uniforms: {
    u_image: '/path/to/image.jpg',
    u_noiseTexture: getShaderNoiseTexture(),
    u_type: HalftoneCmykTypes.ink, // 1
    u_size: 0.2,
    u_contrast: 1,
    u_softness: 1,
    u_colorBack: [0.984, 0.980, 0.961, 1],
    u_colorC: [0, 0.706, 1, 1],
    u_colorM: [0.988, 0.318, 0.624, 1],
    u_colorY: [1, 0.847, 0, 1],
    u_colorK: [0.137, 0.122, 0.125, 1],
    u_gridNoise: 0.2,
    u_grainSize: 0.5,
    u_grainMixer: 0,
    u_grainOverlay: 0,
    u_floodC: 0.15,
    u_floodM: 0,
    u_floodY: 0,
    u_floodK: 0,
    u_gainC: 0.3,
    u_gainM: 0,
    u_gainY: 0.2,
    u_gainK: 0,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    u_scale: 1,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
  },
});

Parameters

Visual Parameters

string | HTMLImageElement

default:"''"

Optional source image to convert to CMYK halftone

'dots' | 'ink' | 'sharp'

default:"'ink'"

Dot rendering style:

dots: Separate dots with clear boundaries
ink: Blended dots simulating ink spread
sharp: Sharp dots with per-pixel color sampling

number

default:"0.2"

Halftone cell size (0 = large cells, 1 = small cells)

number

default:"1"

Image contrast adjustment before halftone conversion

number

default:"1"

Edge softness of dots (0 = hard edge, 1 = smooth gradient)

string

default:"'#fbfaf5'"

Background (paper) color in hex, rgb, or rgba format

string

default:"'#00b4ff'"

Cyan ink color in hex, rgb, or rgba format

string

default:"'#fc519f'"

Magenta ink color in hex, rgb, or rgba format

string

default:"'#ffd800'"

Yellow ink color in hex, rgb, or rgba format

string

default:"'#231f20'"

Black (key) ink color in hex, rgb, or rgba format

number

default:"0.2"

Smooth noise applied to both dot positions and color sampling

number

default:"0.5"

Size of grain overlay texture

number

default:"0"

Strength of grain affecting dot size

number

default:"0"

Strength of grain overlay on final output

Channel Controls

number

default:"0.15"

Flat cyan dot size adjustment applied uniformly

number

default:"0"

Flat magenta dot size adjustment applied uniformly

number

default:"0"

Flat yellow dot size adjustment applied uniformly

number

default:"0"

Flat black dot size adjustment applied uniformly

number

default:"0.3"

Proportional cyan dot size gain (enhances existing dots)

number

default:"0"

Proportional magenta dot size gain

number

default:"0.2"

Proportional yellow dot size gain

number

default:"0"

Proportional black dot size gain

Sizing Parameters

'none' | 'contain' | 'cover'

default:"'cover'"

How to fit the shader into the canvas dimensions

number

default:"1"

Overall zoom level of the graphics

number

default:"0"

Overall rotation angle in degrees

number

default:"0"

Horizontal offset of the graphics center

number

default:"0"

Vertical offset of the graphics center

Animation Parameters

number

default:"0"

Animation speed multiplier (0 for static)

number

default:"0"

Manual frame control for animation

Presets

The HalftoneCmyk shader comes with several built-in presets:

Default: Vibrant CMYK with cyan and yellow emphasis
Drops: High contrast with irregular dot placement
Newspaper: Grayscale newsprint effect
Vintage: Soft vintage colors with grain

import { HalftoneCmyk, halftoneCmykPresets } from '@paper-design/shaders-react';

function App() {
  return <HalftoneCmyk {...halftoneCmykPresets[0].params} image="/image.jpg" />;
}

Examples

Newspaper Print

<HalftoneCmyk
  image="/image.jpg"
  type="dots"
  size={0.01}
  contrast={2}
  softness={0.2}
  colorBack="#f2f1e8"
  colorC="#7a7a75"
  colorM="#7a7a75"
  colorY="#7a7a75"
  colorK="#231f20"
  gridNoise={0.6}
  floodK={0.1}
  gainC={-0.17}
  gainM={-0.45}
  gainY={-0.45}
  grainOverlay={0.2}
/>

Vintage Poster

<HalftoneCmyk
  image="/image.jpg"
  type="sharp"
  size={0.2}
  contrast={1.25}
  softness={0.4}
  colorBack="#fffaf0"
  colorC="#59afc5"
  colorM="#d8697c"
  colorY="#fad85c"
  colorK="#2d2824"
  gridNoise={0.45}
  floodC={0.15}
  gainC={0.3}
  gainY={0.2}
  grainMixer={0.15}
  grainOverlay={0.1}
/>

High Contrast Drops

<HalftoneCmyk
  image="/image.jpg"
  type="ink"
  size={0.88}
  contrast={1.15}
  softness={0}
  colorBack="#eeefd7"
  colorC="#00b2ff"
  colorM="#fc4f4f"
  colorY="#ffd900"
  colorK="#231f20"
  gridNoise={0.5}
  floodC={0.15}
  gainC={1.0}
  gainM={0.44}
  gainY={-1.0}
  grainMixer={0.05}
  grainOverlay={0.25}
/>

Technical Details

Shader Uniforms (Vanilla JS)

When using the vanilla JavaScript API:

import { HalftoneCmykTypes, getShaderNoiseTexture } from '@paper-design/shaders';

{
  u_type: HalftoneCmykTypes.ink, // or 1
  u_noiseTexture: getShaderNoiseTexture(), // Required!
  u_colorBack: [r, g, b, a],
  u_colorC: [r, g, b, a],
  u_colorM: [r, g, b, a],
  u_colorY: [r, g, b, a],
  u_colorK: [r, g, b, a],
  // ... other parameters
}

Dot Types

dots (0): Separate dots with clear boundaries
ink (1): Blended dots simulating ink spread
sharp (2): Sharp dots with direct pixel sampling

CMYK Separation

The shader automatically converts RGB images to CMYK using standard formulas:

Cyan: Absence of red
Magenta: Absence of green
Yellow: Absence of blue
Black (Key): Overall darkness

Each channel is rendered at a different rotation angle (15°, 75°, 0°, 45°) to prevent moiré patterns.

Channel Controls

Flood Parameters (-1 to 1):

Add or subtract a flat amount from all dots in a channel
Positive values make all dots bigger
Negative values make all dots smaller
Useful for overall color balance

Gain Parameters (-1 to 1):

Multiply existing dot sizes proportionally
Positive values enhance existing dots
Negative values reduce existing dots
Preserves relative differences between areas

Performance Notes

Static shader (no animation by default)
Requires noise texture (automatically handled in React)
ink and sharp types sample 9 cells per pixel
Performance scales with image resolution
Grid noise adds slight computational cost

Get Started

Shaders

Guides

Features

Basic Usage

Parameters

Visual Parameters

Channel Controls

Sizing Parameters

Animation Parameters

Presets

Examples

Newspaper Print

Vintage Poster

High Contrast Drops

Technical Details

Shader Uniforms (Vanilla JS)

Dot Types

CMYK Separation

Channel Controls

Performance Notes

​Features

​Basic Usage

​Parameters

​Visual Parameters

​Channel Controls

​Sizing Parameters

​Animation Parameters

​Presets

​Examples

​Newspaper Print

​Vintage Poster

​High Contrast Drops

​Technical Details

​Shader Uniforms (Vanilla JS)

​Dot Types

​CMYK Separation

​Channel Controls

​Performance Notes

Features

Basic Usage

Parameters

Visual Parameters

Channel Controls

Sizing Parameters

Animation Parameters

Presets

Examples

Newspaper Print

Vintage Poster

High Contrast Drops

Technical Details

Shader Uniforms (Vanilla JS)

Dot Types

CMYK Separation

Channel Controls

Performance Notes