Exploring modern CSS and color prototypes

Sunday, April 21, 2024

A monochrome swatch of interpolated colors using the CSS relative color property.

This weekend I studied CSS and JavaScript and made new prototypes.

Typed Custom properties

I studied using the @property in CSS to add type declarations to custom properties.

the @property declaration can be used to harden custom property values. The idea is to harden custom properties by declaring a syntax and initial-values. If a mistake is made later in the cascade, then the declaration will fall back to the initial value.

Valid CSS Property Types

<length>
<length-percentage>
<number>
<percentage>
<color>
<image>
<url>
<integer>
<angle>
<time>
<resolution>
<transform-list>
<transform-function>
<custom>

@property Syntax:

The CSS Property Type is defined using Syntax.

@property --brand {
  syntax: "<color>";
  inherits: false;
  initial-value: hotpink;
  }

The @property CSS prototype also included using the @layer property. I studied the @scope property but I did not need to use it for this project.

Another little thing in the @property CSS prototype is that it uses a combined :root, * { } declaration.

I studied the differences between placing custom properties inside :root{}, HTML{} and *{}. I am not certain but I think the :root, * { } combo overrides the custom property “gotcha” that Chris Coyer writes about in CSS-Tricks. Maybe it needs to be contained within a @scope property. I am testing.

While working on the @property prototype I also studied the CSS Color-mix property and the CSS Relative-color property.

MSN tools

While studying the CSS Relative-color property I reviewed tutorials on developer.mozilla.org and found some useful tools.

Using the CSS Relative-color property, I created a Color palette generator that includes settings for Complementary, Triadic, Tetradic, and Monochrome interpolated colors.

I also copied and built a “Live-UI-color-scheme-updater”. The color-scheme uses CSS Relative-color properties to add color to a layout. The Live-UI-color-scheme-updater includes a slider to adjust the hue. That will be useful when I create my color/chroma triangle, to change colors.

Color.js

Next I experimented with Color.js. Color.js is a JavaScript library to manipulate color using modern color-level 5 color spaces.

Using Color.js and JavaScript I was able to display colors and color names. I created gradients.

I studied JavaScript to set values as text and display colored boxes. I am able to set a color background in a box and label it with the color declaration.

I tried to interpolate sets of colors and display the set with text. I was unable to figure out the JavaScript to display an array of objects and set properties with the time available.

Other stuff

I began to look for ways to place objects using absolute positioning. I read about SASS mixins looking for ways to automate outputting CSS objects to a placed target.

My goals are to create a color palette for my websites that I can control and modify. I also want to create the color/chroma triangle with labeled swatches that I can select and copy.

The pieces are there for what I want to build. I need to automate the code so I can create it without a ton of manual labor.

Color.js tools:

https://colorjs.io/apps/picker/hsl
https://colorjs.io/apps/gradients/
https://colorjs.io/apps/named/

@property lecture:

slide lecture by Adam Argyle for the Epic Web Conference.