CSS device-cmyk() Function

CSS device-cmyk() Function

The CSS device-cmyk() function specifies a color using cyan, magenta, yellow, and black ink components.

It is designed for device-dependent print colors, where the appearance of a CMYK combination depends on the printer and its inks. Unlike RGB colors used for screens, CMYK values describe ink amounts and may produce different results on different output devices. Browser support is currently unavailable.

Syntax

device-cmyk(C M Y K)
device-cmyk(C M Y K / A)

The modern syntax accepts four space-separated CMYK components and an optional alpha value following a forward slash.

For example:

color: device-cmyk(100% 0% 0% 0%);

This specifies full cyan ink with no magenta, yellow, or black ink.

Additional examples:

device-cmyk(0% 100% 0% 0%)
device-cmyk(0% 0% 100% 0%)
device-cmyk(0% 0% 0% 100%)
device-cmyk(50% 25% 0% 10%)
device-cmyk(0.5 0.25 0 0.1)
device-cmyk(100% 0% 0% 0% / 50%)

The function returns a CSS color value. It can be specified in color-related properties, although current browsers do not implement the function.

These examples demonstrate the defined CSS syntax, not currently supported browser rendering.

Parameters

The device-cmyk() function uses four required color components and one optional alpha component.

Each CMYK component can be expressed as a number, percentage, or the keyword none in modern syntax.

Numbers use a nominal range from 0 to 1, while percentages use a nominal range from 0% to 100%.

Values outside these ranges are clamped to the nearest limit during computation.

For example:

device-cmyk(0.5 0.25 0 0.1)
device-cmyk(50% 25% 0% 10%)

These two expressions specify the same CMYK component values.

How It Works

The device-cmyk() function describes a color using the amounts of four printing inks.

CMYK is a subtractive color model. Ink absorbs portions of the light reflected from the printed surface.

The four components represent:

• Cyan: Primarily absorbs red light.
• Magenta: Primarily absorbs green light.
• Yellow: Primarily absorbs blue light.
• Black: Adds dark ink independently of the other components.

For example:

device-cmyk(100% 0% 0% 0%)

This requests cyan ink without the other three inks.

Another example:

device-cmyk(0% 0% 0% 100%)

This requests full black ink.

The actual printed appearance depends on the output device, inks, paper, and color management.

Consequently, CMYK percentages alone do not define an exact color appearance across different printers.

CMYK Components

Each component controls the amount of a particular printing ink.

Combining ink components creates additional colors.

For example:

device-cmyk(100% 100% 0% 0%)
device-cmyk(0% 100% 100% 0%)
device-cmyk(100% 0% 100% 0%)

These combinations are commonly associated with blue, red, and green in simplified CMYK color models.

Real printing inks do not behave like ideal mathematical colorants, so the resulting colors vary by device.

Percentage and Numeric Values

The modern syntax supports both percentages and decimal numbers for CMYK components.

For example:

device-cmyk(25% 50% 75% 10%)
device-cmyk(0.25 0.5 0.75 0.1)

Both expressions specify identical component amounts.

The modern syntax also permits mixing numbers and percentages:

device-cmyk(0.25 50% 0.75 10%)

Percentages may be easier to read when working with traditional print color values.

Alpha Transparency

The modern device-cmyk() syntax supports an optional alpha value.

Alpha controls transparency separately from the four ink components.

For example:

device-cmyk(100% 0% 0% 0% / 50%)

This specifies a cyan CMYK color with 50% opacity.

Alpha values can be percentages or numbers:

device-cmyk(100% 0% 0% 0% / 0.5)
device-cmyk(100% 0% 0% 0% / 50%)

Both specify the same transparency.

When alpha is omitted, the color is fully opaque.

Transparency may require conversion to a colorimetric color space before compositing, depending on the output environment.

Legacy Syntax

The specification also defines an older comma-separated syntax using four numeric values.

For example:

device-cmyk(0, 1, 0, 0)

This represents full magenta ink.

The equivalent modern syntax is:

device-cmyk(0 100% 0% 0%)

The two formats differ in several ways:

For new stylesheets, use the modern space-separated syntax.

Neither syntax is currently implemented in mainstream browsers.

Device-Dependent Colors

The term device-dependent means that the specified color does not have one guaranteed visual appearance.

For example:

device-cmyk(0% 80% 80% 20%)

Two printers receiving these same values may produce visibly different colors.

Differences can result from:

• Ink formulations and printer technology.
• Paper color and surface characteristics.
• Printer calibration.
• Color profiles and conversion methods.
• Printing conditions and device settings.

Unlike a color defined in a calibrated color space, an uncalibrated CMYK combination does not identify a precise color appearance.

For accurate print reproduction, use a color-managed workflow and appropriate printer profiles.

Color Profiles

The CSS Color Module Level 5 specification defines the @color-profile rule for identifying color profiles.

A CMYK ICC profile can provide the information needed to convert device-specific ink values into a calibrated color representation.

For example, the following illustrates the proposed relationship:

@color-profile device-cmyk {
  src: url("printer-profile.icc");
}
.print-color {
  color: device-cmyk(0% 80% 80% 20%);
}

The device-cmyk identifier in the rule refers to the device CMYK profile used for conversion.

The ICC file must be a valid, appropriate CMYK profile for the intended output device.

This is a specification example. Current browsers do not provide general support for this workflow.

For ordinary websites, use established screen color formats such as rgb(), hexadecimal colors, or color() with supported color spaces.

Example

This example demonstrates four basic CMYK component combinations. Because browsers do not support device-cmyk(), the Browser Result uses approximate RGB colors.

