#7EC2A4

CSS

:root {
  --celadon-porcelain: #7ec2a4;
  --celadon-porcelain-rgb: 126 194 164;
  --celadon-porcelain-oklch: oklch(0.76 0.082 164.8);
}

.element {
  color: var(--celadon-porcelain);
  background-color: hsl(154 36% 63%);
  border-color: oklch(0.76 0.082 164.8);
}

Tailwind CSS v4

@theme {
  --color-celadon-porcelain: #7ec2a4;
  --color-celadon-porcelain-50: #e0fdf0;
  --color-celadon-porcelain-100: #cff1e2;
  --color-celadon-porcelain-200: #b4e0cd;
  --color-celadon-porcelain-300: #8fc5ae;
  --color-celadon-porcelain-400: #6fae92;
  --color-celadon-porcelain-500: #4b9778;
  --color-celadon-porcelain-600: #418066;
  --color-celadon-porcelain-700: #346751;
  --color-celadon-porcelain-800: #254b3a;
  --color-celadon-porcelain-900: #193428;
  --color-celadon-porcelain-950: #092016;
}

SCSS

$celadon-porcelain: #7ec2a4;
$celadon-porcelain-rgb: 126, 194, 164;
$celadon-porcelain-light: mix(#fff, $celadon-porcelain, 20%);
$celadon-porcelain-dark: mix(#000, $celadon-porcelain, 20%);

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