JSFiddle - React, Tailwind, and code Playground

HTML

<p class="primary">primary text</p>
<p class="primary-lighter">primary lighter text</p>
<p class="primary-lighter-safari">primary lighter (supports safari)</p>

CSS

:root {
  --primary: rgb(13, 110, 253)
}
.primary {
  color: var(--primary);
}
.primary-lighter {
  color: color(from var(--primary) srgb r g b / .5)
}
.primary-lighter-safari {
  color: color(from var(--primary) srgb r g b / 50%)
}