HTML:

<div class="device-cmyk-demo">
  <div class="device-cmyk-swatch device-cmyk-cyan">Cyan</div>
  <div class="device-cmyk-swatch device-cmyk-magenta">Magenta</div>
  <div class="device-cmyk-swatch device-cmyk-yellow">Yellow</div>
  <div class="device-cmyk-swatch device-cmyk-black">Black</div>
</div>

CSS:

.device-cmyk-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.device-cmyk-swatch {
  display: grid;
  place-items: center;
  width: 110px;
  height: 80px;
  font-weight: bold;
  border: 1px solid #ddd;
}
.device-cmyk-cyan {
  background-color: #00ffff;
  background-color: device-cmyk(100% 0% 0% 0%);
  color: #000;
}
.device-cmyk-magenta {
  background-color: #ff00ff;
  background-color: device-cmyk(0% 100% 0% 0%);
  color: #000;
}
.device-cmyk-yellow {
  background-color: #ffff00;
  background-color: device-cmyk(0% 0% 100% 0%);
  color: #000;
}
.device-cmyk-black {
  background-color: #000000;
  background-color: device-cmyk(0% 0% 0% 100%);
  color: #fff;
}

The swatches show simplified RGB approximations of the CMYK ink colors, not calibrated print output.

Browsers ignore the unsupported device-cmyk() declarations and display the preceding hexadecimal colors.

Print Color Example

This example shows how a print-oriented stylesheet might specify a device-dependent CMYK color while preserving a browser-compatible fallback.

HTML:

<div class="device-cmyk-print">
  <h3>Print Color Example</h3>
  <p>This sample uses a screen color fallback.</p>
</div>

CSS:

.device-cmyk-print {
  padding: 20px;
  border: 2px solid #cc3333;
  background-color: #fff4f4;
}
.device-cmyk-print h3 {
  margin: 0 0 10px;
  color: #cc3333;
}
.device-cmyk-print p {
  margin: 0;
}
@media print {
  .device-cmyk-print {
    border-color: #cc3333;
    border-color: device-cmyk(0% 80% 80% 20%);
  }
  .device-cmyk-print h3 {
    color: #cc3333;
    color: device-cmyk(0% 80% 80% 20%);
  }
}

The browser displays the hexadecimal fallback color. The CMYK declarations illustrate future or specialized print-processing behavior.

Using @media print does not enable unsupported CSS functions. Current browsers continue to use the fallback when printing.

Fallbacks

Because device-cmyk() is unsupported in current browsers, a valid fallback color is essential.

Place a supported color declaration before the CMYK declaration:

.example {
  color: #cc3333;
  color: device-cmyk(0% 80% 80% 20%);
}

Browsers that do not recognize device-cmyk() ignore the second declaration and retain the first.

The hexadecimal value is an approximate visual alternative, not an exact conversion from the CMYK values.

For background colors:

.example {
  background-color: #00ffff;
  background-color: device-cmyk(100% 0% 0% 0%);
}

For borders:

.example {
  border: 2px solid #cc3333;
  border-color: device-cmyk(0% 80% 80% 20%);
}

When accurate printed colors are required, use a color-managed print production workflow rather than relying on browser approximations.

CMYK vs. RGB

CMYK and RGB describe colors using different models.

For example:

color: rgb(0 255 255);
color: device-cmyk(100% 0% 0% 0%);

Both examples describe colors associated with cyan, but they are not guaranteed to produce the same appearance.

RGB is generally appropriate for browser display. CMYK is intended for printing workflows where ink combinations are important.

Common Uses

The device-cmyk() function is intended for specialized print-oriented color specifications.

These are intended uses defined by the CSS color specification. They should not be interpreted as features currently available in mainstream browsers.

Limitations

The device-cmyk() function has several important limitations.

• Current mainstream browsers do not support the function.
• The color depends on the output device and its printing characteristics.
• CMYK percentages alone do not guarantee an exact visual appearance.
• The modern syntax requires four CMYK components.
• Alpha is optional and must follow a forward slash in modern syntax.
• The legacy comma-separated syntax does not support alpha.
• Accurate conversion to screen colors may require an appropriate ICC profile.
• Unsupported declarations require browser-compatible fallbacks.

For example, the following modern syntax is valid:

device-cmyk(0% 80% 80% 20%)

The following is invalid because it supplies only three components:

device-cmyk(0% 80% 80%)

The following incorrectly mixes modern and legacy separators:

device-cmyk(0%, 80%, 80%, 20% / 50%)

Use spaces for modern syntax and commas only for the four-number legacy syntax.

Browser Support

The CSS device-cmyk() function has Limited availability and is not Baseline Widely available.

According to MDN, no mainstream browsers currently support this function.

It is defined in CSS Color Module Level 5 but has not been implemented for ordinary browser rendering.

For production websites, provide a supported color value before the unsupported declaration:

.print-heading {
  color: #cc3333;
  color: device-cmyk(0% 80% 80% 20%);
}

The hexadecimal declaration provides the visible color in current browsers.

For current compatibility information, visit Can I Use? and search for device-cmyk(). You can also consult the MDN browser compatibility information linked below.

Specifications

The device-cmyk() function is defined in the CSS Color Module Level 5 .

The specification defines device-dependent CMYK color values, component syntax, alpha transparency, and color conversion behavior.

It also describes how CMYK ICC profiles can be associated with device-specific colors through @color-profile.

Related CSS features include rgb(), color(), lab(), color-mix(), and @color-profile.