CSS Almanac → At-Rules → C → @color-profile

@color-profile

Sunkanmi Fafowora on

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.

The @color-profile at-rule defines a color profile containing a custom color space (among other information). A color profile can then be used in the color() and color-mix() functions to access unique colors.

@color-profile --sunkanmi-color-space {
  src: url("https://example.com/sunkanmi-color-space.icc");
}

The @color-profile at-rule has not been implemented by any browser yet. However, please take the opportunity to learn about it, as I assure you it will come in handy when working with colors in the future — especially with functions like color() and color-mix(). Plus, it will be a great way to test your color profiles when implemented.

The @color-profile at-rule is defined in the CSS Color Module Level 5 specification.

Syntax

@color-profile = @color-profile [<dashed-ident> | device-cmyk] { <declaration-list> }

Arguments and descriptors

/* color profile with just the source */
@color-profile --juan-diego-color-profile {
  src: "https://example.com/monknow.icc";
}

/* color profile with source and rendering intent */
@color-profile --juan-diego-color-profile {
  src: "https://example.com/monknow.icc";
  rendering-intent: absolute-colorimetric;
}

/* color profile with source, rendering intent, and components */
@color-profile --juan-diego-color-profile {
  src: "https://example.com/monknow.icc";
  rendering-intent: absolute-colorimetric;
  components: white, green, yellow, cyan;
}
  • <dashed-ident>: The color profile’s name that is used in the color() or color-mix() function.
  • device-cmyk: Means that the color profile will be used to resolve colors specified in device-cmyk. CMYK is the color model primarily used for printing, so device-cmyk calibrates colors depending on a printer’s particular ink combination, if known.

src

@color-profile --my-color-space {
  src: url("https://example.com/my-color-space.icc");
}

This describes the source file of the ICC profile. It can be an external URL or a local file; just make sure the ICC profile is not an Abstract, DeviceLink, or NamedColor profile.

rendering-intent (optional)

@color-profile --another-color-space {
  src: url("https://example.com/another-color-space.icc");
  rendering-intent: relative-colorimetric;
}

A rendering intent is a way to convert colors to smaller gamuts in a process called gamut mapping. In an ICC profile, there can be multiple intents, which can be picked using rendering-intent.

Gamut mapping is the conversion of color values from one color space to another so that the colors remain as consistent as possible

  • relative-colorimetric: This value is perfect if you want the most accurate color representation when converting from one color space to another of similar size, like RGB to CMYK. It ensures that colors within the gamut are reproduced accurately by adjusting the white points of the original color space to those of the destination color space, with all the colors adjusted relative to it. If the color is out of gamut, it gets translated to the nearest color and clipped (moved to the edge of the color space).
  • absolute-colorimetric: Instead of the colors (including the white point) in one particular color space being adjusted to the other color space, they are, in this case, transferred directly to the target color space. Any color lying outside the color gamut is moved to the edge of the color space (clipped).
  • perceptual: This is the default colorimetric for converting colors in images. It takes the colors from one color space and re-optimizes them for the destination color space using proprietary methods not available to the public (guessing only ICC-specific methods).
  • saturation: This saturation value is specified to maintain the saturation of the color space. Colors are converted in such a way that the saturation of colors is retained. This value is NOT recommended unless the source and destination color profiles have been cross-checked for the desired result.

components (optional)

The color profile can specify the names of components used to describe the colors in the color space. For example, a color profile with RGB (Red, Green, and Blue) has three components named r, g, and b, and a color profile with CMYK (Cyan, Magenta, Yellow, and Black) has four components named c, m, y, and k.

The components descriptor is a comma-separated list that defines the components in your color profile. Each component is named in the order used in the color profile.

/* @color-profile 4 component system */
@color-profile --sunkanmi-color-profile {
  src: "https://example.com/the_jonin.icc";
  rendering-intent: relative-colorimetric;
  components: saturation, lightness, blue, yellow;
}

Don’t use any calc(), constants, or CSS keywords as a component name

Normally, in programming, keywords are reserved words predefined by the programming language that the compiler or interpreter uses to understand and execute code. These reserved words are not to be used as ordinary variable names (without a modifier of some sort) as they would produce unexpected results. CSS (like every other programming language) also has these keywords, and they are not to be used as a component name. For example:

@color-profile --dontdothis {
  src: "https://whydothis.com/juststop.icc";
  rendering-intent: relative-colorimetric;
  components: a, b, c, pi, e;
}

--foreground: color(--dontdothis 4% 5% 28% 40% 10%);
--background: color(from var(--foreground) a b calc(c * 2) calc(pi * 2) calc(e / 2));

Instead of the resulting background color() values to produce:

a = 4%, b = 5%, c = 56%, pi = 80%, and e = 5%

pi would give an unexpected result of 3.14159265358979 * 2 = 6.28318530717959 and e would also give 2.7182818284590452354 / 2 = 1.3591409142295226177. So, yeah, don’t use calc() constants or any CSS keyword as your component name.

Basic usage

To define a @color-profile rule, we first need to define the color profile’s src and then we are free to use it anywhere else. Well, at least, in color functions that accept it.

@color-profile --cool-saturation {
  src: url("https://example.com/cool-satuation.icc");
}

.header {
  background-color: color(--cool-saturation 40% 10% 30% 10%);
}

Color profiles and color spaces

You may remember that a color space represents “all the available colors organized in a certain way”. Well, the color profile describes the viewing requirement on your device for this organization of colors. It also helps convert color spaces from one to the other, which is a super powerful feature available in CSS — at least to make custom color profiles and adjust different colors as you see fit.

More specifically, a color profile contains a description of colors in a color space or device. To accurately view colors from a color space on your device, color profiles define a mapping between the device source or target color space and a profile connection space (PCS), which can either be CIELAB or CIEXYZ. This means a color profile has both a mapping from a color space to a PCS and from a PCS to a color space. This way, a color space can be mapped to a PCS, which can then be mapped to any other color space.

If there’s still room for improvement in the best color spaces we currently have (Oklab, Lab, Oklch, etc.), then color profiles in CSS would be a great way to test those new color spaces. Since it isn’t currently supported, you can dig deep and generate your own profiles here. However, until @color-profile is implemented, we can only understand for now and patiently wait.

Specification

The @color-profile at-rule is defined in the CSS Color Module Level 5 specification, which is currently in its Working Drafts status.

Browser support

There is currently zero browser supporting this feature at the time of writing.

More information

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
This comment thread is closed. If you have important information to share, please contact us.