Skip to content

Latest commit

 

History

History
63 lines (42 loc) · 2.6 KB

RCS-Explainer.md

File metadata and controls

63 lines (42 loc) · 2.6 KB
Raw

Explainer: Relative Color Syntax

Author

  • Chris Lilley, W3C

Participate

Introduction

Create colors in CSS by starting from some other color, and modifying it.

Motivating Use Cases

Creation of a range of colors, starting from a base color. When the base color changes, the other colors update automatically.

User research

Historically, this sort of color palette creation was performed server-side using a CSS pre-processor such as Sass, which provides functions to extract the HSL hue, saturation and lightness components of a color which can then be manipulated before being re-combined in a new color.

Although popular there are a number of downsides:

  • colors are statically generated server-side, so cannot react to animations or scripts
  • manipulation is limited to the HSL color model, which is not perceptually uniform

Relative Color Syntax

Specified as part of CSS Color 5, RCS modifies the grammar of the various color syntaxes in CSS Color 4 to add an optional origin color and channel keywords which are manipulated, using CSS mathematical functions such as calc to create new colors.

Typically, the origin color uses CSS variables.

--darker-accent: oklch(from var(--mycolor) calc(l / 2) c h);
--complement: oklch(from var(--mycolor) l c calc(h + 180));
  • colors are dynamic, and react to changes in the origin color as it is animated or changed through script
  • any color model from CSS can be used; perceptually uniform models such as Oklab and Oklch work well
  • there is no need to make the origin color and the created relative color use the same color space; conversion happens on the fly

Stakeholder Feedback / Opposition

The CSS WG cleared RCS to ship before CR