3.5 Colors in CSS

To define and display color on the web, CSS offers several formats that allow developers to express colors. These color models are the building blocks for styling user interfaces, data visualizations, and accessible themes.

The most common ways to define color in CSS include:

  • Named colors: A predefined list of around 140 color names e.g., red, blue, LightYellow. These are simple to use and universally supported by all browsers, but offer limited control.

  • RGB values: rgb(RED, GREEN, BLUE) specifies colors using red, green, and blue channels; each value ranges from 0 to 255. For further information, see RGB.

  • HEX Values: #RRGGBB For further information, see HEX.

  • HSL Values: hsl(Hue, Saturation, Lightness) For further information, see HSL.

color-space

Different displays use different technologies to render color, which can lead to visual inconsistencies between the different devices, monitors, browsers, and applications. A color space defines how colors are represented and interpreted. It determines the range of colors (gamut) that can be displayed and ensures color consistency across environments (see Figure 31).

In this thesis, all color-related work is based on the sRGB color space. sRGB is the standard for the web and is supported across all major browsers and devices. It serves as the default for common CSS color functions such as rgb() and hsl().

Some supported color spaces in CSS include:

  • srgb

  • lab

  • lch

  • oklab

  • oklch

  • display-p3

Figure 31: Visualization of the color space of sRGB and Display P3 (Figma, n.d.-f).

To maintain color consistency across devices, Figma supports the color spaces (color profiles) sRGB and Display P3 (Figma, n.d.-f). Display P3 color space includes vivid colors that are not available in sRGB. It has a wider gamut that can represent approximately 49% more colors than sRGB. It is increasingly used in modern displays, especially on Apple devices; however, in CSS Display-P3 color(display-p3 r g b) has yet to be supported by all browsers (MDN, 2025e).

color-mix() Function

The modern CSS function color-mix() allows developers to directly blend colors in CSS. It takes two color values and returns the result of mixing them (MDN, 2025a). The basic syntax is:

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

  • in <color-space>: Specifies the color space in which the mix should happen (e.g. srgb, hsl, lab, lch)

  • <color1> and <color2>: The two colors to be blended

  • <percentage>: Optional; defines how much of each color to use. If omitted, each color defaults to 50%.

For example:

/* color-mix(in <polar-color-space>, <color>, <color> <percentage>) */
color-mix(in hsl, hsl(200 50 80), coral 80%)
/* color-mix(in <polar-color-space> <hue-interpolation-method>, <color>, <color>) */
color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)

