The Crowd Roars!

CSS

:root {
  --the-crowd-roars: #22c1d5;
  --the-crowd-roars-rgb: 34 193 213;
  --the-crowd-roars-oklch: oklch(0.744 0.123 208.5);
}

.element {
  color: var(--the-crowd-roars);
  background-color: hsl(187 72% 48%);
  border-color: oklch(0.744 0.123 208.5);
}

Tailwind CSS v4

@theme {
  --color-the-crowd-roars: #22c1d5;
  --color-the-crowd-roars-50: #ceffff;
  --color-the-crowd-roars-100: #b9f4ff;
  --color-the-crowd-roars-200: #94e3f2;
  --color-the-crowd-roars-300: #62c9da;
  --color-the-crowd-roars-400: #1ab2c5;
  --color-the-crowd-roars-500: #009bb1;
  --color-the-crowd-roars-600: #008395;
  --color-the-crowd-roars-700: #006978;
  --color-the-crowd-roars-800: #004e57;
  --color-the-crowd-roars-900: #00363d;
  --color-the-crowd-roars-950: #002127;
}

SCSS

$the-crowd-roars: #22c1d5;
$the-crowd-roars-rgb: 34, 193, 213;
$the-crowd-roars-light: mix(#fff, $the-crowd-roars, 20%);
$the-crowd-roars-dark: mix(#000, $the-crowd-roars, 20%);

.element {
  color: $the-crowd-roars;
  box-shadow: 0 0 0 2px rgba($the-crowd-roars, 0.35);
}