<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,
  });
}