Pale Beryl

CSS

:root {
  --pale-beryl: #98ded9;
  --pale-beryl-rgb: 152 222 217;
  --pale-beryl-oklch: oklch(0.853 0.07 190.3);
}

.element {
  color: var(--pale-beryl);
  background-color: hsl(176 51% 73%);
  border-color: oklch(0.853 0.07 190.3);
}

Tailwind CSS v4

@theme {
  --color-pale-beryl: #98ded9;
  --color-pale-beryl-50: #dffcfa;
  --color-pale-beryl-100: #cef0ee;
  --color-pale-beryl-200: #b2dedc;
  --color-pale-beryl-300: #8dc3c1;
  --color-pale-beryl-400: #6baca8;
  --color-pale-beryl-500: #479591;
  --color-pale-beryl-600: #3d7e7a;
  --color-pale-beryl-700: #316562;
  --color-pale-beryl-800: #224a47;
  --color-pale-beryl-900: #173431;
  --color-pale-beryl-950: #071f1d;
}

SCSS

$pale-beryl: #98ded9;
$pale-beryl-rgb: 152, 222, 217;
$pale-beryl-light: mix(#fff, $pale-beryl, 20%);
$pale-beryl-dark: mix(#000, $pale-beryl, 20%);

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