Jolt of Jade

CSS

:root {
  --jolt-of-jade: #4abca0;
  --jolt-of-jade-rgb: 74 188 160;
  --jolt-of-jade-oklch: oklch(0.723 0.111 174);
}

.element {
  color: var(--jolt-of-jade);
  background-color: hsl(165 46% 51%);
  border-color: oklch(0.723 0.111 174);
}

Tailwind CSS v4

@theme {
  --color-jolt-of-jade: #4abca0;
  --color-jolt-of-jade-50: #d5fff4;
  --color-jolt-of-jade-100: #c2f5e6;
  --color-jolt-of-jade-200: #a1e4d2;
  --color-jolt-of-jade-300: #75cab5;
  --color-jolt-of-jade-400: #49b499;
  --color-jolt-of-jade-500: #009d80;
  --color-jolt-of-jade-600: #00856d;
  --color-jolt-of-jade-700: #016b57;
  --color-jolt-of-jade-800: #034f3e;
  --color-jolt-of-jade-900: #04372b;
  --color-jolt-of-jade-950: #002118;
}

SCSS

$jolt-of-jade: #4abca0;
$jolt-of-jade-rgb: 74, 188, 160;
$jolt-of-jade-light: mix(#fff, $jolt-of-jade, 20%);
$jolt-of-jade-dark: mix(#000, $jolt-of-jade, 20%);

.element {
  color: $jolt-of-jade;
  box-shadow: 0 0 0 2px rgba($jolt-of-jade, 0.35);
}