Blue Green Rules

CSS

:root {
  --blue-green-rules: #d8eeed;
  --blue-green-rules-rgb: 216 238 237;
  --blue-green-rules-oklch: oklch(0.933 0.023 193.4);
}

.element {
  color: var(--blue-green-rules);
  background-color: hsl(177 39% 89%);
  border-color: oklch(0.933 0.023 193.4);
}

Tailwind CSS v4

@theme {
  --color-blue-green-rules: #d8eeed;
  --color-blue-green-rules-50: #eef7f7;
  --color-blue-green-rules-100: #e0eaea;
  --color-blue-green-rules-200: #cad7d7;
  --color-blue-green-rules-300: #aabbbb;
  --color-blue-green-rules-400: #8fa3a2;
  --color-blue-green-rules-500: #758b8a;
  --color-blue-green-rules-600: #637675;
  --color-blue-green-rules-700: #4f5e5e;
  --color-blue-green-rules-800: #394544;
  --color-blue-green-rules-900: #27302f;
  --color-blue-green-rules-950: #151c1c;
}

SCSS

$blue-green-rules: #d8eeed;
$blue-green-rules-rgb: 216, 238, 237;
$blue-green-rules-light: mix(#fff, $blue-green-rules, 20%);
$blue-green-rules-dark: mix(#000, $blue-green-rules, 20%);

.element {
  color: $blue-green-rules;
  box-shadow: 0 0 0 2px rgba($blue-green-rules, 0.35);
}