Color gamut

Color-gamut media query

This CSS code sets a background image for elements with the class .main. By default, the background image is photo-srgb.jpg. However, it includes a media query targeting devices that support the P3 color gamut, an expanded color space providing richer and more vibrant colors. If the device meets the color-gamut: p3 condition, the background image changes to photo-p3.jpg. This ensures that devices capable of displaying a broader range of colors will use a higher-quality image tailored to their display capabilities.

.main {
  background-image: url('photo-srgb.jpg');
}
@media (color-gamut: p3) {
  .main {
    background-image: url('photo-p3.jpg');
  }
}

The color-gamut media query can check for the following values:

srgb – Basic color gamut supported by most devices.
p3 – A wider color gamut that provides more vibrant colors, supported by devices with better display capabilities.
rec2020 – An even wider color gamut, encompassing a larger range of colors, supported by high-end displays.

These values allow you to tailor your styles based on the color reproduction capabilities of the user’s device.

Color models that support any gamut

LCH (Lab Color with Hue)

LCH stands for Lightness, Chroma, and Hue. It’s a cylindrical representation of the Lab color model, where:

L represents lightness.
C represents chroma (intensity of the color).
H represents hue (color type).

LCH is designed to be more perceptually uniform, meaning that the difference between colors is more consistent with human visual perception.

OKLCH (Oklab with Hue)

OKLCH is similar to LCH but built on the OKLab color model, which aims to improve perceptual uniformity and lightness compression. Here:

L represents lightness.
C represents chroma (intensity of the color).
H represents hue (color type).

OKLCH adjusts color representation to be even more accurate to human vision, particularly lightness and color discrimination.

LAB (CIELAB)

Lab color is a color-opponent space with three axes:

L represents lightness, ranging from 0 to 100.
a for the green-red opponent colors, typically ranging from -128 to 127.
b for the blue-yellow opponent colors, typically ranging from -128 to 127.

Lab color aims to be perceptually uniform, meaning the same amount of numerical change in these values corresponds to about the same amount of visually perceived change.

OKLAB (Oklab Color Space)

OKLAB is a modern color space designed for better perceptual uniformity. It consists of:

L represents lightness.
a and b for color-opponent dimensions, similar to Lab but optimized for more accurate color representation.

OKLAB improves on Lab by providing a more consistent representation of color perception changes, especially in terms of lightness and chroma.

Color() function

The CSS color() function allows you to define colors in various color spaces and models, facilitating precise control over color representation tailored to different display capabilities. Unlike traditional color specifications (like hex, RGB, or HSL), the color() function can use advanced color spaces such as Lab, LCH, and OKLCH, which offer perceptual uniformity.

Key Features of the color() function:

Versatile Color Spaces: Supports a range of color spaces beyond the typical RGB and HSL, including Lab, LCH, OKLab, OKLCH, and custom profiles.
Enhanced Precision: Enables more accurate color manipulation by providing direct access to color components like lightness, chroma, and hue.
Dynamic Color Adjustments: Works seamlessly with CSS variables, allowing for dynamic and context-sensitive color definitions.
Future-Proof Design: Designed to be compatible with modern and emerging color standards, ensuring better color consistency across different displays.

.card {
  background: color(display-p3 0% 100% 0% / 100%);
}

Relative color syntax

The following line of CSS sets the background color to an RGBA value derived from a hex color code with an added transparency level.