/* color-mix(in <rectangular-color-space>, <color>, <color>) */
color-mix(in srgb, plum, #f00)
/* color-mix(in <rectangular-color-space>, <color> <percentage>, <color> <percentage> */
color-mix(in lab, plum 60%, #f00 50%)

/* color-mix(in <custom-color-space>, <color>, <color>) */
color-mix(in --swop5c, red, blue)

Light and Dark Mode in CSS

The implementation of light and dark mode has become a baseline expectation for contemporary web applications and user interfaces. Light and dark theme support has become a standard for most websites. It improves accessibility, usability, and user comfort. Most operating systems and browsers allow users to choose a preferred color scheme (light or dark) at system level. This preference can be detected via CSS or JavaScript. CSS provides several strategies for implementing theme support.

Media Queries

The earliest and most standardized method leverages the prefers-color-scheme media query. This uses the user's system or browser theme preference to conditionally apply CSS styles or variables. This allows CSS to react to the user's system-level theme preference without requiring any JavaScript (MDN, 2025b).


/* Define colors for light mode as default */
:root {
  --bg-color: white;
  --text-color: black;
}
/* override colors inside media query for dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }
}

Theme Classes on the Root Element

A more flexible and application-controlled approach uses CSS classes (e.g., .light, .dark) on the element. This approach enables explicit theme switching through JavaScript, providing a better user experience when persistent custom preferences are desired (MDN, 2025c).

<!-- Theme-specific variables are scoped under .light and .dark -->
<html class="dark"> <!-- or class="light" -->
html.light {
  --bg-color: white;
  --text-color: black;
}

html.dark {
  --bg-color: black;
  --text-color: white;
}

data-theme Attributes

A semantically cleaner alternative to classes is the use of a data-theme attribute. This convention allows for fine-grained theme labeling and scaling to multiple themes beyond just “light” and “dark” (e.g., high-contrast, solarized, etc.). Like classes, it requires JavaScript to set and manage the theme.

<!-- CSS targets it with attribute selectors. -->
<html data-theme="dark"> <!-- or data-theme="light" -->
[data-theme="dark"] {
  --bg-color: black;
  --text-color: white;
}

light-dark() Function

The modern light-dark() function, introduced in CSS Color Module Level 5, provides a concise way to define theme-aware color values without using media queries or class-based logic. It accepts two color values: one for light mode and one for dark mode. The browser selects which one to use based on the user’s color scheme preference (MDN, 2025d).

To use light-dark(), the color-scheme property must be set to light dark, typically, on the :root element. This informs the browser that both light and dark themes are supported.

The basic syntax is:

  light-dark(<color>, <color>)
// Example
:root {
  color-scheme: light dark;
}

body {
  background-color:  light-dark(#ffffff, #000000);
  color:             light-dark(#000000, #ffffff);
}

This function returns:

  • The first color when the browser is in light mode or has no preference set,

  • The second color is used when the user has enabled dark mode.

Unlike other approaches, light-dark() is purely declarative and inline, making it easier to manage in CSS-only projects. However, it only works for color properties and cannot be used to switch layout or non-color-related styles.

During this project, the light-dark() function transitioned from experimental to newly available as of July 2025 in all browsers.

CSS Gradients

CSS gradients enable the display of smooth transitions between two or more specified colors.

CSS defines three types of gradients:

  • Linear Gradients (goes down/up/left/right/diagonally)

  • Radial Gradients (defined by their center)

  • Conic Gradients (rotated around a center point)

Linear Gradient

A linear gradient transitions colors along a straight line.

The direction of the gradient can be defined, and any number of color stops can be specified (see Figure 32).

Basic Syntax
background: linear-gradient(<direction>, <color-stop1>, <color-stop2>, ...);
Example
background: linear-gradient(to right, red, yellpw);
Figure 32: Linear Gradient with three evenly spaced color stops (W3Schools, n.d.-a)

The direction parameter can be set to right, to bottom, or specific angles (e.g., 45deg) to control the gradient direction (W3Schools, n.d.-a).

Radial Gradients

Radial gradients spread outward from a central point, forming either a circle or an ellipse. They are defined by their shape, size, center position, and a series of color stops (see Figure 33).

Basic Syntax
background: radial-gradient(shape size at position,
start-color, ..., last-color);
Example
 background: radial-gradient(circle at center, red, yellow, green);
Figure 33: Radial Gradiant with evenly spaced color stops (W3Schools, n.d.-b)

The position parameter can be defined as: center, top left, or a percentage like 50% 50% (X and Y coordinates).

The size parameter defines the size of the gradient. It can take one of four keywords: closest-side, farthest-side, closest-corner, farthest-corner (W3Schools, n.d.-b).

Conic Gradient

A conic gradient is a gradient with color transitions rotated around a center point (see Figure 34).

Basic Syntax
background: conic-gradient([from angle] [at position,] color [degree],
color [degree], ...);
Example
background: conic-gradient(red, yellow, green);
Figure 34: Conic gradient with three colors (W3Schools, n.d.-c)

By default, angle is 0deg and positions the starting point at its center. If no degree is specified, the colors will be spread equally around the center point. The parameter at <position> defines the center point of the gradient (e.g. center, top left, or 50% 50%). Each color stop can optionally be followed by a degree value (e.g., red 0deg, yellow 120deg), specifying exactly where the color should start (W3Schools, n.d.-c).

Previous3.4 Working with Color in UI DesignNext3.6 CSS Custom Properties

Last updated