Blue Angora

CSS

:root {
  --blue-angora: #a7cfcb;
  --blue-angora-rgb: 167 207 203;
  --blue-angora-oklch: oklch(0.825 0.043 188.9);
}

.element {
  color: var(--blue-angora);
  background-color: hsl(174 29% 73%);
  border-color: oklch(0.825 0.043 188.9);
}

Tailwind CSS v4

@theme {
  --color-blue-angora: #a7cfcb;
  --color-blue-angora-50: #e8f9f8;
  --color-blue-angora-100: #d9edeb;
  --color-blue-angora-200: #c1dad8;
  --color-blue-angora-300: #9fbfbc;
  --color-blue-angora-400: #82a7a3;
  --color-blue-angora-500: #65908c;
  --color-blue-angora-600: #567976;
  --color-blue-angora-700: #45615f;
  --color-blue-angora-800: #314745;
  --color-blue-angora-900: #22312f;
  --color-blue-angora-950: #111d1c;
}

SCSS

$blue-angora: #a7cfcb;
$blue-angora-rgb: 167, 207, 203;
$blue-angora-light: mix(#fff, $blue-angora, 20%);
$blue-angora-dark: mix(#000, $blue-angora, 20%);

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