Best of Both Worlds

CSS

:root {
  --best-of-both-worlds: #01809f;
  --best-of-both-worlds-rgb: 1 128 159;
  --best-of-both-worlds-oklch: oklch(0.557 0.103 222.7);
}

.element {
  color: var(--best-of-both-worlds);
  background-color: hsl(192 99% 31%);
  border-color: oklch(0.557 0.103 222.7);
}

Tailwind CSS v4

@theme {
  --color-best-of-both-worlds: #01809f;
  --color-best-of-both-worlds-50: #d7fcff;
  --color-best-of-both-worlds-100: #c4f0ff;
  --color-best-of-both-worlds-200: #a5def6;
  --color-best-of-both-worlds-300: #7bc3df;
  --color-best-of-both-worlds-400: #4faccb;
  --color-best-of-both-worlds-500: #0a94b7;
  --color-best-of-both-worlds-600: #127e9b;
  --color-best-of-both-worlds-700: #10657c;
  --color-best-of-both-worlds-800: #064a5b;
  --color-best-of-both-worlds-900: #053340;
  --color-best-of-both-worlds-950: #001f29;
}

SCSS

$best-of-both-worlds: #01809f;
$best-of-both-worlds-rgb: 1, 128, 159;
$best-of-both-worlds-light: mix(#fff, $best-of-both-worlds, 20%);
$best-of-both-worlds-dark: mix(#000, $best-of-both-worlds, 20%);

.element {
  color: $best-of-both-worlds;
  box-shadow: 0 0 0 2px rgba($best-of-both-worlds, 0.35);
}