Christina Brown

CSS

:root {
  --christina-brown: #009094;
  --christina-brown-rgb: 0 144 148;
  --christina-brown-oklch: oklch(0.593 0.101 198.3);
}

.element {
  color: var(--christina-brown);
  background-color: hsl(182 100% 29%);
  border-color: oklch(0.593 0.101 198.3);
}

Tailwind CSS v4

@theme {
  --color-christina-brown: #009094;
  --color-christina-brown-50: #d5ffff;
  --color-christina-brown-100: #c1f3f5;
  --color-christina-brown-200: #a1e2e5;
  --color-christina-brown-300: #75c7cc;
  --color-christina-brown-400: #47b1b4;
  --color-christina-brown-500: #009a9e;
  --color-christina-brown-600: #008286;
  --color-christina-brown-700: #00686b;
  --color-christina-brown-800: #004d4e;
  --color-christina-brown-900: #013536;
  --color-christina-brown-950: #002021;
}

SCSS

$christina-brown: #009094;
$christina-brown-rgb: 0, 144, 148;
$christina-brown-light: mix(#fff, $christina-brown, 20%);
$christina-brown-dark: mix(#000, $christina-brown, 20%);

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