.card {
  background: rgb(from #87cefa r g b / 0.7);
}

Here’s a detailed breakdown:

background:: This sets the background property of an element.
rgb(from #87cefa r g b / 0.7): This function uses a color in the RGB (Red, Green, Blue) format. The function includes transparency (in this case, an alpha value). Breaking it down further:
from #87cefa: Specifies that the RGB values should be derived from the hex color #87cefa. This hex code corresponds to a light blue color.
r g b: Identifies that the red, green, and blue components should be taken directly from the hex color #87cefa. It unpacks the hex color into its individual red, green, and blue values.
/ 0.7: Sets the alpha (transparency) level to 0.7, which means the color will be 70% opaque and 30% transparent.

Practical Outcome: The background will be light blue (#87cefa) with 70% opacity, allowing whatever is behind the element to show through partially.

The following CSS sets the background color using the CIELAB color model, but it converts values from the OKLCH color model.

.card {
  background: lab(from oklch(75% 0.16 175) calc(1/2) a b);
}

Here’s what each part means:

background:: Specifies the background property of an element.
lab(from oklch(75% 0.16 175) calc(1/2) a b): This constructs a LAB color by converting values from OKLCH. Breaking it down:
from oklch(75% 0.16 175):
- Sets the reference color in the OKLCH color model.
- 75%: Is the lightness component of the OKLCH color (0% to 100%).
- 0.16: Is the chroma component of the OKLCH color, indicating the colorfulness.
- 175: Is the hue angle in degrees, which determines the specific color.
calc(1/2): Calculates a value for the LAB color model’s lightness (L) component. calc(1/2) simplifies to 0.5 or 50%, setting the lightness to medium.
a: Represents the a component from the OKLCH reference, corresponding to the green-red axis in LAB.
b: Represents the b component from the OKLCH reference, corresponding to the blue-yellow axis in LAB.

Practical Outcome

This CSS line defines a background color based on the LAB color model, calculating its lightness while transforming it from an OKLCH reference color. Specifically, it derives a medium lightness LAB color based on the given OKLCH color, retaining its chroma and hue attributes for the a and b components of LAB. This enables precise color management tailored to perceptual uniformity.

The following CSS sets the background color using the OKLCH color model and incorporates CSS variables to dynamically define the color’s components.

.card {
  background: oklch(from var(--primary) 1 calc(c/3) h);
}

Here’s a detailed explanation:

background:: This property sets the background color of an element.
oklch(from var(--primary) 1 calc(c/3) h): This uses the OKLCH color function, which specifies a color in the OKLCH color space, known for its perceptual uniformity. Let’s break down the components:
from var(--primary): This part specifies that the base color should be taken from the CSS variable --primary. The --primary variable is expected to contain an existing color value in the OKLCH format.
1: This sets the lightness component (L) to 1, which is the maximum value. In the context of OKLCH, a lightness of 1 corresponds to pure white.
calc(c/3): This dynamically calculates the chroma component (C) by taking another variable c and dividing it by 3. This calculation adjusts the intensity or vividness of the color. If c were, for example, 0.9, calc(c/3) would evaluate to 0.3.
h: This sets the hue component (H). The ‘h’ is likely a placeholder or a reference to another CSS variable or contextual value defining the hue. Hue determines the specific shade of color based on its position on the color wheel.

Practical Outcome

This line of CSS creates a background color using the OKLCH color model. It specifies:

A lightness value of 1 (pure white).
A chroma value dynamically calculated from a variable c, reduced to a third of its value.
A hue set by a variable or predefined component h.

The use of CSS variables makes this approach highly flexible. It allows the color components to be dynamically adjusted based on external definitions, which is useful for theming and ensuring consistent color adjustments across different elements.

Color mix

The CSS color-mix() function allows you to blend two colors together to create a new color. This function is particularly useful for creating nuanced color schemes and gradients or simply adjusting colors dynamically within your styles. By specifying the proportions of each color in the mix, you can achieve a wide range of effects and ensure consistent design aesthetics.

Key Features of the color-mix() function:

Color Blending: Mixes two colors together in specified proportions.
Flexible Syntax: Supports both absolute and percentage-based mixing for precise control over the blend ratio.
Multiple Color Spaces: Allows mixing colors in different color spaces (e.g., sRGB, Lab, LCH), enhancing versatility and ensuring perceptual uniformity.
Dynamic Adjustments: Works well with CSS variables, enabling dynamic adjustments and theme customization.

Syntax:

color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)

The following CSS uses the color-mix() function to set the background color by blending two specified colors—white and blue—in the srgb color space. Here’s a detailed breakdown:

.card {
  background: color-mix(in srgb, white, blue);
}

The following CSS sets the background color by blending white and blue colors, each contributing 30% to the final color, within the LCH (Lightness, Chroma, Hue) color space.

.card {
  background: color-mix(in lch, white 30%, blue 30%);
}

This CSS code defines a custom property --link-color using the OKLCH color model for link elements and sets the link color to this value. When the link is hovered over, the color changes by blending 40% white with the current color using the OKLab color space, creating a lighter shade upon hovering.

:root {
  --link-color: oklch(35% 0.5 140);
}
a {
  color: var(--link-color);
}
a:hover {
  color: color-mix(in oklab, white 40%, currentColor);
}

Practical Applications:

Custom Gradients: Create smooth transitions between colors based on specific design requirements.
Theming: Easily adjust theme colors by mixing base colors with different weights.
Dynamic Designs: Enhance user experience by dynamically changing color blends based on user interactions or environmental conditions.

The color-mix() function empowers developers to create sophisticated color blends, ensuring more flexible and visually consistent web designs.

Color-gamut media query

Color models that support any gamut

LCH (Lab Color with Hue)

OKLCH (Oklab with Hue)

LAB (CIELAB)

OKLAB (Oklab Color Space)

Color() function

Relative color syntax

Practical Outcome

Practical Outcome

Color mix

Leave a Reply Cancel reply