The color function
Tags: css, html
Published: 2020-03-18 16:35:33

---
title: The color function
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 9: color function
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

> **Warning: This function is not widely supported at the moment**. Be cautious when using it, and avoid relying on it in production environments.

The [`color()` function](https://drafts.csswg.org/css-color/#color-function) allows defining colors in a particular colorspace. It will take as parameters a comma-separated list of colors (that can be from different colorspaces), with the last one (this time from any type) acting as a fallback.

Its syntax may seem complicated compared to the previous ones but, as we'll soon see, it is simpler than what it seems:

![Color function syntax is simpler than what it seems](https://dev-to-uploads.s3.amazonaws.com/i/bxoqw5gs1qvjy0g1z2ut.png)

The arguments for the `color()` function are:

1. Colorspace identifier: this is an optional string that will help identify the colorspace used in the function (see below for some predefined colorspaces). If none is provided, `srgb` is the default value.

2. Followed by one of these:
   - One or more numeric values (they can be number or percentages) that will match the values for the parameters in the specified color space. Or,
   - A string with the name of the color as defined in the specified colorspace. Not all colors will have string names.

3. Alpha value: we've seen this one in other color functions, it indicates the opacity of the color, it is an optional value that can be a number or a percentage.

4. Fallback value: an optional color value in any of the formats available in CSS.

You may have noticed that brackets are surrounding from the colorspace to the alpha (steps 1-3), which means that we can have multiple colors that would be separated by commas.

Five predefined colorspaces can be used with the `color()` function. We are going to add a short description without getting into much detail for each of them:

- [a98-rgb](https://drafts.csswg.org/css-color/#valdef-color-a98-rgb): compatible with Adobe&reg; 98 RGB (thus the name). It is a common colorspace for photography.
- [display-p3](https://drafts.csswg.org/css-color/#valdef-color-display-p3): supported by most TVs, modern displays, and computer/laptop screens, which can display all (or almost all) the display-p3 colors.
- [prophoto-rgb](https://drafts.csswg.org/css-color/#valdef-color-valdef-color-prophoto-rgb): often used in digital photography for the master version of the images.
- [rec2020](https://drafts.csswg.org/css-color/#valdef-color-valdef-color-rec2020): this colorspace is used by photographers and by the broadcast industry –where it is the standard– for High-Definition, 4K, and 8K television.
- [srgb](https://drafts.csswg.org/css-color/#valdef-color-srgb): the default colorspace for CSS. And its result would be equivalent to using the `rgb()` function.

All these colorspaces take three parameters that will correspond to red, green, and blue respectively, which values can go from 0 to 1 or from 0% to 100%. Lower values imply a lack of that color, while full 1 or 100% values indicate the full application of the color. 

Some examples of the `color()` function with different combinations of colorspaces, alphas, and fallbacks:

```scss
color: color(a98-rgb 0.44091 0.49971 0.37408);
color: color(display-p3 0.25 0.12 0.45);
color: color(prophoto-rgb 0.36589 0.41717 0.31333);
color: color(rec2020 0.534 0.123 0.121 / 1);
color: color(srgb 100% 0% 0%, #F00);
color: color(srgb 1 0 0, srgb 0.865 0.417 0.333, #F00);
```