Peacock Tail

CSS

:root {
  --peacock-tail: #01636d;
  --peacock-tail-rgb: 1 99 109;
  --peacock-tail-oklch: oklch(0.457 0.078 206.9);
}

.element {
  color: var(--peacock-tail);
  background-color: hsl(186 98% 22%);
  border-color: oklch(0.457 0.078 206.9);
}

Tailwind CSS v4

@theme {
  --color-peacock-tail: #01636d;
  --color-peacock-tail-50: #ddfcff;
  --color-peacock-tail-100: #cbf0f6;
  --color-peacock-tail-200: #aedee6;
  --color-peacock-tail-300: #88c3cd;
  --color-peacock-tail-400: #63acb6;
  --color-peacock-tail-500: #3b95a0;
  --color-peacock-tail-600: #337e87;
  --color-peacock-tail-700: #29656c;
  --color-peacock-tail-800: #1c4a4f;
  --color-peacock-tail-900: #123337;
  --color-peacock-tail-950: #041f22;
}

SCSS

$peacock-tail: #01636d;
$peacock-tail-rgb: 1, 99, 109;
$peacock-tail-light: mix(#fff, $peacock-tail, 20%);
$peacock-tail-dark: mix(#000, $peacock-tail, 20%);

.element {
  color: $peacock-tail;
  box-shadow: 0 0 0 2px rgba($peacock-tail, 0.35);
}