CSS @color-profile At-Rule

The @color-profile at-rule defines a custom color profile that can be referenced by the CSS color() function. It allows colors to be specified using an external ICC profile rather than only the predefined CSS color spaces.

@color-profile Syntax

@color-profile --profile-name {
  src: url("profile.icc");
  rendering-intent: relative-colorimetric;
}

The at-rule begins with @color-profile, followed by a custom profile name and a declaration block. Custom profile names begin with two hyphens, such as --print-profile.

The special name device-cmyk can also be used to define a profile for device-dependent CMYK colors.

The src descriptor identifies the external ICC profile file. The optional rendering-intent descriptor controls how colors are mapped when the profile provides multiple rendering intents.

How @color-profile Works

CSS includes predefined color spaces such as srgb, display-p3, and rec2020. The @color-profile at-rule provides a way to define an additional color space using an ICC profile.

An ICC profile describes how color values correspond to actual colors. This is useful when working with specialized output devices, printing systems, or color spaces not included among the predefined CSS color spaces.

Once the profile is declared, its custom name can be used as the first argument of the color() function.

The browser must support the at-rule and be able to retrieve and interpret the referenced ICC profile for the custom colors to work.

@color-profile Descriptors

The following descriptors configure a custom color profile.

Descriptor	Description
`src`	Specifies the URL of the ICC profile file.
`rendering-intent`	Specifies how colors are mapped between color gamuts. The default is `relative-colorimetric`.
`components`	Names the color components in their required order. This descriptor is defined in CSS Color Module Level 5.

The components descriptor can describe the channels of a color profile, such as cyan, magenta, yellow, and black.

@color-profile --print-profile {
  src: url("profiles/print.icc");
  components: cyan, magenta, yellow, black;
}

The profile file must exist and contain valid ICC profile data. The filename in this example is a placeholder.

Rendering Intent

The rendering-intent descriptor selects a method for mapping colors when a source profile contains colors that cannot be reproduced in the destination color gamut.

Value	Description
`relative-colorimetric`	Preserves in-gamut colors relative to the source and destination white points and maps out-of-gamut colors to the available gamut.
`absolute-colorimetric`	Preserves colors relative to an absolute reference white, which can be useful for simulating output conditions.
`perceptual`	Adjusts colors to preserve their overall visual relationships when converting between gamuts.
`saturation`	Prioritizes maintaining color saturation, sometimes at the expense of precise color matching.

If rendering-intent is omitted, relative-colorimetric is the default.

Using the color() Function

The color() function can reference a named custom color profile. The numbers following the profile name represent its color components in the order expected by that profile.

@color-profile --custom-print {
  src: url("profiles/custom-print.icc");
}
.sample {
  color: color(--custom-print 0.1 0.7 0.2 0);
}

In this example, --custom-print identifies the profile, while the four numeric values provide color components. Their meaning depends on the referenced ICC profile.

Predefined color spaces, such as display-p3, do not require an @color-profile declaration.

@color-profile Example

The following example declares a custom ICC profile and uses it to define a text color. A standard CSS color is provided first as a fallback.

@color-profile --custom-print {
  src: url("profiles/custom-print.icc");
  rendering-intent: relative-colorimetric;
}
.profile-text {
  color: #336699;
  color: color(--custom-print 0.2 0.5 0.7 0);
}

The browser uses the custom profile only if the feature is supported and the ICC profile is valid and available. The referenced ICC file is illustrative and must be replaced with a real profile.

Browser Support

The @color-profile at-rule is not currently supported in mainstream browsers. The example is intended to explain the syntax rather than provide a working visual demonstration. For updated compatibility information, visit Can I Use? and search for CSS color profiles.

Specifications

The @color-profile at-rule is defined in CSS Color Module Level 5. The specification describes custom ICC profiles, supported descriptors, and their use with CSS colors.

CSS Color Module Level 5