<p class="text">textColor</p>
<p>Remove the javascript fallback if your chromium browser version is below 85 and see the magic</p>
@property --Mycolor {
  syntax: '<color>';
  initial-value: red;
  inherits: false;
}
.text {
  color: var(--Mycolor);
}
if (window?.CSS?.registerProperty) {
  window.CSS.registerProperty({
      name: '--Mycolor',
      syntax: '<color>',
      initialValue: 'red',
      inherits: false,
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.