Low Tide

CSS

:root {
  --low-tide: #99d1a4;
  --low-tide-rgb: 153 209 164;
  --low-tide-oklch: oklch(0.81 0.086 150.2);
}

.element {
  color: var(--low-tide);
  background-color: hsl(132 38% 71%);
  border-color: oklch(0.81 0.086 150.2);
}

Tailwind CSS v4

@theme {
  --color-low-tide: #99d1a4;
  --color-low-tide-50: #e4fde9;
  --color-low-tide-100: #d4f1da;
  --color-low-tide-200: #badfc3;
  --color-low-tide-300: #97c5a2;
  --color-low-tide-400: #79ad84;
  --color-low-tide-500: #5a9668;
  --color-low-tide-600: #4d7f58;
  --color-low-tide-700: #3d6646;
  --color-low-tide-800: #2d4b31;
  --color-low-tide-900: #1e3422;
  --color-low-tide-950: #0e1f11;
}

SCSS

$low-tide: #99d1a4;
$low-tide-rgb: 153, 209, 164;
$low-tide-light: mix(#fff, $low-tide, 20%);
$low-tide-dark: mix(#000, $low-tide, 20%);

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