#A7F3D0

CSS

:root {
  --seafoam-splashes: #a7f3d0;
  --seafoam-splashes-rgb: 167 243 208;
  --seafoam-splashes-oklch: oklch(0.905 0.089 164.2);
}

.element {
  color: var(--seafoam-splashes);
  background-color: hsl(152 76% 80%);
  border-color: oklch(0.905 0.089 164.2);
}

Tailwind CSS v4

@theme {
  --color-seafoam-splashes: #a7f3d0;
  --color-seafoam-splashes-50: #defeef;
  --color-seafoam-splashes-100: #cdf2e1;
  --color-seafoam-splashes-200: #b1e1cc;
  --color-seafoam-splashes-300: #8bc6ad;
  --color-seafoam-splashes-400: #69af90;
  --color-seafoam-splashes-500: #449976;
  --color-seafoam-splashes-600: #3b8164;
  --color-seafoam-splashes-700: #2f6750;
  --color-seafoam-splashes-800: #224c39;
  --color-seafoam-splashes-900: #163527;
  --color-seafoam-splashes-950: #072015;
}

SCSS

$seafoam-splashes: #a7f3d0;
$seafoam-splashes-rgb: 167, 243, 208;
$seafoam-splashes-light: mix(#fff, $seafoam-splashes, 20%);
$seafoam-splashes-dark: mix(#000, $seafoam-splashes, 20%);

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