High Point

CSS

:root {
  --high-point: #bcd8d2;
  --high-point-rgb: 188 216 210;
  --high-point-oklch: oklch(0.86 0.031 181.2);
}

.element {
  color: var(--high-point);
  background-color: hsl(167 26% 79%);
  border-color: oklch(0.86 0.031 181.2);
}

Tailwind CSS v4

@theme {
  --color-high-point: #bcd8d2;
  --color-high-point-50: #ecf8f6;
  --color-high-point-100: #ddebe9;
  --color-high-point-200: #c7d9d5;
  --color-high-point-300: #a7bdb9;
  --color-high-point-400: #8ba59f;
  --color-high-point-500: #708d87;
  --color-high-point-600: #5f7772;
  --color-high-point-700: #4c605c;
  --color-high-point-800: #374643;
  --color-high-point-900: #26302e;
  --color-high-point-950: #141d1b;
}

SCSS

$high-point: #bcd8d2;
$high-point-rgb: 188, 216, 210;
$high-point-light: mix(#fff, $high-point, 20%);
$high-point-dark: mix(#000, $high-point, 20%);

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